[Chartjs]-Chart.js Bar Chart: How to remove space between the bars in v2.3?

70πŸ‘

You need to set barPercentage and categoryPercentage to 1.0 on the x-axis scale. Add this to your options object:

var options = {
    ...
    scales: {
        xAxes: [{
            categoryPercentage: 1.0,
            barPercentage: 1.0
        }]
    }
};

See http://www.chartjs.org/docs/#bar-chart-chart-options

12πŸ‘

In version 3.2.0 set barPercentage and categoryPercentage to 1.0 within each data set:

var datasets = [
  {
    ...
    barPercentage: 1.0,
    categoryPercentage: 1.0
  }
]

See https://www.chartjs.org/docs/3.2.0/charts/bar.html for more details

8πŸ‘

Both barpercentage and categorypercentage are property of dataset option in chart.js. You can see them in the list here and its default value.

    const labels = ["AA","BB", "CC", "DD", "EE", "FF"];
    const data = {
        labels: labels,
        datasets: [{
            categoryPercentage: 0.8, // notice here 
            barPercentage: 0.8,  // notice here 

            label: 'Male',
            data: [-189, -97, -2076, -691, -7887, -3687],
            //...
        }]
    };

However, according to the configuration document,

The dataset options can be changed at multiple different levels.

Just like the example below. the option can be used in global configuration level.


    const config = {
        type: 'bar',
        data: data,
        options: {

            categoryPercentage: 1.0, // here 
            barPercentage: 0.98,  // here

            maintainAspectRatio: false,
            indexAxis: 'y',
            scales: {
                y: {
                    beginAtZero: true,
                    stacked: true
                },
            }
        },
    };

If you are interested in how the two property interacts, please see the detail here.

Leave a comment