Ams
Ams

Reputation: 43

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

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

Answers (1)

ewolden
ewolden

Reputation: 5803

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

Fiddle 1: http://jsfiddle.net/7r8eb5ms/9/

Fiddle 2: http://jsfiddle.net/65ysr826/

Fiddle 3: http://jsfiddle.net/fpysybhe/

Fiddle 4: http://jsfiddle.net/nab8xu33/

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

Related Questions