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]
}]

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Mock useSearchParams react testing library

Mock useSearchParams react testing library

To mock the useSearchParams hook from react-router-dom, you can use Jest’s mock function to provide a mocked implementation for the hook. For example: Consider we’ve a URL…

Leave a Reply

%d bloggers like this: