Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article.

Option 1: Using the color option in the series object:

you can use the color option in the series object. Here is an example of how you can do this:

chart: {
    type: 'line'
},
title: {
    text: 'Line chart with different series colors'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
},
yAxis: {
    title: {
        text: 'Y-axis'
    }
},
series: [{
    name: 'Jane',
    data: [1, 0, 4],
    color: '#FF0000' // red
}, {
    name: 'John',
    data: [5, 7, 3],
    color: '#00FF00' // green
}]

---

Option 2: Using the color property in the point object:

You can also specify a color for an individual point in a series using the color property in the point object.

chart: {
    type: 'line'
},
title: {
    text: 'Line chart with different point colors'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
},
yAxis: {
    title: {
        text: 'Y-axis'
    }
},
series: [{
    name: 'Jane',
    data: [{
        y: 1,
        color: '#FF0000' // red
    }, {
        y: 0,
        color: '#00FF00' // green
    }, {
        y: 4,
        color: '#0000FF' // blue
    }]
}]

---

Option 3: Using the colors option in the chart configuration object:

Alternatively, you can use a pre-defined color scheme by setting the colors option in the chart configuration object.

chart: {
    type: 'line',
    colors: ['#FF0000', '#00FF00', '#0000FF'] // red, green, blue
},
title: {
    text: 'Line chart with predefined colors'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
},
yAxis: {
    title: {
        text: 'Y-axis'
    }
},
series: [{
    name: 'Jane',
    data: [1, 0, 4]
}, {
    name: 'John',
    data: [5, 7, 3]
}]