shachopin
Posts: 25
Joined: Thu Aug 18, 2022 6:09 pm

Highcharts pie chart legend items showing gradient colors which isn't desirable

Hello

We have a need to style the pie chart with a radial gradient fill to an extent that the outer circle looks very thin as shown in the demo
https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

The problem is that the legend item symbol is also styled the same way as the pie slice so that it becomes almost illegible. We'd like to see if there is a way to make the legend item symbol color solid fill (with no gradient fill), while still keeping the existing style of the main pie chart.

Thank you so much
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts pie chart legend items showing gradient colors which isn't desirable

Hello.

You can use the custom wrap to modify the default drawing legend item symbol with flat colour instead of a gradient.

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx
More about extending Highcharts: https://www.highcharts.com/docs/extendi ... highcharts

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
shachopin
Posts: 25
Joined: Thu Aug 18, 2022 6:09 pm

Re: Highcharts pie chart legend items showing gradient colors which isn't desirable

thanks, one issue is we also want to keep the symbol color to be grey out once legend is disabled like before (like click on it)
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts pie chart legend items showing gradient colors which isn't desirable

Hi,

Right, I didn't take that into account.

Using the series.pie.point.events.legendItemClick() callback function you can update the symbol color by checking if item is visible.

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx
API: https://api.highcharts.com/highcharts/s ... dItemClick

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
shachopin
Posts: 25
Joined: Thu Aug 18, 2022 6:09 pm

Re: Highcharts pie chart legend items showing gradient colors which isn't desirable

cool, thank you for your great info. But I have another follow-up question. Let's say we don't care about "legendItemClick" event. We cannot click it. But we want to disable the last legend item by default during the initial component rendering.

The way we did it was using useRef to grab the chart dom component and directly use dom api to setVisible(false). This way we can make the legend text greyed out, but we also want to do the same to grey out the legend symbol in this case. How can we achieve that? i. e how to programmatically grey out the legend symbol color directly using chart dom api?

Before, without using highchart extension, we were able to achieve this merely by using series[4].setVisible(false).

I commented with my above points in this demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Thanks a lot
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Highcharts pie chart legend items showing gradient colors which isn't desirable

Hi,

Sorry for a long time waiting for a reply, but I managed to find a solution that should match your problem.

Instead of overwriting the function Higcharts.seriesTypes.pie.drawLegendSymbol(), it is possible to overwrite the color after executing the Higcharts.Legend.colorizeItem() function if the point (item) is visible. It's a simple wrap, but it took a while to find the function in the code.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-26uriq

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”