CODEWITHSUNDEEP
javascriptchart.js
Chris
Chris

Reputation: 131

Completely hide empty bars in chart.js

In my Chart.js bar chart, each label has about 6 datasets. Some of these datasets have the value "0". This results in empty gaps on the x-axis, see:

Three empty bars should get removed

I would like to remove these empty gaps. How should I do this?

After my code is rendered from the Database, it looks like this. Please note that for the sake of simplicity, I have reduced the code a lot so that it consists of only two years. The picture above shows only one year.

const labels = [2019, 2020];

const data = {
    labels: labels,
    datasets: [{
        label: 'Dataset 1',
        data: ['0','0']
    },
    {
        label: 'Dataset 2',
        data: ['0', '300']
    },
    {
        label: 'Dataset 3',
        data: ['0','360']
    },
    {
        label: 'Dataset 4',
        data: ['0','0']
    },
    {
        label: 'Dataset 5',
        data: ['0','0'],
    },
    {
        label: 'Dataset 6',
        data: ['0', '1020']
    }]
};

Replacing the "0" by "null" doesn't help. I need to include the "0" / "null", otherwise all datasets get shifted into the wrong year. However, as mentioned, I do not want to loose space therefore because the datasets are different per year and a lot more datasets will follow!

Should I render the datasets in a different style? Should I use a plugin to hide these empty spots?

Thank you so much!

Upvotes: 4

Views: 3709

Answers (1)

Ansikt
Ansikt

Reputation: 1552

I asked the same question over here:

How to prevent empty bars from taking up width in Chart.js bar chart

If your problem was the same as mine, you need to add skipNull to your dataset.

Upvotes: 5

Related Questions