Bar Chart Columns Grouped Too Tightly

Question

I have a bar chart (stacked by not yet complete) and the columns are all grouping into the left of the chart. What is causing this?

Plnkr: https://plnkr.co/edit/DMRJfbD4ZF3xCiPdFedy?p=preview

data.forEach(function(d) {
        var y0_positive = 0;
        var y0_negative = 0;

        d.components = keys.map(function(key) {
            if (d[key] >= 0) {
                // if we have a positive value, add to the postive
                return {key: key, y1: y0_positive, y0: y0_positive += d[key] };
            } else if (d[key] < 0) {
                // if value is negative, add to the negative value
                return {key: key, y0: y0_negative, y1: y0_negative += d[key] };
            }
        })
    })

Kev

Gerardo Furtado Gerardo Furtado · Accepted Answer · 2016-10-06T05:42:54

There is absolutely nothing wrong with your chart. It's correct, and the data is being accurately shown.

I know it seems the opposite, but this is the reason: you are using a time scale, and a time scale is not an ordinal scale.

Let's see your dates. The first data point is:

"date":"2016-11-03 00:00:00"

Corresponding to 3rd of November. But all the other data points are from 2016-10-06, the 6th of October.

So, the time scale will show all the dates between these two extremes (from 6th of October to 3rd of November) evenly spaced, and all your bars will be squeezed to the left, at the 6th of October (except for a little bar at the right, corresponding to the 3rd of November), because this is the correct and expected outcome when you use a time scale!

Now, see what happens if we simply delete the first object (the 3rd of November) in your data: https://plnkr.co/edit/rhmh2zxEnwO4SLTLvfNu?p=preview

If you don't want to show the time span in the correct proportion, use a ordinal scale instead, like scaleOrdinal or scaleBand.

Bar Chart Columns Grouped Too Tightly

1 Answers