javascript - Highchart data series filled with different colors - Stack Overflow

admin管理员组

文章数量:1200383

I need to figure out how to color the same data series points with different colors in Highcharts. For example, let's say I have a data series for several days and I would like to have a line graph. In this line specific days should be distinguish (maybe colored by some color).

I need to figure out how to color the same data series points with different colors in Highcharts. For example, let's say I have a data series for several days and I would like to have a line graph. In this line specific days should be distinguish (maybe colored by some color).

• javascript
• colors
• highcharts

Share Improve this question Follow asked Jul 10, 2012 at 15:18 whiteErruwhiteErru 27511 gold badge55 silver badges1313 bronze badges 2

• What have you tried? – Event_Horizon Commented Jul 10, 2012 at 15:32
• highcharts.com/stock/ref/#series – Ricardo Lohmann Commented Jul 10, 2012 at 17:40

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 11

In your data, you can specify the color of the specific points:

data: [{
    name: 'Point 1',
    color: '#00FF00',
    y: 0
}, {
    name: 'Point 2',
    color: '#FF00FF',
    y: 5
}]

For line charts, use "fill color", as explained in the answer below.

For an example in jsFiddle, see http://jsfiddle.net/xqWp5/1/

Try using the fillColor property:

{
    name: 'xyz',
    x: 123,
    y: 456,
    fillColor: '#00FF00'
}

Yes you can just use plotOptions.area.zones :

https://api.highcharts.com/highcharts/plotOptions.area.zones

see the example :

plotOptions: {
    series: {
        zoneAxis: "x",
        zones: [{
            value: 0,
            className: 'zone-0'
        }, {
            value: 10,
            className: 'zone-1'
        }, {
            className: 'zone-2'
        }],
        threshold: -10
    }
},

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/color-zones/

With the zoneAxis: "x" you can specify which axis you use to discriminate your differents colors.

You you would like to have colored line partially, you need to have as much series as colors. In other words, each color should be separate series with defined color.

本文标签： javascriptHighchart data series filled with different colorsStack Overflow