score:6

Accepted answer

with the below updated oncomplete, your code should work with chart.js v2.1

...
var options = {
    animation: {
        oncomplete: function() {
            var ctx = this.chart.ctx;
            ctx.textalign = "center";
            ctx.textbaseline = "middle";
            var chart = this;
            var datasets = this.config.data.datasets;

            datasets.foreach(function (dataset, i) {
                ctx.font = "20px arial";
                switch (dataset.type) {
                    case "line":
                        ctx.fillstyle = "black";
                        chart.getdatasetmeta(i).data.foreach(function (p, j) {
                            ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
                        });
                        break;
                    case "bar":
                        ctx.fillstyle = "white";
                        chart.getdatasetmeta(i).data.foreach(function (p, j) {
                            ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
                        });
                        break;
                }
            });
        }
    },
    ...

fiddle - http://jsfiddle.net/0j4g7kxy/

i've assumed you needed only the bar, but i have retained the code for line in the oncomplete, so it should work for lines too. if you don't need either, just remove the related case from the oncomplete code

score:0

i have adapted it a little bit for horizontal bars to show the sum of values instead of the stacked values. maybe someone can beautify the code a little bit but it works this way:

        oncomplete: function() {
        var ctx = this.chart.ctx;
        ctx.textalign = "center";
        ctx.textbaseline = "middle";
        var chart = this;
        var datasets = this.config.data.datasets;
        var sum=new array();
        datasets.foreach(function (dataset, i) {
            ctx.font = "10px arial";

            switch ( chart.getdatasetmeta(i).type ) {
                case "line":
                    ctx.fillstyle = "black";
                    chart.getdatasetmeta(i).data.foreach(function (p, j) {
                        ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
                    });
                    break;
                case "bar":
                    ctx.fillstyle = "white";
                    chart.getdatasetmeta(i).data.foreach(function (p, j) {
                        ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
                    });
                    break;
                case "horizontalbar":
                    ctx.fillstyle = "black";
                    chart.getdatasetmeta(i).data.foreach(function (p, j) {
                    if (sum[j]== null) { sum[j] = 0; }
                    sum[j]=sum[j]+parsefloat(datasets[i].data[j]);
                    if (i==datasets.length-1) {ctx.filltext(sum[j], p._model.x+10, p._model.y);}

                    });

                    break;
            }
        });
    }

score:1

in addition to potatopeelings's answer, using chart.js v2.5, i had to adjust the following:

switch (dataset.type) to switch ( chart.getdatasetmeta(i).type )

score:1

works for me! chart.js 2.5.0

in addition to potatopeelings's and slashpm answers.

to handle horizontalbar you can add this case (change the padding "offsety" to "offsetx")

case "horizontalbar":
    ctx.fillstyle = "black";
    chart.getdatasetmeta(i).data.foreach(function (p, j) {
    ctx.filltext(datasets[i].data[j], p._model.x + 20, p._model.y);
  });
break;

here is the full function

function chartvaluesshow() { // show max values of the chart
  var ctx = this.chart.ctx;
  ctx.textalign = "center";
  ctx.textbaseline = "middle";
  var chart = this;
  var datasets = this.config.data.datasets;

  datasets.foreach(function (dataset, i) {
    ctx.fontsize = "10px";
    switch (chart.getdatasetmeta(i).type) {
      case "line":
        ctx.fillstyle = "black";
        chart.getdatasetmeta(i).data.foreach(function (p, j) {
          ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
        });
        break;
      case "bar":
        ctx.fillstyle = "black";
        chart.getdatasetmeta(i).data.foreach(function (p, j) {
          ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
        });
        break;
      case "horizontalbar":
        ctx.fillstyle = "black";
        chart.getdatasetmeta(i).data.foreach(function (p, j) {
          ctx.filltext(datasets[i].data[j], p._model.x + 20, p._model.y);
        });
        break;
    }
  });
}

Related Query

More Query from same tag