Search code examples
javascriptjquerycolorshighchartsfill

Highcharts multiple fill colors

I'm trying figuring out how to put every other with a brigther fill color for the same serie.

Please have a look at my reference, this is what I want to accomplish.

http://imgur.com/sYW8guR

FYI: Heres a simple area chart to save you time

http://jsfiddle.net/kylander/33cutjqn/
Solution

  • I don't see a way to do this without either using multiple series, or writing your own complex rendering script.

    Another alternative for using 2 series that works a little different than the one proposed by Sebastian:

    1) User the alternateGridColor

    2) set the fillColor of your series with an appropriate opacity for the alternate grid color to have the desired effect

    3) use a 2nd series, which can be automatically created, to stack on top of the main data series, filled with white to cover the alternating color in the 'open' space.

    Example:

    Honestly, I would personally simply opt to use the alternateGridColor option as is, however.