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

Spider web Chart/ Polar chart

Sun Nov 28, 2021 8:57 am

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 186 times

mateusz.b
Posts: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Mon Nov 29, 2021 9:37 am

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: 16
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

Mon Nov 29, 2021 7:23 pm

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: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Mon Nov 29, 2021 9:40 pm

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: 16
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

Tue Nov 30, 2021 4:32 am

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: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Tue Nov 30, 2021 9:07 am

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: 16
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

Fri Jan 07, 2022 5:49 am

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: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Fri Jan 07, 2022 3:50 pm

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: 16
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

Tue Jan 11, 2022 2:39 pm

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: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Wed Jan 12, 2022 12:23 pm

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: 16
Joined: Sun Nov 28, 2021 8:45 am

Re: Spider web Chart/ Polar chart

Wed Jan 12, 2022 12:29 pm

I was actually looking if fillOpacity is possible or not. Nonetheless, I have found solution and Appreciate your support, Great ,Thanks!

mateusz.b
Posts: 1048
Joined: Tue Jul 13, 2021 11:34 am

Re: Spider web Chart/ Polar chart

Wed Jan 12, 2022 12:34 pm

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

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”