Page 1 of 1

Spider web Chart/ Polar chart

Posted: Sun Nov 28, 2021 8:57 am
by anu_1555
How can we make spider chart to have shaded region /looks like area chart on hover of each series? the series is filled with color when I have changed the type from 'line' to 'area' in chart options but needed this to happen only on hover. Kindly help Image

https://jsfiddle.net/gh/get/library/pur ... lar-spider

Re: Spider web Chart/ Polar chart

Posted: Mon Nov 29, 2021 9:37 am
by mateusz.b
Hello anu_1555,

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

You can achieve something like this by changing fill color on mouseover and mouseout events.
Demo: https://jsfiddle.net/BlackLabel/shy7rtdv/

Let me know if that was what you were looking for!
Regards!

Re: Spider web Chart/ Polar chart

Posted: Mon Nov 29, 2021 7:23 pm
by anu_1555
Hi,Thanks for the response, but I want the color to get filled on hover of series in the chart ,but in your response it seems to happening when hover on legend item.Could you provide the response when we hover on the series item instead on legend?
Thanks

Re: Spider web Chart/ Polar chart

Posted: Mon Nov 29, 2021 9:40 pm
by mateusz.b
Hi anu_1555,

Sorry, I must have misunderstood. Here is a demo with fill on series mouseover: https://jsfiddle.net/BlackLabel/okt9Lfvw/

Let me know if this time that was what you were looking for!
Regards!

Re: Spider web Chart/ Polar chart

Posted: Tue Nov 30, 2021 4:32 am
by anu_1555
Thanks,it did work but one final question, how can we set the fillOpacity inside graphic.attr({}),I tried but it didnt work.I want the color shade to be of same color as series but with less opactity. changing the opacity did work but doing that dimming the lineborder opacity as well.

Thanks

Re: Spider web Chart/ Polar chart

Posted: Tue Nov 30, 2021 9:07 am
by mateusz.b
Hello anu_1555,

You have two options here:
- in case of line chart you can use alpha channel to add color opacity
Demo: https://jsfiddle.net/BlackLabel/x36va87e/
About alpha channel: https://developer.mozilla.org/en-US/doc ... escription

- use area type chart and only adjust fillOpacity value on mouseOver and mouseOut events. For this type of series fill color will be inherited automatically
Demo: https://jsfiddle.net/BlackLabel/2g3rpsyL/
API reference: https://api.highcharts.com/highcharts/s ... illOpacity

Let me know if you have any further questions!
Regards!

Re: Spider web Chart/ Polar chart

Posted: Fri Jan 07, 2022 5:49 am
by anu_1555
Hi, Thanks for the response, that did work , May I also know how can I show datalabels only when I hover on the legends (which are on the right side of the chart)?

Thanks

Re: Spider web Chart/ Polar chart

Posted: Fri Jan 07, 2022 3:50 pm
by mateusz.b
Hi anu_1555,

To show and hide data labels on legend item hover, you should use mouseover and mouseout events to change data labels properies.
Demo: https://jsfiddle.net/BlackLabel/t0cj2ykn/

If you have any further questions about this specific subject, please continue the discussion in the related topic that you created:
viewtopic.php?f=14&t=47977

Questions related to spider web / polar you can ask here.

Regards!

Re: Spider web Chart/ Polar chart

Posted: Tue Jan 11, 2022 2:39 pm
by anu_1555
Thanks, I have one more question , I am trying to fill the color inside the spider charts of same series color on hover of chart and on hover of the legends. It did work but I am trying to fill the color with less opacity of series color .Can you help on this please. thanks

here is the fiddle link : https://jsfiddle.net/jns1e0qt/2/

Re: Spider web Chart/ Polar chart

Posted: Wed Jan 12, 2022 12:23 pm
by mateusz.b
Hi anu_1555,

Two options here:
- use alpha channel to add opacity directly to the color:
https://jsfiddle.net/BlackLabel/956L7hvx/

- set opacity option:
https://jsfiddle.net/BlackLabel/hLv0gkd2/

Let me know if that was what you were looking for!
Regards!

Re: Spider web Chart/ Polar chart

Posted: Wed Jan 12, 2022 12:29 pm
by anu_1555
I was actually looking if fillOpacity is possible or not. Nonetheless, I have found solution and Appreciate your support, Great ,Thanks!

Re: Spider web Chart/ Polar chart

Posted: Wed Jan 12, 2022 12:34 pm
by mateusz.b
You're welcome. As always, feel free to ask any further questions.

Regards!