Chartjs-Chart js showing different width of bar

by

0👍

✅

You can make use of the tick callback for your K at the end (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats)

var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
  type: 'bar',
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: (val) => (val + 'k')
        }
      }]
    },
    legend: {
      display: false,
      labels: {
        fontSize: 20,
        fontColor: '#595d6e',
      }
    },
    tooltips: {
      enabled: false
    }
  },
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      backgroundColor: "#5e63b4",
      data: [20, 30, 40, 50, 60]
    }]
  },

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

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

Leave a comment