Change node corner radius?

[fesvieira]

Hello, is it possible to change nodes corner radius?

[fesvieira]

I was able to do that intercepting _drawNodes. It also allows other customizations :)

export function validateSizeValue(size: any): "min" | "max" {
  if (!size || ["min", "max"].indexOf(size) === -1) {
    return "max";
  }
  return size;
}

(SankeyController as any).prototype._drawNodes = function () {
  const ctx = this.chart.ctx;
  const nodes = this._nodes || new Map();
  const { borderColor, borderWidth = 0, nodeWidth = 10, size } = this.options;
  const sizeMethod = validateSizeValue(size);
  const { xScale, yScale } = this._cachedMeta;

  ctx.save();
  if (borderColor && borderWidth) {
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;
  }

  for (const node of nodes.values()) {
    ctx.fillStyle = node.color ?? "black";
    const x = xScale!.getPixelForValue(node.x);
    const y = yScale!.getPixelForValue(node.y);

    const max = Math[sizeMethod](node.in || node.out, node.out || node.in);
    const height = Math.abs(yScale!.getPixelForValue(node.y + max) - y);

    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + nodeWidth - r, y);
    ctx.quadraticCurveTo(x + nodeWidth, y, x + nodeWidth, y + r);
    ctx.lineTo(x + nodeWidth, y + height - r);
    ctx.quadraticCurveTo(
      x + nodeWidth,
      y + height,
      x + nodeWidth - r,
      y + height
    );
    ctx.lineTo(x + r, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
    ctx.lineTo(x, y + r);
    ctx.quadraticCurveTo(x, y, x + r, y);
    ctx.closePath();

    ctx.fill();
    if (borderWidth) {
      ctx.stroke();
    }
  }
  ctx.restore();
};

ChartJS.register(SankeyController, Flow);