Highchart : sunburst chart not displaying

Question

I am trying to generate sunburst chart using Highchart. For reference i use the demo for the same from Highchart site

I modified the data according to my requirement but i guess i miss something because of that it's not working.

Here my jsfiddle

 data: [
            {
            'id': '0.0',
            'parent': '',
            'name': 'TCI'
            },            
        {
            'id': '1.2',
            'parent': '0.0',
            'name': 'CM'
        },
        {
            'id': '1.1',
            'parent': '0.0',
            'name': 'AS'
        },
                    {
            'id': '2.1',
            'parent': '1.1',
            'name': 'R&D',
            'value': 104
        },
        {
            'id': '2.5',
            'parent': '1.1',
            'name': 'AE',
            'value': 90
        },
        {
            'id': '2.3',
            'parent': '1.1',
            'name': 'Engineering Learning Center ',
            'value': 51
        },
        {
            'id': '2.2',
            'parent': '1.1',
            'name': 'Human Resources',
            'value': 51
        },
        {
            'id': '2.4',
            'parent': '1.1',
            'name': 'Accessories',
            'value': 43
        },
        {
            'id': '2.9',
            'parent': '1.2',
            'name': 'Accounts and Finance',
            'value': 30
        },
        {
            'id': '2.8',
            'parent': '1.2',
            'name': 'FO',
            'value': 56
        },
        {
            'id': '2.7',
            'parent': '1.2',
            'name': 'CD',
            'value': 129
        },
        {
            'id': '2.6',
            'parent': '1.2',
            'name': 'CA',
            'value': 109
        }
        ]

This is my data which i want to show on chart

I can anybody please help me on this.

Answer 1

You were not passing data correctly to container due to which it was not rendering.

Pass your data to var data like below instead of directly adding your data ie array of objects into chart dataset object:

var data = [{'id':'0.0','parent':'','name':'TCI'},{'id':'1.2','parent':'0.0','name':'CM'},{'id':'1.1','parent':'0.0','name':'AS'},{'id':'2.1','parent':'1.1','name':'R&D','value':104},{'id':'2.5','parent':'1.1','name':'AE','value':90},{'id':'2.3','parent':'1.1','name':'Engineering Learning Center ','value':51},{'id':'2.2','parent':'1.1','name':'Human Resources','value':51},{'id':'2.4','parent':'1.1','name':'Accessories','value':43},{'id':'2.9','parent':'1.2','name':'Accounts and Finance','value':30},{'id':'2.8','parent':'1.2','name':'FO','value':56},{'id':'2.7','parent':'1.2','name':'CD','value':129},{'id':'2.6','parent':'1.2','name':'CA','value':109}];

Below is working JSFIDDLE :

Working snippet below :

 var data = [{ 'id': '0.0', 'parent': '', 'name': 'TCI' }, { 'id': '1.2', 'parent': '0.0', 'name': 'CM' }, { 'id': '1.1', 'parent': '0.0', 'name': 'AS' }, { 'id': '2.1', 'parent': '1.1', 'name': 'R&D', 'value': 104 }, { 'id': '2.5', 'parent': '1.1', 'name': 'AE', 'value': 90 }, { 'id': '2.3', 'parent': '1.1', 'name': 'Engineering Learning Center ', 'value': 51 }, { 'id': '2.2', 'parent': '1.1', 'name': 'Human Resources', 'value': 51 }, { 'id': '2.4', 'parent': '1.1', 'name': 'Accessories', 'value': 43 }, { 'id': '2.9', 'parent': '1.2', 'name': 'Accounts and Finance', 'value': 30 }, { 'id': '2.8', 'parent': '1.2', 'name': 'FO', 'value': 56 }, { 'id': '2.7', 'parent': '1.2', 'name': 'CD', 'value': 129 }, { 'id': '2.6', 'parent': '1.2', 'name': 'CA', 'value': 109 } ]; // Splice in transparent for the center circle Highcharts.getOptions().colors.splice(0, 0, 'transparent'); Highcharts.chart('container', { chart: { height: '100%' }, title: { text: 'Demo' }, subtitle: { text: 'How to pass your data to sunburst chart' }, series: [{ type: "sunburst", data: data, allowDrillToNode: true, cursor: 'pointer', dataLabels: { format: '{point.name}', filter: { property: 'innerArcLength', operator: '>', value: 16 } }, levels: [{ level: 1, levelIsConstant: false, dataLabels: { filter: { property: 'outerArcLength', operator: '>', value: 64 } } }, { level: 2, colorByPoint: true }, { level: 3, colorVariation: { key: 'brightness', to: -0.5 } }, { level: 4, colorVariation: { key: 'brightness', to: 0.5 } } ] }], tooltip: { headerFormat: "", pointFormat: 'The value of <b>{point.name}</b> is <b>{point.value}</b>' } });

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

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

Answer 2

It is not correctly pointing the chart container

 let chartData = [{ 'id': '0.0', 'parent': '', 'name': 'TCI' }, { 'id': '1.2', 'parent': '0.0', 'name': 'CM' }, { 'id': '1.1', 'parent': '0.0', 'name': 'AS' }, { 'id': '2.1', 'parent': '1.1', 'name': 'R&D', 'value': 104 }, { 'id': '2.5', 'parent': '1.1', 'name': 'AE', 'value': 90 }, { 'id': '2.3', 'parent': '1.1', 'name': 'Engineering Learning Center ', 'value': 51 }, { 'id': '2.2', 'parent': '1.1', 'name': 'Human Resources', 'value': 51 }, { 'id': '2.4', 'parent': '1.1', 'name': 'Accessories', 'value': 43 }, { 'id': '2.9', 'parent': '1.2', 'name': 'Accounts and Finance', 'value': 30 }, { 'id': '2.8', 'parent': '1.2', 'name': 'FO', 'value': 56 }, { 'id': '2.7', 'parent': '1.2', 'name': 'CD', 'value': 129 }, { 'id': '2.6', 'parent': '1.2', 'name': 'CA', 'value': 109 } ]; Highcharts.getOptions().colors.splice(0, 0, 'transparent'); Highcharts.chart('container', { chart: { height: '100%' }, title: { text: 'Asset Distribution' }, series: [{ type: 'sunburst', data: chartData, allowDrillToNode: true, cursor: 'pointer', dataLabels: { format: '{point.name}', filter: { property: 'innerArcLength', operator: '>', value: 16 } }, levels: [{ level: 1, levelIsConstant: false, dataLabels: { filter: { property: 'outerArcLength', operator: '>', value: 64 } } }, { level: 2, colorByPoint: true }, { level: 3, colorVariation: { key: 'brightness', to: -0.5 } }, { level: 4, colorVariation: { key: 'brightness', to: 0.5 } } ] }], tooltip: { headerFormat: "", pointFormat: 'Asset Stock of <b>{point.name}</b> is <b>{point.value}</b>' } });

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