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
]
}
]
}