Highcharts Demo

author(s): Torstein Hønsi

by b_g_v

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 {
    min-width: 300px;
    max-width: 1200px;
    height: 400px;
    margin: 1em auto;
    border: 1px solid silver;
}

#csv {
	display: none;
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Title'
    },

    series: [{
    		colors: ["lightgrey"],
        keys: ['color', 'from', 'to', 'weight'],
        data: [
 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'C', 'weight': 0},
 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'D', 'weight': 0},

 {'color': 'rgb(255, 130, 130)', 'from': 'B', 'to': 'D', 'weight': 164},
 {'color': 'rgb(255, 207, 207)', 'from': 'G', 'to': 'C', 'weight': 123},
 {'color': 'rgb(255, 207, 207)', 'from': 'V', 'to': 'D', 'weight': 638},

 {'color': 'rgb(255, 127, 127)', 'from': 'C', 'to': 'A', 'weight': 0},
 {'color': 'rgb(255, 130, 130)', 'from': 'C', 'to': 'K', 'weight': 0},

 {'color': 'rgb(255, 127, 127)', 'from': 'C', 'to': 'A', 'weight': 105},
 {'color': 'rgb(255, 130, 130)', 'from': 'D', 'to': 'K', 'weight': 1313}
],
        type: 'sankey',
        name: 'Name here',
        nodeWidth:3
    }]

});