Chartjs-Chart.js Bar Chart change width (not duplicated to bar width questions!)

by

0👍

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.

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 as follows:

<canvas id="canvas" height="40"></canvas>

Please have a look at the following code snippet.

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['A', 'B'],
    datasets: [{
      label: 'data',
      data: [15, 8],
      backgroundColor: 'rgba(0, 0, 255, 0.2)',
      borderColor: 'rgb(0, 0, 255)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="40"></canvas>

Leave a comment