eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

DIfferent points should have different border color on select event in gantt highchart in Angular

HI

i found below stackblitz code here when we hover a point then its getting highlighted to green with gray border can we have something that when we hover one point its border blue, other point have green border and other point has red border like that.

https://jsfiddle.net/gh/get/library/pur ... tes-hover/


can u tell me how to achieve it?

My code is
plotOptions: {
gantt: {
states: {
select: {
color: '#77c7d9',
borderColor: '#007993',
animation: true,
borderWidth:2,
// point.dataLabel.text.css({ fill: "rgb(255,0,0)" });
//dashStyle: 'dot'
}
}
},
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

Hello,

It is not a default Highcharts feature, but can be achieved pretty easily with mouse events on point.
I have prepared a simple demo which show you how to update each point on a hover event, right now you just have to create a conditional logic that will set different colors for specific points.

DEMO: https://jsfiddle.net/BlackLabel/1or3wcqk/

Let me know how it went,
Best regards!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

Hi thanks for the demo , my question is specifically for point item select event not for mousehover, can you guide on the same
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

I'm sorry, I got confused by your first post.

You can implement the selection logic in the same way, but using select events instead of mouseOver, and setting the allowPointSelect to true. My colleague has already answered your question from few months ago about the exact same feature. So feel free to combine these two solutions.

viewtopic.php?f=19&t=49140

Regards!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

yes but i need to border different color to selected different points not same
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

In that case, I'd suggest implementing it with click event, not select one. And the colors logic is up to you now.

DEMO: https://jsfiddle.net/BlackLabel/ds8jLegh/

Is that what you were looking for?

Regards!
Kamil Musiałowski
Highcharts Developer
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: DIfferent points should have different border color on select event in gantt highchart in Angular

You're welcome!

Do not hesitate to contact us with any other questions,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Gantt”