heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Legend with alternate background with values!

Hi team, I could render a donut with legend placed vertically. But I need an alternate background for these vertically aligned legend items along with respective values for each legend. Please check this image for what I want to achieve.
donut.png
donut.png (17.3 KiB) Viewed 458 times
Also, please check this jsfiddle link where I have tried to demo it: https://jsfiddle.net/heerak205/h2xcept9/46/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Legend with alternate background with values!

Hi heerak2492!
I didn't notice this topic, before answering your older post, but I think it's not a problem.

I'm sorry but I think I'm missing something. Do you want to change the background color of the legend? If not could you please show a little bit more light on the matter to help me understand it?

Demo: https://jsfiddle.net/BlackLabel/j3fL5dpy/
API Reference: https://api.highcharts.com/highcharts/l ... roundColor

Regards!
Hubert Kozik
Highcharts Developer
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Legend with alternate background with values!

Hi, a common background for all the legend items can be seen in your demo. But what I require is to have an alternate background for each legend item. Also, along with this change, I require this.y values also on each respective legend. Please refer to the image:
donut.png
donut.png (25.48 KiB) Viewed 450 times
As you can see, the legend items have alternate light grey background along with the values: {cause1: 89, cause2: 25, cause3: 89, cause4: 25 etc...}
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Legend with alternate background with values!

heerak2492,
I am sorry, I didn't notice it earlier, because my monitor didn't show the colors on your image properly. So in your case, I suggest to build a legend item on your own, first hide existing symbols by using:

Code: Select all

legend: {
   symbolPadding: 0,
   symbolWidth: 0,
   symbolHeight: 0,
   squareSymbol: false,
}
Next, build a legend item by setting legend.useHTML to true and using labelsFormatter to return a proper HTML element with CSS styles, just like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/hwkc3L62/
API Reference: https://api.highcharts.com/highcharts/l ... lFormatter
https://api.highcharts.com/highcharts/legend.useHTML

Regards!
Hubert Kozik
Highcharts Developer
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Legend with alternate background with values!

Hi Hubert. Thanks for almost solving my case. What you are showing is by decreasing the opacity of the actual color and giving it as a background for each legend item. So, what I actually need is, every legend should have a bullet color matching the pie chart and also every other alternate legend item should have a light grey color exactly as in the picture:
donut.png
donut.png (25.48 KiB) Viewed 438 times
heerak2492
Posts: 37
Joined: Mon Dec 06, 2021 5:18 pm

Re: Legend with alternate background with values!

Hi Hubert, Please do not mind the above reply. So, each legend item has its respective colored circle right. How to increase the size of that. Please loom at this picture:
updatedDonut.png
updatedDonut.png (26.87 KiB) Viewed 437 times
You can look at the demo here: https://jsfiddle.net/heerak205/djgprmbc/24/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Legend with alternate background with values!

heerak2492,
You can control it by changing the font-size in proper HTML element:

Code: Select all

<span style="font-size: 30px; color: ${color}">•</span>
Demo: https://jsfiddle.net/BlackLabel/zfu8p41g/

Regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Legend with alternate background with values!

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”