1

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 ?

manshi44
  • 19
  • 3
  • It's unclear how you update your chart dynamically, but I suppose you are using the api, e.g., class [GanntChart](https://api.highcharts.com/class-reference/Highcharts.GanttChart); so why not use the same api to update the plotBands? In particular if `ganttChart` is the chart instance (the result of the call to `Highcharts.ganttChart`) you can set the plotBands as `ganttChart.yAxis?.addPlotBand({....})`, with the same argument as the "static" option. [This fiddle](https://jsfiddle.net/dpk0oeq8/)uses a standard doc example and sets a plotBand after 3 seconds. – kikon Jun 20 '23 at 05:28

1 Answers1

0

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

Michał
  • 773
  • 1
  • 1
  • 12