Line chart - Override series opacity for specific point/marker

[ashakked]

Hello,

I have a line chart with a series. I'm listening to the point click event, and I'm performing some logic when clicking on a point in the series.
As part of this logic, I'd like to change the opacity for the entire series to 0.2, and keep the opacity for the clicked point/marker at 1. Basically, I'm trying to use opacity to highlight the clicked point.

I seem to be unable to do this. The series opacity always takes over the marker fillColor, and performs as the base opacity for the marker.
Meaning, after calling series.update({ opacity: 0.2 }), which of course changes the opacity for the entire series, the clicked point stays transparent, even after updating it's color with point.update({ marker: { fillColor: ... } }), when either using a hex color without opacity, or an rgba color with opacity 1.

Since, in line charts, it looks like there's no straight way to set the opacity (like for a series), it there a way to achieve this?

Thanks!

[kamil.m]

Hi there,

Thank you for contacting us!

Your logic seems really fine, so as final touch - instead of using the opacity on a clicked point, have you thought about using the series.allowPointSelect property? You can also style it with series.marker.states.selected property.

API References: https://api.highcharts.com/highcharts/s ... ointSelect
https://api.highcharts.com/highcharts/s ... tes.select

Do not hesitate to contact us with any further questions,
Best regards!

[ashakked]

Hi Kamil,

Thanks for the quick reply!

Using the point select functionality is certainly a nice touch, but unfortunately it still doesn't solve the opacity issue.

I'm trying to set the opacity for the entire series (everything, both markers and lines between them) to be half transparent, and keep one marker not transparent at all (opacity 1). I seem to be unable to do this. The series opacity always takes over the marker opacity.

Am I missing something?

[kamil.m]

Hi there,

I have prepared a small workaround for you using rgba colors. Take a look at the very simple, hardcoded example of what you are trying to achieve.
DEMO: https://jsfiddle.net/BlackLabel/fL35jv8p/

Let me know your thoughts about this one,
Best regards!

[ashakked]

Hi Kamil,

Yes! This works perfectly. I guess updating the color for the entire point and not just the marker does the trick.

Thanks!

[kamil.m]

I'm glad to hear that!

In case of any other questions, please do not hesitate to contact us.

Have a good day!