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

<div id="container"></div>
#container {
    min-width: 300px;
    max-width: 800px;
    margin: 1em auto;
}
Highcharts.chart('container', {

    chart: {
        height: 600,
        inverted: true
    },

    title: {
        text: null
    },

    series: [{
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: [
            ['HS', 'HC'],
            ['HS', 'HStck'],
            ['HS', 'HMaps'],
            ['HS', 'Gantt'],
            ['HS', 'Others'],

            ['Others', 'Mobile'],

            ['Others', 'Editor'],

            ['Others', 'Wrappers'],
            ['Others', 'Plugins'],

            ['Mobile', 'iOS'],
            ['Mobile', 'Android'],


            ['Wrappers', '.Net'],
            ['Wrappers', 'Angular'],
            ['Wrappers', 'React'],
            ['Wrappers', 'Vue'],
        ],
        levels: [{
            level: 0,
            color: '#AFE5F4',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 1,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 2,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 4,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }, {
            level: 5,
            color: 'silver',
            dataLabels: {
                color: 'black'
            },
            height: 25
        }],
        nodes: [{
            id: 'HS',
            title: null,
            name: 'Highsoft Products',
        }, {
            id: 'HC',
            title: null,
            name: 'Highcharts',
            color: '#74C88C',
            image: null,
            description: '<a href="https://www.highcharts.com/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highcharts/"  target="_blank">API</a>',
        }, {
            id: 'HStck',
            title: null,
            name: 'Highstock',
            color: '#518CC8',
            description: '<a href="https://www.highcharts.com/stock/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highstock/"  target="_blank">API</a>',
            image: null,
        }, {
            id: 'HMaps',
            useHTML: true,
            color: '#F49952',
            title: null,
            name: 'Highmaps',
            description: '<a href="https://www.highcharts.com/maps/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/highmaps/"  target="_blank">API</a>',
            image: null
        }, {
            id: 'Gantt',
            useHTML: true,
            color: '#DEDEEB',
            title: null,
            name: 'Gantt',
            description: '<a href="https://www.highcharts.com/gantt/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/gantt/?_ga=2.89761499.15679887.1557680985-1141631896.1538053723"  target="_blank">API</a>',
            image: null
        }, {
            id: 'Others',
            title: null,
            name: "Others",
            color: "#BEF4AF"

        }, {
            id: 'Mobile',
            title: null,
            name: 'Mobile',
            color: "#F4BEAF",
            image: null,
        }, {
            id: 'iOS',
            title: null,
            name: 'iOS',
            color: "#F4BEAF",
            description: '<a href="https://www.highcharts.com/ios/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/ios/highcharts/"  target="_blank">API</a>',
        }, {
            id: 'Android',
            title: null,
            name: 'Android',
            color: '#F4BEAF',
            description: '<a href="https://www.highcharts.com/android/demo"  target="_blank">Demos</a> <br/><a href="https://api.highcharts.com/android/highcharts/"  target="_blank">API</a>',
        }, {
            id: 'HCCloud',
            name: '<a href="https://cloud.highcharts.com/" target="_blank">Highcharts cloud</a>',
            color: '#F4E0AF',
            useHTML: true,
            description: '<a href="https://cloud.highcharts.com/docs/#/"  target="_blank">Documentation</a>',
        }, {
            id: 'Editor',
            name: 'Editor',
            color: '#E6F4AF',
            useHTML: true,
            description: '<a href="http://editor.highcharts.com/?_ga=2.80855383.15679887.1557680985-1141631896.1538053723" target="_blank">Demo</a><br/><a href="https://github.com/highcharts/highcharts-editor/wiki"  target="_blank">Documentation</a>',
        }, {
            id: 'Wrappers',
            title: null,
            name: 'Wrappers',
            color: "#AFE5F4",
            image: null
        }, {
            id: '.Net',
            name: '',
            color: '#AFE5F4',
            useHTML: true,
            description: '<a href="http://dotnet.highcharts.com/Highcharts/Demo?_ga=2.115051847.15679887.1557680985-1141631896.1538053723" target="_blank">Demo</a><br/><a href="http://dotnet.highcharts.com/Help/Highcharts/html/index.html?_ga=2.115051847.15679887.1557680985-1141631896.1538053723"  target="_blank">Documentation</a>',
        }, {
            id: 'Angular',
            name: 'Angular',
            color: '#AFE5F4',
            useHTML: true,
            description: '<a href="https://www.npmjs.com/package/highcharts-angular" target="_blank">Doc & Demo</a>',
        }, {
            id: 'React',
            name: 'React',
            color: '#AFE5F4',
            useHTML: true,
            description: '<a href="https://www.npmjs.com/package/highcharts-react-official" target="_blank">Doc & Demo</a>',
        }, {
            id: 'Vue',
            name: 'Vue',
            color: '#AFE5F4',
            useHTML: true,
            description: '<a href="https://www.npmjs.com/package/highcharts-vue" target="_blank">Doc & Demo</a>',
        }, {
            id: 'Plugins',
            name: 'Plugins',
            color: '#C2AFF4',
            useHTML: true,
            description: '<a href="https://www.highcharts.com/plugin-registry/" target="_blank">Plugin registry</a>',
        }],
        colorByPoint: false,
        color: '#007ad0',
        dataLabels: {
            color: 'white'
        },
        borderColor: 'white',
        nodeWidth: 65
    }],
    tooltip: {
        enabled: false
    },
    exporting: {
        allowHTML: true,
        sourceWidth: 800,
        sourceHeight: 600
    }

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.