Chartjs-Chart.js, increase space between bars and its labels when increasing the charts width

by

1👍

✅

To avoid the blurring effect on the increased chart, you can define the following option. 

maintainAspectRatio: false

Defining categoryPercentage on individual datasets determines how much space each category may take. That way you’ll change the space between the bars. 

{ 
  categoryPercentage: categoryPct,
  label: 'Testuser1', 
  data: [0, 15, 0, 0]
}

If necessary, you may also want to change the tick rotation. 

xAxes: [{
  stacked: true,
  ticks: {
    minRotation: 20
  }
}],

See my StackBlitz

Leave a comment