Two different thresholds in HighCharts 3.0

Question

With HighCharts 3.0, you can now specify colors above and below a single threshold. Like this example:

http://jsfiddle.net/highcharts/YWVHx/

The following code:

$(function () { $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) { $('#container').highcharts({ chart: { type: 'arearange' }, title: { text: 'Temperature variation by day' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: null } }, tooltip: { crosshairs: true, shared: true, valueSuffix: '°C' }, legend: { enabled: false }, series: [{ name: 'Temperatures', data: data, color: '#FF0000', negativeColor: '#0088FF' }] }); }); }); 

Is it possible to have a different threshold with a third color, for example:

Thanks in advance for your help.

Answer 1

This is really possible if you don't mind building the data twice.

  $('#container').highcharts({ chart: { type: 'arearange' }, title: { text: 'Temperature variation by day' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: null } }, tooltip: { crosshairs: true, shared: true, valueSuffix: '°C' }, legend: { enabled: false }, series: [{ name: 'Temperatures', threshold : 0, data: data, color: 'orange', negativeColor: 'blue' }, { name: 'Temperatures', threshold : 10, data: data, color: 'red', negativeColor: 'transparent' }] }); }); 

http://jsfiddle.net/YWVHx/97/

Answer 2

In Highcharts 4.1.0 (February 2015), a function was added to solve this problem without “hacks” called zones ( APIs ). This problem can be solved as follows using zones:

 plotOptions: { series: { zones: [{ value: 0, // Values up to 0 (not including) ... color: 'blue' // ... have the color blue },{ value: 10, // Values up to 10 (not including) ... color: 'orange' // ... have the color orange },{ color: 'red' // Values from 10 (including) and up have the color red }] } } 

See this JSFiddle demo on how it looks.

Answer 3

Unfortunately, this option is not possible, but you can request your offer at http://highcharts.uservoice.com and vote for it.

Answer 4

By the way, I can try using plotLine, for example:

  yAxis: { title: { text: 'My Chart' }, plotLines: [{ id: 'limit-min', dashStyle: 'ShortDash', width: 2, value: 80, zIndex: 0, label : { text : '80% limit' } }, { id: 'limit-max', color: '#008000', dashStyle: 'ShortDash', width: 2, value: 90, zIndex: 0, label : { text : '90% limit' } }] },