Highcharts: Is it possible to plot sunburst chart with no data values?

Question

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?

@ewolden Setting value:1 does not show everything symmetrical. JS fiddle : jsfiddle.net/amrutaJgtp/7r8eb5ms/8 Here small business has comparitively smaller section, i wanted the 4 sections to be symmetric, each having 25% area. Refer the organizational hierarchy example, i want to achieve similar symmetrical sections when data contains only categories. Setting the same value is just a way that i tried. Actually i want to plot sunburst with symmetrical sections showing simply the hierarchy of levels without any numerical measure. — Ams
@ewolden Yes your first 2 JS fiddles show symmetric sections in sunburst correctly. However here jsfiddle.net/7r8eb5ms/11, "Small business" still has smaller section comparitively. — Ams
Also i am not sure how it will work when the number of child nodes are different for the categories. Currently in the example it was assumed that all categories are with 3 child nodes, so you added a node with empty name for "Small Business" category that had 2 nodes. To generalize, does that mean, i need to find the maximum number of child nodes from all the categories and accordingly add nodes for categories wherever needed? — Ams
@ewolden Okay yes. This is what i was looking for. Child nodes wont be symmetric since their number may vary. But all the sections are evenly spaced and symmetrical amongst themselves. Thanks alot! — Ams
If you want nodes from the first level to be equal, the value sum of their children must be equal. For example Consumer node has three children, each has value 1, so Small Business with two children has to have value 3 (e.g. each child's value must be equal 1.5). Example: jsfiddle.net/cs8tag94. — pawel_d

ewolden ewolden · Accepted Answer · 2017-10-16T13:43:04

Based on what is wanted there is a variety of options. Here are four possible options, and their corresponding fiddles:

Fiddle 1:

Fiddle 2:

Fiddle 3:

Fiddle 4:

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

Highcharts: Is it possible to plot sunburst chart with no data values?

1 Answers