highchartsorganizationdrilldown

Drilldown in a Highcharts Organization chart?


Hi is it possible to drilldown a highcharts organization chart?

If so, can anyone tell me what is wrong with this configuration?

https://jsfiddle.net/ogLy28tb/1/

I have loaded drilldown.js and blended the bar chart drilldown example with the org chart data and node setup but its not reacting.

Thank you

Highcharts.chart('container', {
    chart: {
        height:600,
        width:1300,
        inverted: true
    },
    title: {
        text: 'Highcharts Org Chart'
    },
    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var nodeName = point.toNode.name,
                    nodeId = point.toNode.id,
                    nodeDesc = nodeName === nodeId ? nodeName : nodeName + ', ' + nodeId,
                    parentDesc = point.fromNode.id;
                return point.index + '. ' + nodeDesc + ', reports to ' + parentDesc + '.';
            }
        }
    },
    series: [{
        type: 'organization',
        name: 'Highsoft',
       // keys: ['from', 'to','drilldown'],
        data: [
            {   
                from:'CO',
                to:'DIV01',
              drilldown:'DIV01'
            },
            {
                from:'CO',
              to:'DIV02',
              drilldown:'DIV02'
            },
            {
                from:'CO',
              to:'DIV03',
              drilldown:'DIV03'
            },
            {
                from:'CO',
              to:'DIV04',
              drilldown:'DIV04'
            },
            {
                from:'CO',
              to:'DIV05',
              drilldown:'DIV05'
            },
            {
                from:'CO',
              to:'DIV06',
              drilldown:'DIV06'
            }
        ],
        levels: [{
            level: 0,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 2,
            color: '#980104'
        }, {
            level: 4,
            color: '#359154'
        }],
        nodes: [
                {id:'DIV01', title:'Div Hd 1', name:'Div. 1',layout:'hanging'},
            {id:'DIV02', title:'Div Hd 2', name:'Div. 2',layout:'hanging'},
            {id:'DIV03', title:'Div Hd 3', name:'Div. 3',layout:'hanging'},
            {id:'DIV04', title:'Div Hd 4', name:'Div. 4',layout:'hanging'},
            {id:'DIV05', title:'Div Hd 5', name:'Div. 5',layout:'hanging'},
            {id:'DIV06', title:'Div Hd 6', name:'Div. 6',layout:'hanging'}
                ],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
                                },
        borderColor: 'white',
        nodeWidth: 120
    }],
    drilldown: {
        series: [
            {
                id: "DIV01",
                name: "DIV01",
                data: [
                      ['DIV01','DEP01']
                ],
                nodes: [
                    {id:'DEP01', title:'Dept Hd 1', name:'Dept. 1',layout:'hanging'}
                                ]
            },
            { 
                    name: "DIV02",
                id: "DIV02",
                data: [
                    ['DIV02','DEP02']
                ],
                 nodes: [
                    {id:'DEP02', title:'Dept Hd 2', name:'Dept. 2',layout:'hanging'}
                                ]
            },
            { 
                    name: "DIV03",
                id: "DIV03",
                data: [
                      ['DIV03','DEP03']
                ],
                 nodes: [
                    {id:'DEP03', title:'Dept Hd 3', name:'Dept. 3',layout:'hanging'}
                            ]
            },
            { 
                    name: "DIV04",
                id: "DIV04",
                data: [
                    ['DIV04','DEP04']
                ],
                 nodes: [
                    {id:'DEP04', title:'Dept Hd 4', name:'Dept. 4',layout:'hanging'}
                            ]
            },
            { 
                    name: "DIV05",
                id: "DIV05",
                data: [
                       ['DIV05','DEP05']
                ],
                 nodes: [
                    {id:'DEP05', title:'Dept Hd 5', name:'Dept. 5',layout:'hanging'}
                            ]
            },
            { 
                    name: "DIV06",
                id: "DIV06",
                data: [
                    ['DIV06','DEP06']
                ],
                 nodes: [
                    {id:'DEP06', title:'Dept Hd 6', name:'Dept. 6',layout:'hanging'}
                            ]
            }
        ]
    },
    tooltip: {
        outside: true
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }

});


Solution

  • According to the Highcharts blog entries, drilldown on organisation charts is not possible at this time. I have raised a feature request at GIT: https://github.com/highcharts/highcharts/issues/13711

    An alternative is to use an button fired event to load a data subset as illustrated here: https://jsfiddle.net/BlackLabel/orj8ayne/

    let chart = Highcharts.chart('container', {
      series: [{
        type: 'organization',
        keys: ['from', 'to'],
        data: [{
          from: 'A',
          to: 'B',
        }, {
          from: 'B',
          to: 'C',
        }]
      }],
    });
    
    document.getElementById("drill").addEventListener("click", function() {
      chart.series[0].update({
        data: [{
          from: 'D',
          to: 'E',
        }]
      });
    })