I'm building a bar chart in Chart.js. I have multiple data series, but often, not all of them will have a value. When this happens, even though the bars aren't there, Chart.js seems to want to allocate space for them:

Notice how the green and blue bars above are always left aligned relative to the labels, and how the pink and yellow are always on the right. How do I make the bars appear centered relative to their labels?

I'm building a bar chart in Chart.js. I have multiple data series, but often, not all of them will have a value. When this happens, even though the bars aren't there, Chart.js seems to want to allocate space for them:

Notice how the green and blue bars above are always left aligned relative to the labels, and how the pink and yellow are always on the right. How do I make the bars appear centered relative to their labels?

• javascript
• chart.js

• 1 Are the empty bars linked to null values or 0 values? – Drarig29 Commented Nov 10, 2021 at 20:22
• 2 If they are null values, you can try to use the skipNull option. Otherwise, you could replace 0 values with null before passing the data to Chart.js – Drarig29 Commented Nov 10, 2021 at 20:29
• 1 Adding the data in your question would be a good idea by the way. – Drarig29 Commented Nov 10, 2021 at 20:30
• Most lazy duplicate I have seen, litterly same problem as the question posted before this: stackoverflow./questions/69919132/… – LeeLenalee Commented Nov 10, 2021 at 20:52
• @Drarig29 I left it out because there's a lot of transformation, but they're null. skipNull seems to actually be the missing piece of the puzzle, but now the bar has an inconsistent width. I'm going to play around with it and see what I get. – Ansikt Commented Nov 10, 2021 at 21:15

2 Answers 2

@Drarig29's answer is correct -- null values plus skipNull removes the extra bars. However, if you're using barPercentage, your bars will fluctuate in width (varies from being a 1/5th of the width to 100% of the width, in my case, depending on how many bars there are), so you must set a maxBarThickness on the dataset to prevent them from growing.

I want to provide a bit of clarification on the use of skipNull. Example 1 and 2 do not produce the same results. In the first example items are omitted from the dataset but ChartJS still calculates the bar width as if they are there so leaves whitespace. In the second example however the missing gaps are replaced by a much wider bar.

In addition note that the "Option 1, Option 2" etc are in a consistant order. That will also stop ChartJS playing ball.

Example 1 (gaps in data):

"data": {
    "datasets": [
        {
            "label": "Key 1",
            "data": {
                "Option 1": 1.25
            },
            "backgroundColor": [
                "#57ba63"
            ],
            "skipNull": true
        },
        {
            "label": "Key 2",
            "data": {
                "Option 2": 7
            },
            "backgroundColor": [
                "#57ba63"
            ],
            "skipNull": true
        },
        {
            "label": "Key 3",
            "data": {
                "Option 1": 5,
                "Option 3": 14
            },
            "backgroundColor": [
                "#57ba63",
                "#0c5916"
            ],
            "skipNull": true
        }
    ]
},

Example 2 (gaps are set to NULL):

   "data": {
        "datasets": [
            {
                "label": "Key 1",
                "data": {
                    "Option 1": 1.25,
                    "Option 2": null
                },
                "backgroundColor": [
                    "#57ba63",
                    "#0c5916"
                ],
                "skipNull": true
            },
            {
                "label": "Key 2",
                "data": {
                    "Option 1": null,
                    "Option 2": 7
                },
                "backgroundColor": [
                    "#57ba63",
                    "#0c5916"
                ],
                "skipNull": true
            },
            {
                "label": "Key 3",
                "data": {
                    "Option 1": 5,
                    "Option 2": null,
                    "Option 3": 14
                },
                "backgroundColor": [
                    "#57ba63",
                    "#0c5916",
                    "#a4eb8f"
                ],
                "skipNull": true
            }
        ]
    },