How to Display Data Values on Chart.Js

How to display data values on Chart.js

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/

Display Bar chart values in the graph - ChartJS

For the datalabels plugin to work you need to install it and register it:

Bundler:

npm install chartjs-plugin-datalabels

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

Script tag:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

Chart.register(ChartDataLabels);

Show values on top of bars in chart.js

I pulled out the data from being defined inside of myChart that way I could pull out the max value from the dataset. Then inside of the yAxes you can set the max ticks to be the max value + 10 from your data set. This ensures that the top bars in the graph will not go off the edge of the canvas and not display their value.

var ctx = document.getElementById("myChart");debugger;var data = {  labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],  datasets: [{    data: [150, 87, 56, 50, 88, 60, 45],    backgroundColor: "#4082c4"  }]}var myChart = new Chart(ctx, {  type: 'bar',  data: data,  options: {    "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);          });        });      }    },    legend: {      "display": false    },    tooltips: {      "enabled": false    },    scales: {      yAxes: [{        display: false,        gridLines: {          display: false        },        ticks: {          max: Math.max(...data.datasets[0].data) + 10,          display: false,          beginAtZero: true        }      }],      xAxes: [{        gridLines: {          display: false        },        ticks: {          beginAtZero: true        }      }]    }  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script><canvas id="myChart" width="100" height="100"></canvas>

Chart JS display Data Value on the top of the Bar

For the problem of yours the data labels getting cropped on the top, you can add padding to the through the layout option like this:

layout: {
      padding: {
        left: 0,
        right: 0,
        top: 15,
        bottom: 0
      }
    }

See fiddle -> https://jsfiddle.net/xys1tqfn/1/

LWC: How to display data values in chart js bars in Lightning Web Components(LwC) salesforce

I think the issue is depending on the missing Y scale definition where the default is ticks.beginAtZero: false. The plugin, by default, calculates the position of the labels on whole bar (based on data value) and not on visible one. To force the plugin to use the visible bar, you should use clamp: true option.

Clamp doc: https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#clamping

Chart.plugins.register(ChartDataLabels);
new Chart(
 document.getElementById('myChart'),
 {
  type: 'bar',
  data: {
    labels: ["data1","data2","data3","data4","data5","data6","data7"],
    datasets: [
      {
        label: 'dataset',
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        backgroundColor: "blue",
        data: [65, 59, 80, 81, 56, 55, 40],
      },
    ]
  },
  options: {
    resposive:true,
    plugins: {
      datalabels: {
        clamp: true,
        color: "black",
        labels: {
          title: {
            font: {
              weight: "bold"
            }
          }
        }
      }
    }
  }
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

---

Related Topics