[Chartjs]-Chart.js label on bar

by

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.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js"></script>

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

Leave a comment