ChartJs bar chart - keep bars left instead of equally spread across the width

user_519059 0
Viewed 1354

I'm using ChartJs 2.7.2 to draw a simple bar chart. In my app, the number of bars will vary between 5 - 15. By default the bars are equally distributed across the full width of the chart. However, I want the bars to have a fixed width/left aligned (so when only 5 bars, they do not take up the full width, but stay left aligned). Please see below screenshot for clarification.

enter image description here

chart.js bar-chart
1 Answers

You can provide a labels array padded with empty strings to the required length, e.g. 15.

This will ensure a consistent number of categories on the axis, and thus ensure that the bars will stay the same width and left-aligned even when there are less bars (Fiddle).

(If you like, you can also pad the data array with 0's for consistency, but it's not necessary - the labels array is what determines the axis looks like.)

var data = [12, 19, 3, 5, 2];
var labels = ["a", "b", "c", "d", "e"];

for (var i = labels.length; i < 15; i++) {
  labels.push("");
}

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Count',
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  } 
});
user_51060170
Related