Using Chart.js 2.0, display line chart values

Question

I am trying to get Chart.js 2.0 to display point values in a line chart using the animation onComplete function. I found a post making it work using 1.02, how to display data values on Chart.js, but I am unable to make it work in v2.

My failing fiddle is at Line Chart v2. Any help would be appreciated.

var chartData = {


labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "Buttons",
    strokeColor: "#79D1CF",
    tension: 0,
    fill: false,
    data: [60, 80, 81, 56, 55, 40]
  }, {
    label: "Zipppers",
    strokeColor: "rgba(255,255,0,1)",
    tension: 0,
    fill: false,
    data: [50, 75, 42, 33, 80, 21]
  }]
};

var options = {
  animation: {
    onComplete: function() {
      var ctx = this.chart.ctx;
      ctx.font = this.scale.font;
      //alert(ctx.font);
      ctx.fillStyle = this.scale.textColor
      ctx.textAlign = "center";
      ctx.textBaseline = "bottom";
      var datasetName = chartData.data.datasets[0].label;
      alert(chartData.data.datasets[0].label)
      myLine.data.datasets.forEach(function(dataset) {
        ctx.fillStyle = dataset.strokeColor;
        dataset.points.forEach(function(points) {
          ctx.fillText(points.value, points.x, points.y - 10);
        });
      })
    }
  }
};


Chart.defaults.global.responsive = true;
Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.global.title.display = true;
Chart.defaults.global.title.text = "My Chart";
Chart.defaults.global.title.fontSize = 30;
Chart.defaults.global.legend.position = "bottom";
Chart.defaults.global.hover.mode = "label";
Chart.defaults.global.tooltips.enabled = true;


var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: options
});

Arcadio Quintero · Answer 1 · 2017-05-23T07:05:23.153

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

add some details describing the code for better understanding. — jagapathi, May 22 '17 at 06:34

score 1 · Accepted Answer · answered Feb 01 '16 at 12:28

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);
      });
    })
   }
}};

answered Feb 01 '16 at 12:28

appMoFo

41
2

Hey appMoFo Thanks for the answer. It works like a charm. – Jeffery Banning Feb 02 '16 at 03:36
Interesting ... this doesn't work using v2.5. It throws an error on `dataset.metaDataset._points` interation because there is no property `metaDataset` on the dataset object. (I checked in console) What version are you using? 2. what? – Tremendus Apps Mar 03 '17 at 23:44

score 0 · Answer 3 · answered May 03 '17 at 10:19

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!

Using Chart.js 2.0, display line chart values

3 Answers3