Chartjs-Using Chart.js 2.0, display line chart values

by

1👍

✅

I can only assume there is a better way, but for now try this:

var options = {
  animation: {
    onComplete: function() {
    var ctx = this.chart.ctx;
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    this.chart.config.data.datasets.forEach(function(dataset) {
      ctx.fillStyle = dataset.strokeColor;
      dataset.metaDataset._points.forEach(function(p) {
      ctx.fillText(p._chart.config.data.datasets[p._datasetIndex].data[p._index], p._model.x, p._model.y - 10);
      });
    })
   }
}};

2👍

onComplete: function(animation) {

                      let ctx: any = this.chart.ctx;
                      let chart: any = this;

                      ctx.fillStyle = 'rgb(133, 157, 189)'; 
                      ctx.textAlign = "center";
                      ctx.textBaseline = "bottom";

                      let datasets = this.config.data.datasets;
                      datasets.forEach(function (dataset, i) {
                          chart.getDatasetMeta(i).data.forEach(function (p, j) {
                            ctx.fillText(datasets[i].data[j], p._model.x, p._model.y - 0);
                          });
                       });


                    }

I use the Version 2.5

0👍

for version 2.5 I noticed there is no metaDataset too.
I used this (assuming ‘yourdata’ contains the data array of your chart). 

    dataset._meta['1'].dataset._children.forEach((point, index) => {
            ctx.fillText(yourdata[index], point._view.x, point._view.y - 15);
          });

Hope this helps!

Leave a comment