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

Question

I´m currently testing the ChartType bar form Chart.js.

Thats how i defined the test canvas:

<div class="bar-chart">
  <canvas
    baseChart
    [datasets]="[{label: 'Testuser1', data: [0, 15, 0, 0]}, {label: 'Testuser2', data: [10, 0, 10, 0]}, {label: 'Testuser3', data: [15, 0, 0, 12]}]"
    [labels]="['Junior Softwaredeveloper', 'Senior Softwaredeveloper', 'Designer']" [chartType]="barChartType"
    [options]="options">
  </canvas>
</div>

The options im using:

export const CHARTOPTIONS_BAR = {
  legend: {display: false},
  animation: null,
  tooltips: {
    callbacks: {
      label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[0] + 'h'
    },
  },
  plugins: {
    colorschemes: {
      scheme: 'tableau.SuperfishelStone10',
      override: true
    }
  },
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: [{
      stacked: true,
      scaleLabel: {
        display: true,
        labelString: 'Stunden',
        fontSize: 18
      }
    }]
  },
  responsive: true
};

And the parent class just defines the width and height to which the canvas responsively adapts to:

.bar-chart {
  width: 400px;
  height: 200px;
}

Thats how it looks:

I would like to increase the width of the chart, so theres enough space for longer text like Junior Softwaredeveloper to fit in(horizontally).

But if i increase the width from 400px to 800px i get this:

So it scales up the aspect ratio of everything which results in a blurred image. Is there a way to increase the width of the chart which then causes the space between the bars to increase, but keep the aspect ratio of the text, bar etc. the same?

I basically just want everything to be like in the above image. Just double the width without it affecting the aspect ratio of the elements. Doubling the width should just double the space between the bars and its labels which would help me to fit in longer text horizontally.

uminder uminder · Accepted Answer · 2020-01-15T09:16:23

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

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

1 Answers