35

I'm trying to remove the space between my bar chart bars, but even though I see this solution many places it doesn't work for me. It's also not mentioned in the Chart.js docs so that is odd. Can someone tell me how to specify it?

var options = {
    barValueSpacing : 1,        // doesn't work; find another way
    barDatasetSpacing : 1,      // doesn't work; find another way

    legend: {
        display: false          // Hides annoying dataset label
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem) {
                return tooltipItem.yLabel;
            }
        }
    }
};

var ctx = document.getElementById("canvasX").getContext("2d");          
var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

3 Answers 3

73

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

7
  • 2
    Minor fix required: scales should be an object, not an array. Commented Sep 7, 2017 at 13:53
  • 2
    A few others have noted this is now-hidden answers, but this does not appear to work for the horizontal bar chart. I'm currently looking for a workaround and will post if I find anything. Commented Dec 13, 2019 at 16:44
  • 1
    @TopherFangiofor me this actually worked for horizontal bar chart (type: "horizontalBar",) !!!!! Commented Mar 5, 2020 at 15:36
  • actually what worked is setting those values, in his Hill's answer, but for yAxes. Commented Mar 5, 2020 at 15:38
  • 5
    Be sure you don't have the Dataset barThickness value set, or it will override the barPercentage setting.
    – Philip F
    Commented Jul 31, 2020 at 2:09
14

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

0
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.