Reduce Spacing Between Bars In Horizontal Bar Chart (chart.js)

I have the following horizontal bar chart

Solution 1:

The bar width is influenced through the options barPercentage and categoryPercentage, which both need to be defined on the dataset.

To find out about the relationship between barPercentage and categoryPercentage, see here.

Please take a look at your amended runnable code below:

new Chart('myChart', {
  type: 'horizontalBar',
  data: {
    labels: ['1', '2', '3', '4', '5'],
    datasets: [{
      barPercentage: 0.9,
      categoryPercentage: 1,
      label: 'Stars',
      data: [15, 28, 34, 48, 100],
      backgroundColor: [
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)',
        'rgba(178, 140, 129, 0.2)'
      ],
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

In case you simply want to see the existing bars closer to each other, you need to change the height of the chart. This can be done directly on the canvas through the height attribute. Alternatively you may also enclose the canvas in a div that has its dimensions defined by some CSS.

Share