How to set background color for series with unique name in Gantt chart from Highcharts?

Question

I want to dynamically show background colors for each Series (Unique names) in gantt chart. Something like shown in below below screenshot

Image showing light grey and grey background for Development & Testing

I tried plotBands option on yAxis by referring this documentation

Codepen link for the demo code

 yAxis: 
      {
       uniqueNames: true,
       plotBands: [
            {
                color: "#DCDCDC",
                from: 0.5,
                to: 1.5
            },
           {
                color: "grey",
                from: 1.5,
                to: 2.5
            }
        ],
    },

With this i can set background if i know from and to values. But in my case these values are gonna be dyanamic.

So is there a way I can set background for series with uniqueNames = true ?

Answer 1

This is a bit tricky, there is no option in the API that allows you to set the background for a given row, the plotBands you used is a good way but not ideal if you want to have it dynamic.

In such a situation, you can use SVGRenderer and use the callback function chart.events.load() to generate rectangles and then use chart.events.render() to dynamically update their position and height when changing the window width or other chart updates.

Demo: https://jsfiddle.net/BlackLabel/jarqk03c/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/chart.events.render