I'm using chart.js on a project due to its MIT license instead of the Highcharts framework. There is one thing that can be easily done on highcharts that I cannot seem to do with Charts.js, which is having labels on top of my bars charts, such as in the demo below:

In highcharts documentation those numbers on each stack of this bar chart is configued in this manner:

plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    

I've extensively read Chart.js documentation and did not find a way of acplishing the same visualization nor examples in forums. Is there a way of showing numbers over the bars using Chart.js barcharts?

I'm using chart.js on a project due to its MIT license instead of the Highcharts framework. There is one thing that can be easily done on highcharts that I cannot seem to do with Charts.js, which is having labels on top of my bars charts, such as in the demo below:

In highcharts documentation those numbers on each stack of this bar chart is configued in this manner:

plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    

I've extensively read Chart.js documentation and did not find a way of acplishing the same visualization nor examples in forums. Is there a way of showing numbers over the bars using Chart.js barcharts?

• javascript
• chart.js

Share Improve this question Follow edited Mar 31, 2021 at 14:23 ppotaczek 39.2k22 gold badges1919 silver badges2929 bronze badges asked Mar 31, 2021 at 13:25 PelicerPelicer 1,58466 gold badges2727 silver badges6363 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It is possible to do this with Chart.js. However you need the datalabels plugin. In this script you can see how it is implemented. With this plugin charts of type 'bar' will automatically add labels to the center.

var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
  type: 'bar',
  options: {
    scales: {
      xAxes: [{

        stacked: true,
      }],
      yAxes: [{

        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]
    },
    legend: {
      display: false,
      labels: {
        fontSize: 20,
        fontColor: '#595d6e',
      }
    },
    tooltips: {
      enabled: false
    },
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          return;
        },
        color: '#fff',
      }
    }
  },
  data: {
    labels: ['ㅇㅇ마트', 'ㅂㅂ프라자', 'ㅈㅈ랜드', 'ㅁㅁ마트', 'ㄴㄴ플러스'],
    datasets: [{
      backgroundColor: "#5e63b4",
      data: [5600, 5600, 10000, 4600, 5600]
    }, {
      backgroundColor: "#e11738",
      data: [6000, 3000, 1600, 6400, 2300]
    }]
  },

});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js"></script>

<canvas id="stack-chart" width="1360" height="450"></canvas>

For anyone searching for how to draw labels on top of the bars:

in options > scales > x or y > ticks you add z: 1.
z property changes the layer, above 0 is above the bars.

Here's the documentation:
https://www.chartjs/docs/latest/axes/_mon_ticks.html