francesco.lilli
Posts: 5
Joined: Thu Nov 25, 2021 12:56 pm

Sunburst chart, control single levels' opacity

Hi,

I would need to show a Sunburst chart where the first visible level has a certain color and the second level has the same color, but with opacity 0.5.
In the attached image the nodes on the first level should look as-is, but nodes on the second level should have applied opacity. I tried several approaches but I can't figure this out, can you help?

Code: Select all

{
   chart: {
      height: 100%,
   },
   ...
   series: [
      {
         type: 'sunburst',
	 ...
	 levels: [
            {
               // First level, should have opacity 1
               level: 1,
               levelSize: {
                  value: 1,
               },
               dataLabels: {
                  enabled: true,
              },
              colorByPoint: true,
           },
           {
              // Second level, should inherit the parent's color and have opacity 0.5
              level: 2,
              levelSize: {
                 value: 1,
              },
              dataLabels: {
                 enabled: true,
              },
              colorByPoint: false,
           }
           ... 
           // There are actually more levels here, and I always show only 2 levels each time. I will always need
           // to make sure that the first "visible" level has opacity=1 and second "visible" level has opacity 0.5
	]
     }
 ]
}
Attachments
Screen Shot 2022-06-29 at 8.37.51 AM.png
Screen Shot 2022-06-29 at 8.37.51 AM.png (35.68 KiB) Viewed 329 times
francesco.lilli
Posts: 5
Joined: Thu Nov 25, 2021 12:56 pm

Re: Sunburst chart, control single levels' opacity

Alternatively, is there a way to style that with CSS? The problem being that I don't know how many elements there are on the first level, and looking at the code being generated all <path> sections are pretty identical, it doesn't look like there's a way to distinguish between first and second level.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst chart, control single levels' opacity

Hello francesco.lilli!
We appreciate you reaching out to us!

Sadly, you cannot set the opacity to a specific level directly from API, but you can change the CSS of the point graphic on level 2. Please, check it in the demo below.

Demo: https://jsfiddle.net/BlackLabel/x7jkgnLu/
API Reference: https://api.highcharts.com/class-refere ... lement#css

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer
francesco.lilli
Posts: 5
Joined: Thu Nov 25, 2021 12:56 pm

Re: Sunburst chart, control single levels' opacity

Hey thanks!

What I ended up doing was a bit different actually, let me know if it makes sense. In the chart configuration, I've added a className attribute for each of the data node I wanted opaque:

Code: Select all

{
   chart: { ... },
   ...
   series: [
      {
         type: 'sunburst',
         ...
         
         data: [
            // This node should not be opaque
            {
               id: 'id1',
               name: 'Name 1',
               parent: '',
            },
            ...
            // This node should be opaque
            {
               id: 'id20',
               name: 'Name 20',
               parent: 'id1',
               className: 'opaque',
            },
            ...
            // This node should not be opaque
            {
               id: 'id99',
               name: 'Name 99',
               parent: 'id20',
               value: 578,
            },
         ]
         
      }
   ]
}   
And then added the class 'opaque' to my CSS accordingly.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Sunburst chart, control single levels' opacity

Hi there!
That's also a good idea to achieve this effect. You will have to add this class name to each point, but you will have more control, e.g. using multiple classes with different opacities.

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”