CODEWITHSUNDEEP
highcharts
Mark Harrison
Mark Harrison

Reputation: 121

Network diagram meets Sankey chart

Is there a way, in Highcharts, to create a network diagram where the connections are of width proportional to a data series (like a Sankey diagram?)

The application is a "traffic flow" visualisation (but between logical points, not physical ones, so overlaid onto a network diagram rather than a map.)

Upvotes: 0

Views: 89

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

This is not supported by default, but you can easily get the wanted result by a small modification of getLinkAttribues method:

H.seriesTypes.networkgraph.prototype.pointClass.prototype.getLinkAttribues = function() {
    var linkOptions = this.series.options.link,
        maxValue,
        pointOptions = this.options;

    if (!this.linkWidth) {
        this.series.points.forEach(function(p) {
            maxValue = maxValue ?
                Math.max(maxValue, p.options.value) :
                p.options.value;
        });

        this.series.points.forEach(function(p) {
            p.linkWidth = p.options.value * 10 / maxValue;
        });
    }

    return {
        'stroke-width': this.linkWidth || 1,
        stroke: pointOptions.color || linkOptions.color,
        dashstyle: pointOptions.dashStyle || linkOptions.dashStyle
    };
}

Live demo: https://jsfiddle.net/BlackLabel/13zt8qds/

Docs: https://www.highcharts.com/docs/extending-highcharts

Upvotes: 1

Related Questions