javascript - Individually colored data ranges in highcharts - Stack Overflow

admin管理员组

文章数量:1391947

I have a columnrange series in my highchart, and I want to be able to set a specific color for each range in a series. As long as I just used one color, this worked fine:

data: [[1, 5, 10], [2, 10, 20]]

Here the first value in each list is the X and the next two is the start and the end of the Y range. In order to have a separate color for each range I figured I needed to use the "object notation" instead of the array notation, so I tried this:

data: [{ 
    x: 1,
    y: [5,10],
    fillColor: "red"
},{
    x: 2,
    y: [10,20],
    fillColor: "blue"
}]

This did however not work (got invalid values). I cannot see that this case is covered by the API doc: .data

Does anyone know how I can have ranges (two Y values) with the object notation, or if there is another way I can color the ranges differently? PS: My Y values are actually date ranges, but I just simplified it for the example above.

Edit: Here is a jsfiddle showing what I try to achieve: / . If you change the type to "column", and change the y-values to just single integers, you see that it works fine. But with columnrange I cannot get it working.

I have a columnrange series in my highchart, and I want to be able to set a specific color for each range in a series. As long as I just used one color, this worked fine:

data: [[1, 5, 10], [2, 10, 20]]

Here the first value in each list is the X and the next two is the start and the end of the Y range. In order to have a separate color for each range I figured I needed to use the "object notation" instead of the array notation, so I tried this:

data: [{ 
    x: 1,
    y: [5,10],
    fillColor: "red"
},{
    x: 2,
    y: [10,20],
    fillColor: "blue"
}]

This did however not work (got invalid values). I cannot see that this case is covered by the API doc: http://api.highcharts./highcharts#series.data

Does anyone know how I can have ranges (two Y values) with the object notation, or if there is another way I can color the ranges differently? PS: My Y values are actually date ranges, but I just simplified it for the example above.

Edit: Here is a jsfiddle showing what I try to achieve: http://jsfiddle/Q2JMF/1/ . If you change the type to "column", and change the y-values to just single integers, you see that it works fine. But with columnrange I cannot get it working.

• javascript
• highcharts

Share Improve this question Follow edited Mar 11, 2013 at 8:15 Knut Marius asked Mar 8, 2013 at 14:52 Knut MariusKnut Marius 1,62811 gold badge2121 silver badges4040 bronze badges 2

• 1 Could you make a JSFiddle with your code? – MatthewKremer Commented Mar 8, 2013 at 14:53
• Sure! Updated the question with a jsfiddle – Knut Marius Commented Mar 11, 2013 at 8:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Proper options are low and high, see: http://jsfiddle/Q2JMF/2/

data: [{ 
  x: 1,
  low: 7,
  high: 8,
  color: "red"
}, {
  x: 2,
  low: 6,
  high: 7,
  color: "blue"
}]

本文标签： javascriptIndividually colored data ranges in highchartsStack Overflow