DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Change series color on a specific date

Fri Jan 14, 2022 4:06 pm

Hi,

I need to change the color of series in a column bar graph from a specific date to the end of the data available.

Example:

Jan 1 2021 to June 15 2021, serieA = green
June 16 to today, serieA = red.

How can I a achieve that?

Thanks in advance for your help

DoumiLo
Posts: 35
Joined: Wed Jan 20, 2021 2:09 pm

Re: Change series color on a specific date

Fri Jan 14, 2022 8:45 pm

I have found a solution but still need help.

I"m using xAxis.plotBands to add transparent white on top of my column bar starting January 2 2022.

It works fine but my problem is that the plotBand is starting in the middle of the column. And when I use week or month grouping it's even worse. With month grouping, it looks like the plotBand is starting in the middle of January.

See my capture for "by day"
Capture.PNG
Capture.PNG (7.39 KiB) Viewed 35 times
And this is my parameters

Code: Select all

plotBands: [{
    label: { 
        text: 'New data', 
        align: 'left', 
        x: -50
    },
    color: "rgba(255,255,255,.5)",
    from: Date.UTC(2022, 0, 2),
    to: today,
    zIndex: 10,
}],

How can I make sure that the plotband is starting at the left of the column instead of the middle?

Thanks!

mateusz.b
Posts: 1039
Joined: Tue Jul 13, 2021 11:34 am

Re: Change series color on a specific date

Sat Jan 15, 2022 12:00 am

Hi DoumiLo,

Thanks for contacting us with your question.

It is possible to do something like that, but there should be an easier options than plot bands. Column width may vary depending on many factors, for example pointPadding, pointWidth and available space on axis. Because of that it can be quite hard to adjust plot band range. I think updating points based on your condition would be a far better idea. Please provide me with simplified reproduction of your chart and I will try to create something like that. You can start here: https://jsfiddle.net/BlackLabel/g96kt8jo/24/

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”