how to display data values on Chart.js

Question

Is it possible using Chart.js to display data values?

I want to print the graph.

Thanks for any advice..

Answer 1

There is an official plugin for Chart.js 2.7.0+ to do this: Datalabels

Otherwise, you can loop through the points / bars onAnimationComplete and display the values

---

Preview

---

HTML

<canvas id="myChart1" height="300" width="500"></canvas> <canvas id="myChart2" height="300" width="500"></canvas> 

Script

var chartData = {     labels: ["January", "February", "March", "April", "May", "June"],     datasets: [         {             fillColor: "#79D1CF",             strokeColor: "#79D1CF",             data: [60, 80, 81, 56, 55, 40]         }     ] };  var ctx = document.getElementById("myChart1").getContext("2d"); var myLine = new Chart(ctx).Line(chartData, {     showTooltips: false,     onAnimationComplete: function () {          var ctx = this.chart.ctx;         ctx.font = this.scale.font;         ctx.fillStyle = this.scale.textColor         ctx.textAlign = "center";         ctx.textBaseline = "bottom";          this.datasets.forEach(function (dataset) {             dataset.points.forEach(function (points) {                 ctx.fillText(points.value, points.x, points.y - 10);             });         })     } });  var ctx = document.getElementById("myChart2").getContext("2d"); var myBar = new Chart(ctx).Bar(chartData, {     showTooltips: false,     onAnimationComplete: function () {          var ctx = this.chart.ctx;         ctx.font = this.scale.font;         ctx.fillStyle = this.scale.textColor         ctx.textAlign = "center";         ctx.textBaseline = "bottom";          this.datasets.forEach(function (dataset) {             dataset.bars.forEach(function (bar) {                 ctx.fillText(bar.value, bar.x, bar.y - 5);             });         })     } }); 

---

Fiddle - http://jsfiddle.net/uh9vw0ao/

Answer 2

This works for Chart.js 2.3, including for both line/bar types.

Important: Even if you don't need the animation, don't change the duration option to 0. Otherwise, you will get chartInstance.controller is undefined error.

var chartData = {     labels: ["January", "February", "March", "April", "May", "June"],         datasets: [             {                 fillColor: "#79D1CF",                 strokeColor: "#79D1CF",                 data: [60, 80, 81, 56, 55, 40]             }         ]     };  var opt = {     events: false,     tooltips: {         enabled: false     },     hover: {         animationDuration: 0     },     animation: {         duration: 1,         onComplete: function () {             var chartInstance = this.chart,                 ctx = chartInstance.ctx;             ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);             ctx.textAlign = 'center';             ctx.textBaseline = 'bottom';              this.data.datasets.forEach(function (dataset, i) {                 var meta = chartInstance.controller.getDatasetMeta(i);                 meta.data.forEach(function (bar, index) {                     var data = dataset.data[index];                     ctx.fillText(data, bar._model.x, bar._model.y - 5);                 });             });         }     } }; var ctx = document.getElementById("Chart1"),     myLineChart = new Chart(ctx, {        type: 'bar',        data: chartData,        options: opt     });

<canvas id="myChart1" height="300" width="500"></canvas>