CODEWITHSUNDEEP
javascriptchart.js
Ansikt
Ansikt

Reputation: 1552

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

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:

Chart Example

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?

Upvotes: 2

Views: 4127

Answers (2)

Antony
Antony

Reputation: 4320

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
            }
        ]
    },

Upvotes: 0

Ansikt
Ansikt

Reputation: 1552

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

Upvotes: 6

Related Questions