Search code examples
javascriptsvghighchartsgraphael

Creating 0-50-100 percentile area line graphs that use 50 as the threshold for negative

I would like to build a graph that shows a percentile score. An Area Line Graph seems like a good fit, and some libraries have support for negative values. I would like to make something like this: http://www.highcharts.com/demo/area-negative/skies, but set 50 to be the baseline. This way the graph will show people as they relate to the median population instead of against 0.

Anyone know a way to do this with an off-the shelf library like Highcharts, gRaphael, or similar? I don't want to tackle D3 right now :)

Fiddle: http://jsfiddle.net/xzpCV/

Solution

  • In Highcharts, the magic option is called "Threshold". This will allow you to have the line area chart start drawing negative values wherever you'd like.

    Thanks, awesome API docs! http://api.highcharts.com/highcharts#plotOptions.area.threshold

    plotOptions: {
            series: {
                negativeFillColor: 'pink',
                threshold: 50
            }
        },

    Fiddle: http://jsfiddle.net/xzpCV/1/