CODEWITHSUNDEEP
highcharts
Alok
Alok

Reputation: 542

Stacked percent bar in a spark line grid for Highcharts

I am trying to modify the Highcharts spark line example at http://jsfiddle.net/o78jnpcz/, such that the charts are just a horizontal stacked percentage bar instead of area chart.

If I just change the chart type to 'bar' and add the bar : { stacking : 'percent' } markup to plotOptions (or even stacking normal), this only results in multiple horizontal bars instead of a single stacked bar.

This looks like a simple issue of not preprocessing data properly, but I'm new to Highcharts and haven't been able to figure it out for a while. How can I get it to display a stacked bar view? Additionally, how to add shared click handlers for the bar (shared between the sections, and can identify each different chart in the grid).

Example of a cell:

Stacked percent bar in grid

Since the data for Alabama in the example is 71, 78, 39, 66; this should display a single stacked bar all the way to the end (percent stacking) with section lengths in the right ratio.

Edit:

Took me some time to figure out what I wanted, jsfiddle with my changes if anyone is interested in something similar.

Upvotes: 2

Views: 1049

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You need to add extra serie and enable stacking option.

Example: http://jsfiddle.net/cmozvokp/

Upvotes: 2

Related Questions