Sankey: display nodes without links

[augnustin]

Description of the feature

On my current project we use the sankey chart quite extensively. It works pretty well for our use case, with a 2 columns layout as source nodes are different from target nodes:

We have cases where there are nodes on any side that don't have any link connected to it. The default highcharts behavior is not to display those nodes, and that's not what we expect.

I would suggest to add an option to choose whether to display those nodes or not, especially if the column attribute is displayed.

Library related to the feature

Highcharts

Proof of Concept/Live example for the feature

I asked the question on SO, and got a reply from the highcharts support, to add this snippet:

  Highcharts.wrap(Highcharts.seriesTypes.sankey.prototype, 'translateNode', function (proceed, node, column) {
    const translationFactor = this.translationFactor;
    const chart = this.chart;
    const options = this.options;
    const sum = node.getSum();
    const nodeHeight = Math.max(Math.round(sum * translationFactor), this.options.minLinkWidth);
    const nodeWidth = Math.round(this.nodeWidth);
    const crisp = (Math.round(options.borderWidth) % 2) / 2;
    const nodeOffset = column.sankeyColumn.offset(node, translationFactor);
    const fromNodeTop =
      Math.floor(
        Highcharts.pick(nodeOffset.absoluteTop, column.sankeyColumn.top(translationFactor) + nodeOffset.relativeTop)
      ) + crisp;
    const left =
      Math.floor(this.colDistance * node.column + options.borderWidth / 2) +
      Highcharts.relativeLength(node.options.offsetHorizontal || 0, nodeWidth) +
      crisp;
    const nodeLeft = chart.inverted ? chart.plotSizeX - left : left;
    node.sum = sum;

    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    // Draw the node
    node.shapeType = 'rect';

    node.nodeX = nodeLeft;
    node.nodeY = fromNodeTop;

    let x = nodeLeft;
    let y = fromNodeTop;
    let width = node.options.width || options.width || nodeWidth;
    let height = Math.max(node.options.height || options.height || nodeHeight, options.minNodeHeight || 0);

    if (chart.inverted) {
      x = nodeLeft - nodeWidth;
      y = chart.plotSizeY - fromNodeTop - nodeHeight;
      width = node.options.height || options.height || nodeWidth;
      height = node.options.width || options.width || nodeHeight;
    }

    // Calculate data label options for the point
    node.dlOptions = getDLOptions({
      level: this.mapOptionsToLevel[node.level],
      optionsPoint: node.options,
    });

    // Pass test in drawPoints
    node.plotX = 1;
    node.plotY = 1;

    // Set the anchor position for tooltips
    node.tooltipPos = chart.inverted
      ? [chart.plotSizeY - y - height / 2, chart.plotSizeX - x - width / 2]
      : [x + width / 2, y + height / 2];

    node.shapeArgs = {
      x,
      y,
      width,
      height,
      display: node.hasShape() ? '' : 'none',
    };
  });

It works pretty well (as visible on the screenshot) when it is only 1 node missing, otherwise it breaks. So instead of having a hacky solution, it would be more robust to have this option available natively.

---

You can vote for this feature by adding a thumbs-up reaction to this post.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!