Stacked bar charts not rendering correctly.

[aeronauticus]

I have a stacked bar chart, and have noticed that the proportions of the charts seem to be incorrect.

The light blue bar has a value of 30, while the dark blue bar has a value of 15. Shouldn't the dark bar be exactly half the height of the light blue bar? Otherwise it would seem to give you an incorrect visual representation of the data.

[aeronauticus]

Any ideas here?

[gwatts]

The result is probably correct, depending on your data. It's a sparkline (which is intended to show trends in a limited space rather than absolute values), which means by default the X axis ranges from the minimum value in your dataset to the maximum value. Thus if your minimum value is 5 and the max is 30 then X ranges from 5 to 30.

If you really want X to start at zero then set the chartRangeMin option to 0

[aeronauticus]

Hi Gareth,
Thanks for the response. I set chartRangeMin to 0, and nothing changed. That's not surprising, as one of the values in the chart was already 0, which would have been the default minimum range (it's the bar on the far left, in the example included above). Despite having a minimum range of zero, the proportions of the stacked bar charts don't seem to be correct, as shown in the above example...unless I'm missing something here.

[gwatts]

Hi - I tried to reproduce this today with a simple dataset, but it appears ok for me so far.. If you could come up with a very simple web page that demonstrates the problem, that would be a great help

[aeronauticus]

Hi Gareth,
I created a Jsfiddle for this: http://jsfiddle.net/CtTLk/

I had to paste the entirety of jquery-1.7.2.min.js and jquery.sparkline.min.js into the Javascript box, but if you scroll down to the bottom of that box you will be able to see the code used to generate this bar chart.

If you look at the output, you will notice that that data point on the far left is a 0, which should effectively set the minimum range. However, if you look at most of the bars you will notice that the red bar is usually more than double the height of the blue bar, despite being less than double the value. Take a look at the eighth datapoint from the right to see this in action. The red bar has a value (22) which is precisely double the value of the blue bar (11), however it is nearly three times the height of the blue bar.

I hope that helps.

[sathomas]

Actually, I don't see anything wrong with the example you've included. By my count the light blue bar is 23 pixels in height, while the dark blue bar is 12 pixels in height. That's reasonably close to the 2:1 ratio of your values (30 and 15).

For stacked bars, each value is independent; they're not cumulative. So the light blue bar ranges from the top of the dark blue bar to the top of the light blue bar.

[aeronauticus]

That seems to be very counter-intuitive behavior, as the reason you use a stacked bar chart is to compare one value against another. I believe Google handles this behavior correctly: https://developers.google.com/chart/interactive/docs/gallery/imagebarchart

[sathomas]

The google example is exactly the same algorithm as sparklines.

The reason to use a stacked bar chart is that you want to "stack," or sum different constituents of a whole value. The final height of the bar represents the total of all the individual components. For example, if I purchase 15 apples and 30 bananas on a given day, the total height of the "fruit" bar for that day should be 45.

Perhaps you're thinking of a clustered bar chart, which would allow you to compare apples vs. bananas directly. Sparklines doesn't support that directly, though you could manage with a composite chart.

[aeronauticus]

Ok, that makes sense. I'll look into the composite chart option. Thanks for the help.