Highcharts Demo

author(s): Torstein Hønsi

by Kriem

HTML

<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/exporting.js"></script>

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

CSS

#container {
    width: 100%;
    min-height: 600px;
    height: 100%;
    margin: 2em auto;
    border: none;
}

#csv {
	display: none;
}

JavaScript

if (!Highcharts.theme) {
  Highcharts.setOptions({
    chart: {
      /* inverted: true, */
      backgroundColor: 'white'
    },
    colors: ['#00aaff'],
    title: {
      style: {
        color: 'white'
      }
    },
    tooltip: {
      style: {
        color: '#22222'
      }
    }
  });
}

Highcharts.chart('container', {

    title: {
        text: '',
      style: {
        color: 'white'
      }
    },
    series: [{
        dataLabels: {
                enabled: true,
                borderWidth: 1,
                className: 'sankey-label'
        },
        nodeWidth: "48px",
        keys: ['from', 'to', 'weight'],
        data: [
            ['MAIN METER', 'sub 1', 11],
            ['MAIN METER', 'sub 2', 6],
            ['MAIN METER', 'sub 3', 5],
            ['MAIN METER', 'sub 4', 2],
            ['MAIN METER', 'sub 5', 1],
            ['sub 1', 'subsub a', 6],
            ['sub 1', 'subsub b', 3],
            ['sub 1', 'subsub c', 1],
            ['sub 1', 'subsub d', 1],
            ['sub 2', 'subsub 3', 3],
            ['sub 2', 'subsub 4', 2],
            ['sub 2', 'subsub 5', 1],
            ['sub 3', 'subsub 6', 3],
            ['sub 3', 'subsub 7', 2],
            ['sub 4', 'subsub 8', 2],
        ],
        type: 'sankey'
    }]
});