Treegraph chart

author(s): Pawel Lysy

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/non-cartesian-zoom.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {
        zooming: {
            type: 'xy'
        },
        panning: {
            enabled: true,
            type: 'xy'
        },
        panKey: 'shift'
    },
    title: {
        text: 'Treegraph: Different type of links'
    },
    series: [
        {
            marker: {
                radius: 30
            },
            link: {
                type: 'straight'
            },
            type: 'treegraph',
            keys: ['id', 'parent', 'link.type'],
            data: [
                ['A'],
                ['B', 'A', 'curved'],
                ['C', 'B', 'default'],
                ['E', 'B'],
                ['D', 'A']
            ],
            dataLabels: {
                format: '{point.id}'
            }
        }
    ]
});