CODEWITHSUNDEEP
javascriptgraphhighcharts
eightonrose
eightonrose

Reputation: 688

Highcharts Column Graph with background color?

I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do? Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?

Upvotes: 0

Views: 4412

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

There are three options that come to mind:

1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.

Example:

[[edit for questions

The order of the series does not matter for this to work, and neither does the legendIndex.

What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack

Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.

In addition, you need to have one overall max value.

Updated example:

(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)

]]

2) plotBands, as mentioned above

3) using the alternateGridColor property and set your data to skip an x axis value between each point.

Reference:

- http://api.highcharts.com/highcharts#xAxis.alternateGridColor

Upvotes: 4

Related Questions