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

Change series color on a specific date

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

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 635 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: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change series color on a specific date

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
ranv94
Posts: 1
Joined: Fri Apr 15, 2022 10:43 am

want to hide plotbands other side in 3d scatter

I 'm using scatter 3d and want to drow plot on xAxis but not on show on y Axis .....but it appears
what should i do.

[{
color: '#ffa5008c',
from: -10.06,
to: -8.06 ,
label: {
text: 'text',
align: 'center',
y: 160
}
}}
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Change series color on a specific date

Hi ranv94,

Welcome to our forum and thanks for contacting us with your question!

Please create a live demo with the issue and tell me what precisely would you like to change. You can start here:
https://jsfiddle.net/BlackLabel/76xvcwj1/

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”