Reputation: 43
I want to plot symmetrical multi-level pie chart. Refer the organizational hierarchy example: Here
I tried the following http://jsfiddle.net/amrutaJgtp/7r8eb5ms/7/
series: [{
type: "sunburst",
data: [{
id: '0.0'
}, {
id: '1.0',
parent: '0.0',
name: 'Consumer',
color: colors[1]
}, {
parent: '1.0',
name: 'Furniture',
value: 1
}, {
parent: '1.0',
name: 'Office Supplies',
value: 1
}, {
parent: '1.0',
name: 'Technology',
value: 1
}, {
id: '2.0',
name: 'Corporate',
parent: '0.0',
color: colors[2]
}, {
parent: '2.0',
name: 'Furniture',
value: 1
}, {
parent: '2.0',
name: 'Office Supplies',
value: 1
}, {
parent: '2.0',
name: 'Technology',
value: 1
}, {
id: '3.0',
name: 'Home office',
parent: '0.0',
color: colors[3]
}, {
parent: '3.0',
name: 'Furniture',
value: 1
}, {
parent: '3.0',
name: 'Office Supplies',
value: 1
}, {
parent: '3.0',
name: 'Technology',
value: 1
}, {
id: '4.0',
name: 'Small Business',
parent: '0.0',
color: colors[4]
}, {
parent: '4.0',
name: 'Office Supplies'
}, {
parent: '4.0',
name: 'Technology'
}],
Observe the category "Small Business" is not seen.
When i don't define any of the data values, sunburst chart is not plotted. I want that all categories are seen symmetrical in size.
Is there any way to achieve symmetrical multi-level pie using Highcharts sunburst chart?
Upvotes: 0
Views: 2405
Reputation: 5803
Based on what is wanted there is a variety of options. Here are four possible options, and their corresponding fiddles:
3 of these have an added parameter per point:
tooltipIncluded: false
That controlls the tooltip using this formatter:
tooltip: {
formatter: function() {
if (this.point.tooltipIncluded) {
return 'The population of <b>' + this.point.name + '</b> is <b>' + this.point.value + '</b>';
} else {
return false;
}
}
}
Upvotes: 4