HighCharts : Is it possible to customize the colors of individual series?

Question

I am using HighCharts for a line graph report. In this specific report I have been asked to Customize the colours of each series. The series will always stay the same. So for example:

John series: Blue dashed line Mary series: Solid Red Line

Does anyone know how to accomplish this?

Eric C · Accepted Answer · 2014-05-22T20:58:12.117

117

Options can be set separately for each series.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'John',
        color: '#0066FF',
        dashStyle: 'ShortDash',
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 2, 1), 71.5],
            [Date.UTC(2010, 3, 1), 106.4]
        ]
    },{
        name: 'Mary',
        color: '#FF0000',
        data: [
            [Date.UTC(2010, 0, 1), 60.9],
            [Date.UTC(2010, 1, 1), 40.5],
            [Date.UTC(2010, 2, 1), 90.0],
            [Date.UTC(2010, 3, 1), 80.4]
        ]
    }]
});

JsFiddle Example

edited May 22 '14 at 20:58

answered Apr 20 '11 at 20:47

Eric C

3,886
3
30
26

1

Thanks for this! The reference docs made it seem like you could only set options for all series. I thought it was strange when I saw that, but this makes it clear. – Ash Clarke Jan 09 '12 at 09:38
2

Can you make that color conditional? Wondering if you can get to the color through a formatter. – tsquillario Apr 16 '12 at 19:43

score 12 · Answer 2 · edited Jul 31 '14 at 14:53

If you read the api here, you'll see the following text.

Serie

The actual series to append to the chart. In addition to the members listed below, any member of the plotOptions for that specific type of plot can be added to a series individually. For example, even though a general lineWidth is specified in plotOptions.series, an individual lineWidth can be specified for each series.

So you can add anything from plotOptions.

Demo:

series: [{
    name: 'serie1',
    data: [0,1,2,3,4,5,6,7,8,9],
    color: '#FFFF00',
    lineWidth: 4,
    id: 'serie1',
    step: true
}]

Working demo

HighCharts : Is it possible to customize the colors of individual series?

2 Answers2

Linked