Sometimes, we want to customize the colors of individual series with HighCharts and JavaScript.

In this article, we’ll look at how to customize the colors of individual series with HighCharts and JavaScript.

How to customize the colors of individual series with HighCharts and JavaScript?

To customize the colors of individual series with HighCharts and JavaScript, we set the color property of each object in the series array property.

For instance, we write

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

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

to create a chart with the Highcharts.Chart constructor.

We call it with an object that has the series property set to an array with the series data.

We set the series color by setting the color property.

Conclusion

To customize the colors of individual series with HighCharts and JavaScript, we set the color property of each object in the series array property.