Sunburst chart - Single parent single child multiple grandchildren

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 600px;
  margin: 0 auto
}

JavaScript

var colors = Highcharts.getOptions().colors;
// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');


Highcharts.chart('container', {

  chart: {
    height: '100%'
  },

  title: {
    text: 'Customer Sales'
  },
  series: [{
    type: "sunburst",
     allowDrillToNode:true,
    data: [{
      id: '0.0'
    }, {
      id: '1.0',
      parent: '0.0',
      name: 'Consumer',
      color: colors[1]
    }, {
      parent: '1.0',
      name: 'Furniture',
      value: 147
    }, {
      parent: '1.0',
      name: 'Office Supplies',
      value: 1151
    }, {
      parent: '1.0',
      name: 'Technology',
      value: 1157
    }, {
      id: '2.0',
      name: 'Corporate',
      parent: '0.0',
      color: colors[2]
    }, {
      parent: '2.0',
      name: 'Furniture',
      value: 3366
    }, {
      parent: '2.0',
      name: 'Office Supplies',
      value: 905
    }, {
      parent: '2.0',
      name: 'Technology',
      value: 2531
    }, {
      id: '3.0',
      name: 'Home office',
      parent: '0.0',
      color: colors[3]
    }, {
      parent: '3.0',
      name: 'Furniture',
      value: 5438
    }, {
      parent: '3.0',
      name: 'Office Supplies',
      value: 840
    }, {
      parent: '3.0',
      name: 'Technology',
      value: 2753
    }, {
      id: '4.0',
      name: 'Small Business',
      parent: '0.0',
      color: colors[4]
    }, {
      id: '4.1',
      parent: '4.0',
      name: 'Technology',
      value: 15261
    }, {
      parent: '4.1',
      name: 'a',
      value: 15261
    }, {
      parent: '4.1',
      name: 'b',
      value: 15361
    }, {
      parent: '4.1',
      name: 'c',
      value: 15461
    }],
    //allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
      /**
       * A custom formatter that returns the name only if the inner arc
       * is longer than a certain pixel size, so the shape has place for
       * the label.
       */
      formatter:...