dhanushkumarsivaji
Posts: 42
Joined: Sat Jun 11, 2022 6:07 am

how to add the colors fade out upon moving the cursor to specific points in react ?

Hi,

In the below image, you can see the line chart colors fades in, after moving to different points.

Image

I want to create something like this in the above. I tried to implement the example in this JS fiddle https://jsfiddle.net/ocdta7su/3/ but unfortunately, I am not able to do this in react.

Here you can get the working demo I created https://codesandbox.io/s/wealth-path-fa ... rc/App.tsx

Please help to add the fade in functionality in the above reactjs example code
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: how to add the colors fade out upon moving the cursor to specific points in react ?

Hi dhanushkumarsivaji!
Thanks for contacting us with your question!

To achieve this feature you should use tooltip with shared property set to true. Then, add some backgroundColor to white with opacity. Just like in the demo in pure JS.

Demo: https://codesandbox.io/s/wealth-path-fade-forked-3t901e

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
dhanushkumarsivaji
Posts: 42
Joined: Sat Jun 11, 2022 6:07 am

Re: how to add the colors fade out upon moving the cursor to specific points in react ?

Hi, Thanks for the help.

I have this one query to be resolved,

If you see the below image

Image

the names are plotted to the lines closely .

Would it be great If you could address this one as well? In the provided answer the names are away from the lines

Image
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: how to add the colors fade out upon moving the cursor to specific points in react ?

Dhanush,

Sorry for the slightly long response. I have implemented a feature to position labels based on point position, additionally, if there is no place for the label, it will be positioned just below the previous one to avoid overlapping. All you need is to use your custom function to generate a proper text inside the label. Please, check the demo below to see an example.

Demo: https://codesandbox.io/s/wealth-path-fade-forked-g6pevw

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
dhanushkumarsivaji
Posts: 42
Joined: Sat Jun 11, 2022 6:07 am

Re: how to add the colors fade out upon moving the cursor to specific points in react ?

Wow. It's really great. Thanks for the help Hubert :)
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: how to add the colors fade out upon moving the cursor to specific points in react ?

You're welcome, Dhanush! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”