Spider web Chart/ Polar chart

[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

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

[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!

[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

[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!

[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

[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!

[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

[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!

[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/

[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!

[anu_1555]

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

[mateusz.b]

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

Regards!