anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Spider web Chart/ Polar chart

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
Attachments
spider_chart.PNG
spider_chart.PNG (18.04 KiB) Viewed 2400 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

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!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

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
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

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!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

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
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

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!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

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
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

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!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

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/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

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!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

I was actually looking if fillOpacity is possible or not. Nonetheless, I have found solution and Appreciate your support, Great ,Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

You're welcome. As always, feel free to ask any further questions.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”