Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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

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

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
    border: 1px solid silver;
}

#csv {
	display: none;
}

JavaScript

(function (H) {

    /**
     * @todo
     * - Handle options for nodes. This can be added as special point items that
     *   have a flag, isNode, or type: 'node'. It would allow setting specific
     *   color, className etc. Then these options must be linked by id and used
     *   when generating the node items.
     * - Dynamics (Point.update, setData, addPoint etc).
     * - From and to can be null when links enter or exit the diagram.
     * - Separate data label and tooltip point formatters for nodes vs links? A
     *   possible pattern would be to add a point.type, and automate the
     *   implementation of formatters through the type, for example nodeFormat
     *   or tooltip.linkFormat. This could be reused for other series types,
     *   even generic like point.format = 'null' => tooltip.nullFormat.
     */

    var defined = H.defined,
        each = H.each;


    H.seriesType('sankey', 'column', {
        colorByPoint: true,
        dataLabels: {
            enabled: true,
            backgroundColor: 'none', // enable padding
            crop: false,
            formatter: function () {
                return this.point.isNode && this.point.id;
                // Include data labels for the links like this:
                // return this.point.isNode ? this.point.id : this.point.weight;
            },
            inside: true
        },
        linkOpacity: 0.5,
        nodeWidth: 20,
        nodePadding: 10,
        showInLegend: false,
        states: {
            hover: {
                linkOpacity: 1
            }
        },
        tooltip: {
            followPointer: true,
            headerFormat:
                '<span style="font-size: 0.85em">{series.name}</span><br/>',
            pointFormatter: function () {
                if (this.isNode) {
                    return this.id + ': ' + this.sum();
                }
                return this.from + ' \u2192 ' + this.to +
                    ': <b>' + this.weight + '</b>';
    ...