chartjs-chart-sankey 0.14.3 → 0.15.0

package/dist/chartjs-chart-sankey.esm.js

@@ -1,10 +1,10 @@
 /*!
- * chartjs-chart-sankey v0.14.3
+ * chartjs-chart-sankey v0.15.0
  * https://chartjs-chart-sankey.pages.dev/
  * (c) 2026 Jukka Kurkela
  * Released under the MIT license
  */
-import { DatasetController, Element } from 'chart.js';
+import { DatasetController, Chart, Element } from 'chart.js';
 import { toFont, valueOrDefault, getHoverColor, color } from 'chart.js/helpers';
 
 const defined = (x)=>x !== undefined;
@@ -36,6 +36,99 @@ function validateSizeValue(size) {
     return size;
 }
 
+function isPatternOrGradient(value) {
+    const type = Object.prototype.toString.call(value);
+    return type === '[object CanvasPattern]' || type === '[object CanvasGradient]';
+}
+function resolveNodeLabelOption(option, node) {
+    if (typeof option === 'function') {
+        return option(node);
+    }
+    if (option && typeof option === 'object' && !isPatternOrGradient(option)) {
+        return option[node.key];
+    }
+    return option;
+}
+function addRoundedRectPath(ctx, x, y, width, height, radius) {
+    const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - 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();
+}
+function resolvePosition(position, autoPosition) {
+    return position === 'auto' ? autoPosition : position;
+}
+function getTextPosition(position, options, totalTextHeight) {
+    const { borderWidth, height, padding, width, x, y } = options;
+    const text = {
+        align: 'center',
+        x: x + width / 2,
+        y: y + height / 2
+    };
+    if (position === 'left') {
+        text.align = 'right';
+        text.x = x - borderWidth - padding;
+    } else if (position === 'right') {
+        text.align = 'left';
+        text.x = x + width + borderWidth + padding;
+    } else if (position === 'top') {
+        text.y = y - padding - totalTextHeight / 2;
+    } else if (position === 'bottom') {
+        text.y = y + height + padding + totalTextHeight / 2;
+    }
+    return text;
+}
+function getBackgroundX(textAlign, textX, textWidth, backgroundWidth, padding) {
+    if (textAlign === 'left') return textX - padding;
+    if (textAlign === 'right') return textX - textWidth - padding;
+    return textX - backgroundWidth / 2;
+}
+function drawBackground(ctx, color, x, y, width, height, borderRadius) {
+    ctx.save();
+    ctx.fillStyle = color;
+    if (borderRadius > 0) {
+        addRoundedRectPath(ctx, x, y, width, height, borderRadius);
+        ctx.fill();
+    } else {
+        ctx.fillRect(x, y, width, height);
+    }
+    ctx.restore();
+}
+function drawLabel(ctx, label, options) {
+    const lines = toTextLines(label);
+    if (!lines.length) return;
+    const { backgroundColor, borderRadius, color, font, lineOffset, padding } = options;
+    const position = resolvePosition(options.position, options.autoPosition);
+    const textHeight = Number(font.lineHeight);
+    ctx.font = font.string;
+    const textWidth = Math.max(...lines.map((line)=>ctx.measureText(line).width));
+    const totalTextHeight = textHeight * lines.length;
+    const text = getTextPosition(position, options, totalTextHeight);
+    ctx.textAlign = text.align;
+    ctx.textBaseline = 'middle';
+    const backgroundWidth = textWidth + padding * 2;
+    const backgroundHeight = totalTextHeight + padding * 2;
+    const backgroundX = getBackgroundX(text.align, text.x, textWidth, backgroundWidth, padding);
+    const firstLineY = lines.length === 1 ? text.y : text.y - totalTextHeight / 2 + lineOffset;
+    const textCenterY = firstLineY + (lines.length - 1) * textHeight / 2;
+    const backgroundY = textCenterY - backgroundHeight / 2;
+    if (backgroundColor !== undefined) {
+        drawBackground(ctx, backgroundColor, backgroundX, backgroundY, backgroundWidth, backgroundHeight, borderRadius);
+    }
+    ctx.fillStyle = color;
+    for(let i = 0; i < lines.length; i++){
+        ctx.fillText(lines[i], text.x, firstLineY + i * textHeight);
+    }
+}
+
 const flowSort = (a, b)=>{
     if (b.flow === a.flow) return a.index - b.index;
     return b.flow - a.flow;
@@ -123,6 +216,12 @@ function buildNodesFromData(data, { size, priority, column }) {
 }
 
 const SMALL_VALUE = 1e-6;
+function nodeX$1(node) {
+    return node.x ?? 0;
+}
+function nodeY$1(node) {
+    return node.y ?? 0;
+}
  const getAllKeysForward = (nodes, visited = new Set())=>{
     const keys = [];
     for (const node of nodes){
@@ -180,7 +279,7 @@ function calculateX(nodeMap, data, mode) {
             x++;
         }
     }
-    const maxX = allNodes.reduce((max, node)=>Math.max(max, node.x), 0);
+    const maxX = allNodes.reduce((max, node)=>Math.max(max, nodeX$1(node)), 0);
     if (mode === 'edge') {
         const from = new Set(data.map((dataPoint)=>dataPoint.from));
         allKeys.filter((key)=>!from.has(key)).forEach((key)=>{
@@ -220,20 +319,26 @@ function processFrom(node, y) {
         }
         y = Math.max(n.y + n.out, y);
     }
-    return node.y + node.size;
+    return nodeY$1(node) + node.size;
 }
+const returnsToNearerColumn = (current, next)=>Boolean(next && nodeX$1(next) < nodeX$1(current));
 function processTo(node, y) {
     if (!node.to.length) return y;
     node.to.sort(flowByNodeCount('to'));
-    for (const flow of node.to){
+    for(let i = 0; i < node.to.length; i++){
+        const flow = node.to[i];
         const n = flow.node;
         if (!defined(n.y)) {
             n.y = y;
             processTo(n, y ? y + SMALL_VALUE : 0);
         }
-        y = Math.max(n.y + Math.max(n.in, n.out), y);
+        if (returnsToNearerColumn(n, node.to[i + 1]?.node)) {
+            y += flow.flow;
+        } else {
+            y = Math.max(n.y + Math.max(n.in, n.out), y);
+        }
     }
-    return node.y + node.size;
+    return nodeY$1(node) + node.size;
 }
 function setOrGetY(node, value) {
     if (defined(node.y)) {
@@ -247,9 +352,9 @@ function processRest(nodeArray, maxX) {
     const rightNodes = nodeArray.filter((node)=>node.x === maxX);
     const leftToDo = leftNodes.filter((node)=>!defined(node.y));
     const rightToDo = rightNodes.filter((node)=>!defined(node.y));
-    const centerToDo = nodeArray.filter((node)=>node.x > 0 && node.x < maxX && !defined(node.y));
-    let leftY = leftNodes.reduce((acc, cur)=>Math.max(acc, cur.y + cur.out || 0), 0) + SMALL_VALUE;
-    let rightY = rightNodes.reduce((acc, cur)=>Math.max(acc, cur.y + cur.in || 0), 0) + SMALL_VALUE;
+    const centerToDo = nodeArray.filter((node)=>nodeX$1(node) > 0 && nodeX$1(node) < maxX && !defined(node.y));
+    let leftY = leftNodes.reduce((acc, cur)=>Math.max(acc, nodeY$1(cur) + cur.out || 0), 0) + SMALL_VALUE;
+    let rightY = rightNodes.reduce((acc, cur)=>Math.max(acc, nodeY$1(cur) + cur.in || 0), 0) + SMALL_VALUE;
     let centerY = 0;
     if (leftY >= rightY) {
         leftToDo.forEach((node)=>{
@@ -270,7 +375,7 @@ function processRest(nodeArray, maxX) {
         });
     }
     centerToDo.forEach((node)=>{
-        let y = nodeArray.filter((n)=>n.x === node.x && defined(n.y)).reduce((acc, cur)=>Math.max(acc, cur.y + Math.max(cur.in, cur.out)), 0);
+        let y = nodeArray.filter((n)=>nodeX$1(n) === nodeX$1(node) && defined(n.y)).reduce((acc, cur)=>Math.max(acc, nodeY$1(cur) + Math.max(cur.in, cur.out)), 0);
         y = setOrGetY(node, y);
         y = Math.max(y + node.in, processFrom(node, y));
         y = Math.max(y + node.out, processTo(node, y));
@@ -281,25 +386,29 @@ function processRest(nodeArray, maxX) {
 const fixTop = (nodeArray, maxX)=>{
     let maxY = 0;
     for(let x = 0; x <= maxX; x++){
-        const nodes = nodeArray.filter((n)=>n.x === x).sort((a, b)=>a.y - b.y);
+        const nodes = nodeArray.filter((n)=>nodeX$1(n) === x).sort((a, b)=>nodeY$1(a) - nodeY$1(b));
         let minY = 0;
         for (const node of nodes){
-            if (node.y < minY) node.y = minY;
-            minY = node.y + node.size;
+            if (nodeY$1(node) < minY) node.y = minY;
+            minY = nodeY$1(node) + node.size;
         }
         maxY = Math.max(maxY, minY);
     }
     return maxY;
 };
 const findStartNode = (nodeArray, maxX)=>{
-    const size = [
+    const sorted = [
         ...nodeArray
-    ].sort((a, b)=>a.size - b.size).pop().size;
+    ].sort((a, b)=>a.size - b.size);
+    const largest = sorted[sorted.length - 1];
+    const size = largest.size;
     const biggest = nodeArray.filter((n)=>n.size === size);
-    if (biggest.length === 1) return biggest[0];
-    biggest.sort((a, b)=>a.x - b.x);
-    if (biggest[0].x === 0) return biggest[0];
-    if (biggest[biggest.length - 1].x === maxX) return biggest.pop();
+    const first = biggest[0];
+    if (biggest.length === 1) return first;
+    biggest.sort((a, b)=>nodeX$1(a) - nodeX$1(b));
+    if (nodeX$1(first) === 0) return first;
+    const last = biggest[biggest.length - 1];
+    if (nodeX$1(last) === maxX) return last;
     const mid = Math.floor(biggest.length / 2);
     return biggest[mid];
 };
@@ -317,8 +426,11 @@ function calculateYUsingPriority(nodeArray, maxX) {
     let nextYStart = 0;
     for(let x = 0; x <= maxX; x++){
         let y = nextYStart;
-        const nodes = nodeArray.filter((node)=>node.x === x).sort((a, b)=>(a.priority ?? 0) - (b.priority ?? 0));
-        nextYStart = nodes.length ? nodes[0].to.filter((to)=>to.node.x > x + 1).reduce((acc, cur)=>acc + cur.flow, 0) || 0 : 0;
+        const nodes = nodeArray.filter((node)=>nodeX$1(node) === x).sort((a, b)=>(a.priority ?? 0) - (b.priority ?? 0));
+        if (nodes.length) {
+            const nextX = nodeArray.reduce((next, node)=>nodeX$1(node) > x ? Math.min(next, nodeX$1(node)) : next, Infinity);
+            nextYStart = nodes[0].to.filter((to)=>nodeX$1(to.node) > nextX).reduce((acc, cur)=>acc + cur.flow, 0) || 0;
+        }
         for (const node of nodes){
             node.y = y;
             y += Math.max(node.out, node.in);
@@ -328,9 +440,9 @@ function calculateYUsingPriority(nodeArray, maxX) {
     return maxY;
 }
 const nodeByXYSize = (a, b)=>{
-    if (a.x !== b.x) return a.x - b.x;
-    if (a.y === b.y) return a.size - b.size;
-    return a.y - b.y;
+    if (nodeX$1(a) !== nodeX$1(b)) return nodeX$1(a) - nodeX$1(b);
+    if (nodeY$1(a) === nodeY$1(b)) return a.size - b.size;
+    return nodeY$1(a) - nodeY$1(b);
 };
  function addPadding(nodeArray, padding) {
     let maxY = 0;
@@ -338,31 +450,33 @@ const nodeByXYSize = (a, b)=>{
     const grid = [];
     const getColIndex = (x)=>{
         if (!columnXs.has(x)) {
-            columnXs.set(x, grid.length);
+            const index = grid.length;
+            columnXs.set(x, index);
             grid.push([]);
+            return index;
         }
-        return columnXs.get(x);
+        return columnXs.get(x) ?? 0;
     };
     nodeArray.sort(nodeByXYSize);
     for (const node of nodeArray){
-        const colIdx = getColIndex(node.x);
-        const column = grid[colIdx];
-        if (node.y) {
-            column.push(node.y);
+        const colIdx = getColIndex(nodeX$1(node));
+        const column = grid[colIdx] ?? [];
+        if (nodeY$1(node)) {
+            column.push(nodeY$1(node));
             let paddings = column.length;
             if (node.in) {
                 for(let col = 0; col < colIdx; col++){
-                    const otherColumn = grid[col];
+                    const otherColumn = grid[col] ?? [];
                     for(let row = 0; row < otherColumn.length; row++){
-                        if (otherColumn[row] > node.y) break;
+                        if (otherColumn[row] > nodeY$1(node)) break;
                         paddings = Math.max(row + 1, paddings);
                     }
                 }
-                while(column.length < paddings)column.push(node.y);
+                while(column.length < paddings)column.push(nodeY$1(node));
             }
-            node.y += paddings * padding;
+            node.y = nodeY$1(node) + paddings * padding;
         }
-        maxY = Math.max(maxY, node.y + Math.max(node.in, node.out));
+        maxY = Math.max(maxY, nodeY$1(node) + Math.max(node.in, node.out));
     }
     return maxY;
 }
@@ -373,7 +487,7 @@ function sortFlows(nodeArray) {
         const overlapTo = nodeSize < node.out;
         let addY = 0;
         let len = node.from.length;
-        node.from.sort((a, b)=>a.node.y + a.node.out / 2 - (b.node.y + b.node.out / 2)).forEach((flow, idx)=>{
+        node.from.sort((a, b)=>nodeY$1(a.node) + a.node.out / 2 - (nodeY$1(b.node) + b.node.out / 2)).forEach((flow, idx)=>{
             if (overlapFrom) {
                 flow.addY = idx * (nodeSize - flow.flow) / (len - 1);
             } else {
@@ -383,7 +497,7 @@ function sortFlows(nodeArray) {
         });
         addY = 0;
         len = node.to.length;
-        node.to.sort((a, b)=>a.node.y + a.node.in / 2 - (b.node.y + b.node.in / 2)).forEach((flow, idx)=>{
+        node.to.sort((a, b)=>nodeY$1(a.node) + a.node.in / 2 - (nodeY$1(b.node) + b.node.in / 2)).forEach((flow, idx)=>{
             if (overlapTo) {
                 flow.addY = idx * (nodeSize - flow.flow) / (len - 1);
             } else {
@@ -397,7 +511,7 @@ function layout(nodes, data, { priority, height, nodePadding, modeX }) {
     const nodeArray = [
         ...nodes.values()
     ];
-    const maxX = calculateX(nodes, data, modeX);
+    const maxX = calculateX(nodes, data, modeX ?? 'edge');
     const maxY = priority ? calculateYUsingPriority(nodeArray, maxX) : calculateY(nodeArray, maxX);
     const padding = maxY / height * nodePadding;
     const maxYWithPadding = addPadding(nodeArray, padding);
@@ -408,6 +522,21 @@ function layout(nodes, data, { priority, height, nodePadding, modeX }) {
     };
 }
 
+function nodeX(node) {
+    return node.x ?? 0;
+}
+function nodeY(node) {
+    return node.y ?? 0;
+}
+function getNodeSize(node, size) {
+    return Math[size](node.in || node.out, node.out || node.in);
+}
+function getAutoLabelPosition(x, y, chartArea, orientation) {
+    if (orientation === 'vertical') {
+        return y < (chartArea.top + chartArea.bottom) / 2 ? 'bottom' : 'top';
+    }
+    return x < (chartArea.left + chartArea.right) / 2 ? 'right' : 'left';
+}
 function getAddY(arr, key, index) {
     for (const item of arr){
         if (item.key === key && item.index === index) {
@@ -416,17 +545,113 @@ function getAddY(arr, key, index) {
     }
     return 0;
 }
+function parseFlow(from, to, fromY, toY, flow, index, xScale, yScale, orientation) {
+    if (orientation === 'vertical') {
+        return {
+            _custom: {
+                flow,
+                from,
+                height: xScale.parse(flow, index),
+                to,
+                x: xScale.parse(toY, index),
+                y: yScale.parse(nodeX(to), index)
+            },
+            x: xScale.parse(fromY, index),
+            y: yScale.parse(nodeX(from), index)
+        };
+    }
+    return {
+        _custom: {
+            flow,
+            from,
+            height: yScale.parse(flow, index),
+            to,
+            x: xScale.parse(nodeX(to), index),
+            y: yScale.parse(toY, index)
+        },
+        x: xScale.parse(nodeX(from), index),
+        y: yScale.parse(fromY, index)
+    };
+}
+function getFlowElementProperties(parsed, xScale, yScale, maxColumn, nodeWidth, columnPadding, borderSpace, orientation) {
+    const custom = parsed._custom;
+    const x = xScale.getPixelForValue(parsed.x);
+    const y = yScale.getPixelForValue(parsed.y);
+    if (orientation === 'vertical') {
+        return {
+            flow: custom.flow,
+            from: custom.from,
+            height: 0,
+            to: custom.to,
+            width: Math.abs(xScale.getPixelForValue(parsed.x + custom.height) - x),
+            x,
+            x2: xScale.getPixelForValue(custom.x),
+            y: getColumnPixel(yScale, parsed.y, maxColumn, columnPadding) + nodeWidth + borderSpace,
+            y2: getColumnPixel(yScale, custom.y, maxColumn, columnPadding) - borderSpace
+        };
+    }
+    return {
+        flow: custom.flow,
+        from: custom.from,
+        height: Math.abs(yScale.getPixelForValue(parsed.y + custom.height) - y),
+        to: custom.to,
+        width: 0,
+        x: getColumnPixel(xScale, parsed.x, maxColumn, columnPadding) + nodeWidth + borderSpace,
+        x2: getColumnPixel(xScale, custom.x, maxColumn, columnPadding) - borderSpace,
+        y,
+        y2: yScale.getPixelForValue(custom.y)
+    };
+}
+function getColumnPixel(scale, value, maxColumn, padding) {
+    const pixel = scale.getPixelForValue(value);
+    return maxColumn ? pixel - value / maxColumn * padding : pixel;
+}
+function getColumnPadding(nodeWidth, orientation, chart) {
+    const trailingSpace = orientation === 'vertical' ? chart.height - chart.chartArea.bottom : chart.width - chart.chartArea.right;
+    return Math.max(0, nodeWidth + 3 - trailingSpace);
+}
+function getNodeRect(node, size, xScale, yScale, maxColumn, nodeWidth, columnPadding, orientation) {
+    if (orientation === 'vertical') {
+        const x = xScale.getPixelForValue(nodeY(node));
+        return {
+            height: nodeWidth,
+            width: Math.abs(xScale.getPixelForValue(nodeY(node) + size) - x),
+            x,
+            y: getColumnPixel(yScale, nodeX(node), maxColumn, columnPadding)
+        };
+    }
+    const y = yScale.getPixelForValue(nodeY(node));
+    return {
+        height: Math.abs(yScale.getPixelForValue(nodeY(node) + size) - y),
+        width: nodeWidth,
+        x: getColumnPixel(xScale, nodeX(node), maxColumn, columnPadding),
+        y
+    };
+}
+function resolveNodeLabelStyle(options, node) {
+    const { backgroundColor, borderRadius = 0, color, display, font, padding = 4, position } = options.nodeLabels ?? {};
+    return {
+        backgroundColor: resolveNodeLabelOption(backgroundColor, node),
+        borderRadius,
+        color: resolveNodeLabelOption(color, node) ?? options.color ?? 'black',
+        display: resolveNodeLabelOption(display, node) ?? true,
+        font,
+        padding,
+        position: resolveNodeLabelOption(position, node) ?? 'auto'
+    };
+}
 class SankeyController extends DatasetController {
     parseObjectData(meta, data, start, count) {
         const sankeyData = getParsedData(data, this.options.parsing);
         const { xScale, yScale } = meta;
         const parsed = [];
         const nodes = buildNodesFromData(sankeyData, this.options);
+        const orientation = this.options.orientation ?? 'horizontal';
         this._nodes = nodes;
         const { maxX, maxY } = layout(nodes, sankeyData, {
-            height: this.chart.canvas.height,
+            height: orientation === 'vertical' ? this.chart.canvas.width : this.chart.canvas.height,
             modeX: this.options.modeX,
-            nodePadding: this.options.nodePadding,
+            nodePadding: this.options.nodePadding ?? 10,
             priority: !!this.options.priority
         });
         this._maxX = maxX;
@@ -437,26 +662,17 @@ class SankeyController extends DatasetController {
             const from = nodes.get(dataPoint.from);
             const to = nodes.get(dataPoint.to);
             if (!from || !to) continue;
-            const fromY = (from.y ?? 0) + getAddY(from.to, dataPoint.to, i);
-            const toY = (to.y ?? 0) + getAddY(to.from, dataPoint.from, i);
-            parsed.push({
-                _custom: {
-                    flow: dataPoint.flow,
-                    from,
-                    height: yScale.parse(dataPoint.flow, i),
-                    to,
-                    x: xScale.parse(to.x, i),
-                    y: yScale.parse(toY, i)
-                },
-                x: xScale.parse(from.x, i),
-                y: yScale.parse(fromY, i)
-            });
+            const fromY = nodeY(from) + getAddY(from.to, dataPoint.to, i);
+            const toY = nodeY(to) + getAddY(to.from, dataPoint.from, i);
+            parsed.push(parseFlow(from, to, fromY, toY, dataPoint.flow, i, xScale, yScale, orientation));
         }
         return parsed.slice(start, start + count);
     }
     getMinMax(scale) {
+        const vertical = this.options.orientation === 'vertical';
+        const columnScale = vertical ? this._cachedMeta.yScale : this._cachedMeta.xScale;
         return {
-            max: scale === this._cachedMeta.xScale ? this._maxX : this._maxY,
+            max: scale === columnScale ? this._maxX : this._maxY,
             min: 0
         };
     }
@@ -469,79 +685,65 @@ class SankeyController extends DatasetController {
         if (!xScale || !yScale) return;
         const firstOpts = this.resolveDataElementOptions(start, mode);
         const sharedOptions = this.getSharedOptions(firstOpts);
-        const { borderWidth, nodeWidth = 10 } = this.options;
+        const { borderWidth, nodeWidth = 10, orientation = 'horizontal' } = this.options;
+        const columnPadding = getColumnPadding(nodeWidth, orientation, this.chart);
         const borderSpace = borderWidth ? borderWidth / 2 + 0.5 : 0;
         for(let i = start; i < start + count; i++){
             const parsed = this.getParsed(i);
-            const custom = parsed._custom;
-            const y = yScale.getPixelForValue(parsed.y);
             this.updateElement(elems[i], i, {
-                from: custom.from,
-                height: Math.abs(yScale.getPixelForValue(parsed.y + custom.height) - y),
                 options: this.resolveDataElementOptions(i, mode),
                 progress: mode === 'reset' ? 0 : 1,
-                to: custom.to,
-                x: xScale.getPixelForValue(parsed.x) + nodeWidth + borderSpace,
-                x2: xScale.getPixelForValue(custom.x) - borderSpace,
-                y,
-                y2: yScale.getPixelForValue(custom.y)
+                ...getFlowElementProperties(parsed, xScale, yScale, this._maxX, nodeWidth, columnPadding, borderSpace, orientation)
             }, mode);
         }
-        this.updateSharedOptions(sharedOptions, mode, firstOpts);
+        if (sharedOptions) {
+            this.updateSharedOptions(sharedOptions, mode, firstOpts);
+        }
     }
     _drawLabels() {
         const ctx = this.chart.ctx;
         const options = this.options;
         const nodes = this._nodes || new Map();
         const size = validateSizeValue(options.size);
-        const borderWidth = options.borderWidth ?? 1;
-        const nodeWidth = options.nodeWidth ?? 10;
         const labels = options.labels;
+        const { borderWidth = 1, nodeWidth = 10, orientation = 'horizontal' } = options;
+        const columnPadding = getColumnPadding(nodeWidth, orientation, this.chart);
+        const defaultFont = options.font ?? this.chart.options.font ?? Chart.defaults.font;
         const { xScale, yScale } = this._cachedMeta;
         if (!xScale || !yScale) return;
         ctx.save();
         const chartArea = this.chart.chartArea;
         for (const node of nodes.values()){
-            const x = xScale.getPixelForValue(node.x);
-            const y = yScale.getPixelForValue(node.y);
-            const max = Math[size](node.in || node.out, node.out || node.in);
-            const height = Math.abs(yScale.getPixelForValue(node.y + max) - y);
+            const max = getNodeSize(node, size);
+            const { height, width, x, y } = getNodeRect(node, max, xScale, yScale, this._maxX, nodeWidth, columnPadding, orientation);
             const label = labels?.[node.key] ?? node.key;
-            let textX = x;
-            ctx.fillStyle = options.color ?? 'black';
-            ctx.textBaseline = 'middle';
-            if (x < chartArea.width / 2) {
-                ctx.textAlign = 'left';
-                textX += nodeWidth + borderWidth + 4;
-            } else {
-                ctx.textAlign = 'right';
-                textX -= borderWidth + 4;
+            const labelStyle = resolveNodeLabelStyle(options, node);
+            if (labelStyle.display) {
+                const font = toFont(labelStyle.font ?? defaultFont);
+                drawLabel(ctx, label, {
+                    autoPosition: getAutoLabelPosition(x, y, chartArea, orientation),
+                    backgroundColor: labelStyle.backgroundColor,
+                    borderRadius: labelStyle.borderRadius,
+                    borderWidth,
+                    color: labelStyle.color,
+                    font,
+                    height,
+                    lineOffset: valueOrDefault(options.padding, font.lineHeight / 2),
+                    padding: labelStyle.padding,
+                    position: labelStyle.position,
+                    width,
+                    x,
+                    y
+                });
             }
-            this._drawLabel(label, y, height, ctx, textX);
         }
         ctx.restore();
     }
-    _drawLabel(label, y, height, ctx, textX) {
-        const font = toFont(this.options.font, this.chart.options.font);
-        const lines = toTextLines(label);
-        const lineCount = lines.length;
-        const middle = y + height / 2;
-        const textHeight = font.lineHeight;
-        const padding = valueOrDefault(this.options.padding, textHeight / 2);
-        ctx.font = font.string;
-        if (lineCount > 1) {
-            const top = middle - textHeight * lineCount / 2 + padding;
-            for(let i = 0; i < lineCount; i++){
-                ctx.fillText(lines[i], textX, top + i * textHeight);
-            }
-        } else {
-            ctx.fillText(label, textX, middle);
-        }
-    }
     _drawNodes() {
         const ctx = this.chart.ctx;
         const nodes = this._nodes || new Map();
-        const { borderColor, borderWidth = 0, nodeWidth = 10, size } = this.options;
+        const { borderColor, borderWidth = 0, nodeWidth = 10, orientation = 'horizontal', size } = this.options;
+        const columnPadding = getColumnPadding(nodeWidth, orientation, this.chart);
         const sizeMethod = validateSizeValue(size);
         const { xScale, yScale } = this._cachedMeta;
         ctx.save();
@@ -551,14 +753,13 @@ class SankeyController extends DatasetController {
         }
         for (const node of nodes.values()){
             ctx.fillStyle = node.color ?? 'black';
-            const x = xScale.getPixelForValue(node.x);
-            const y = yScale.getPixelForValue(node.y);
+            if (!xScale || !yScale) return;
             const max = Math[sizeMethod](node.in || node.out, node.out || node.in);
-            const height = Math.abs(yScale.getPixelForValue(node.y + max) - y);
+            const { height, width, x, y } = getNodeRect(node, max, xScale, yScale, this._maxX, nodeWidth, columnPadding, orientation);
             if (borderWidth) {
-                ctx.strokeRect(x, y, nodeWidth, height);
+                ctx.strokeRect(x, y, width, height);
             }
-            ctx.fillRect(x, y, nodeWidth, height);
+            ctx.fillRect(x, y, width, height);
         }
         ctx.restore();
     }
@@ -568,13 +769,19 @@ class SankeyController extends DatasetController {
         const active = [];
         for(let i = 0, ilen = data.length; i < ilen; ++i){
             const flow = data[i];
-             flow.from.color = flow.options.colorFrom;
+             if (!flow.from || !flow.to) {
+                continue;
+            }
+            flow.from.color = flow.options.colorFrom;
             flow.to.color = flow.options.colorTo;
             if (flow.active) {
                 active.push(flow);
             }
         }
         for (const flow of active){
+            if (!flow.from || !flow.to) {
+                continue;
+            }
             flow.from.color = flow.options.colorFrom;
             flow.to.color = flow.options.colorTo;
         }
@@ -584,8 +791,19 @@ class SankeyController extends DatasetController {
         }
         this._drawLabels();
     }
+    constructor(...args){
+        super(...args), this._nodes = new Map(), this._maxX = 0, this._maxY = 0;
+    }
 }
 SankeyController.id = 'sankey';
+SankeyController.descriptors = {
+    _indexable: false,
+    _scriptable: true,
+    nodeLabels: {
+        _indexable: false,
+        _scriptable: false
+    }
+};
 SankeyController.defaults = {
     animations: {
         colors: {
@@ -601,13 +819,14 @@ SankeyController.defaults = {
                 'y',
                 'x2',
                 'y2',
-                'height'
+                'height',
+                'width'
             ],
             type: 'number'
         },
         progress: {
-            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed.x * 500 + ctx.dataIndex * 20 : undefined,
-            duration: (ctx)=>ctx.type === 'data' ? (ctx.parsed._custom.x - ctx.parsed.x) * 200 : undefined,
+            delay: (ctx)=>ctx.type === 'data' ? ctx.parsed[ctx.dataset.orientation === 'vertical' ? 'y' : 'x'] * 500 + ctx.dataIndex * 20 : undefined,
+            duration: (ctx)=>ctx.type === 'data' ? (ctx.parsed._custom[ctx.dataset.orientation === 'vertical' ? 'y' : 'x'] - ctx.parsed[ctx.dataset.orientation === 'vertical' ? 'y' : 'x']) * 200 : undefined,
             easing: 'linear'
         }
     },
@@ -618,6 +837,7 @@ SankeyController.defaults = {
     modeX: 'edge',
     nodePadding: 10,
     nodeWidth: 10,
+    orientation: 'horizontal',
     transitions: {
         hide: {
             animations: {
@@ -674,7 +894,7 @@ SankeyController.overrides = {
             callbacks: {
                 label (context) {
                     const parsedCustom = context.parsed._custom;
-                    return parsedCustom.from.key + ' -> ' + parsedCustom.to.key + ': ' + parsedCustom.flow;
+                    return `${parsedCustom.from.key} -> ${parsedCustom.to.key}: ${parsedCustom.flow}`;
                 },
                 title () {
                     return '';
@@ -701,7 +921,25 @@ SankeyController.overrides = {
     }
 };
 
-const controlPoints = (x, y, x2, y2)=>x < x2 ? {
+const controlPoints = (x, y, x2, y2, orientation)=>orientation === 'vertical' ? y < y2 ? {
+        cp1: {
+            x,
+            y: y + (y2 - y) / 3 * 2
+        },
+        cp2: {
+            x: x2,
+            y: y + (y2 - y) / 3
+        }
+    } : {
+        cp1: {
+            x: 0,
+            y: y - (y - y2) / 3
+        },
+        cp2: {
+            x: 0,
+            y: y2 + (y - y2) / 3
+        }
+    } : x < x2 ? {
         cp1: {
             x: x + (x2 - x) / 3 * 2,
             y
@@ -726,14 +964,17 @@ const pointInLine = (p1, p2, t)=>({
     });
 const applyAlpha = (original, alpha)=>color(original).alpha(alpha).rgbString();
 const getColorOption = (option, alpha)=>typeof option === 'string' ? applyAlpha(option, alpha) : option;
-function setStyle(ctx, { x, x2, options }) {
+const getHoverColorOption = (option)=>typeof option === 'string' ? getHoverColor(option) : option;
+function setStyle(ctx, { x, x2, y, y2, options }) {
     let fill = 'black';
-    if (options.colorMode === 'from') {
+    if (options.flowColor !== null) {
+        fill = options.flowColor;
+    } else if (options.colorMode === 'from') {
         fill = getColorOption(options.colorFrom, options.alpha);
     } else if (options.colorMode === 'to') {
         fill = getColorOption(options.colorTo, options.alpha);
     } else if (typeof options.colorFrom === 'string' && typeof options.colorTo === 'string') {
-        fill = ctx.createLinearGradient(x, 0, x2, 0);
+        fill = options.orientation === 'vertical' ? ctx.createLinearGradient(0, y, 0, y2) : ctx.createLinearGradient(x, 0, x2, 0);
         fill.addColorStop(0, applyAlpha(options.colorFrom, options.alpha));
         fill.addColorStop(1, applyAlpha(options.colorTo, options.alpha));
     }
@@ -741,44 +982,104 @@ function setStyle(ctx, { x, x2, options }) {
     ctx.strokeStyle = fill;
     ctx.lineWidth = 0.5;
 }
+function clipFlow(ctx, { height, width, x, x2, y, y2 }, progress, orientation) {
+    ctx.beginPath();
+    if (orientation === 'vertical') {
+        ctx.rect(Math.min(x, x2), y, Math.abs(x2 - x) + width + 1, (y2 - y) * progress + 1);
+    } else {
+        ctx.rect(x, Math.min(y, y2), (x2 - x) * progress + 1, Math.abs(y2 - y) + height + 1);
+    }
+    ctx.clip();
+}
+function drawFlowPath(ctx, { height, width, x, x2, y, y2 }, { cp1, cp2 }, orientation) {
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, x2, y2);
+    if (orientation === 'vertical') {
+        ctx.lineTo(x2 + width, y2);
+        ctx.bezierCurveTo(cp2.x + width, cp2.y, cp1.x + width, cp1.y, x + width, y);
+    } else {
+        ctx.lineTo(x2, y2 + height);
+        ctx.bezierCurveTo(cp2.x, cp2.y + height, cp1.x, cp1.y + height, x, y + height);
+    }
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.fill();
+}
+function getLabelRect({ height, width, x, x2, y, y2 }, orientation) {
+    if (orientation === 'vertical') {
+        return {
+            height: y2 - y,
+            width: Math.abs(x2 - x) + width,
+            x: Math.min(x, x2),
+            y
+        };
+    }
+    return {
+        height: Math.abs(y2 - y) + height,
+        width: x2 - x,
+        x,
+        y: Math.min(y, y2)
+    };
+}
 class Flow extends Element {
  draw(ctx) {
-        const { x, x2, y, y2, height, progress } = this;
-        const { cp1, cp2 } = controlPoints(x, y, x2, y2);
+        const { x, x2, y, y2, height, progress, width } = this;
+        const orientation = this.options.orientation;
+        const controls = controlPoints(x, y, x2, y2, orientation);
+        const geometry = {
+            height,
+            width,
+            x,
+            x2,
+            y,
+            y2
+        };
         if (progress === 0) {
             return;
         }
         ctx.save();
         if (progress < 1) {
-            ctx.beginPath();
-            ctx.rect(x, Math.min(y, y2), (x2 - x) * progress + 1, Math.abs(y2 - y) + height + 1);
-            ctx.clip();
+            clipFlow(ctx, geometry, progress, orientation);
         }
         setStyle(ctx, this);
-        ctx.beginPath();
-        ctx.moveTo(x, y);
-        ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, x2, y2);
-        ctx.lineTo(x2, y2 + height);
-        ctx.bezierCurveTo(cp2.x, cp2.y + height, cp1.x, cp1.y + height, x, y + height);
-        ctx.lineTo(x, y);
-        ctx.stroke();
-        ctx.closePath();
-        ctx.fill();
+        drawFlowPath(ctx, geometry, controls, orientation);
+        const labels = this.options.flowLabels;
+        if (labels.display) {
+            const font = toFont(labels.font ?? Chart.defaults.font);
+            const labelRect = getLabelRect(geometry, orientation);
+            drawLabel(ctx, `${this.flow}`, {
+                autoPosition: 'center',
+                backgroundColor: labels.backgroundColor,
+                borderRadius: labels.borderRadius,
+                borderWidth: 0,
+                color: labels.color,
+                font,
+                height: labelRect.height,
+                lineOffset: font.lineHeight / 2,
+                padding: labels.padding,
+                position: labels.position,
+                width: labelRect.width,
+                x: labelRect.x,
+                y: labelRect.y
+            });
+        }
         ctx.restore();
     }
  inRange(mouseX, mouseY, useFinalPosition) {
-        const { x, y, x2, y2, height } = this.getProps([
+        const { x, y, x2, y2, height, width } = this.getProps([
             'x',
             'y',
             'x2',
             'y2',
-            'height'
+            'height',
+            'width'
         ], useFinalPosition);
-        if (mouseX < x || mouseX > x2) {
-            return false;
-        }
-        const { cp1, cp2 } = controlPoints(x, y, x2, y2);
-        const t = (mouseX - x) / (x2 - x);
+        const vertical = this.options.orientation === 'vertical';
+        if (vertical ? mouseY < y || mouseY > y2 : mouseX < x || mouseX > x2) return false;
+        const { cp1, cp2 } = controlPoints(x, y, x2, y2, this.options.orientation);
+        const t = vertical ? (mouseY - y) / (y2 - y) : (mouseX - x) / (x2 - x);
         const p1 = {
             x,
             y
@@ -792,15 +1093,18 @@ class Flow extends Element {
         const c = pointInLine(cp2, p2, t);
         const d = pointInLine(a, b, t);
         const e = pointInLine(b, c, t);
-        const topY = pointInLine(d, e, t).y;
-        return mouseY >= topY && mouseY <= topY + height;
+        const edge = pointInLine(d, e, t);
+        return vertical ? mouseX >= edge.x && mouseX <= edge.x + width : mouseY >= edge.y && mouseY <= edge.y + height;
     }
  inXRange(mouseX, useFinalPosition) {
-        const { x, x2 } = this.getProps([
+        const { x, x2, width } = this.getProps([
             'x',
-            'x2'
+            'x2',
+            'width'
         ], useFinalPosition);
-        return mouseX >= x && mouseX <= x2;
+        const min = Math.min(x, x2);
+        const max = Math.max(x, x2) + (this.options.orientation === 'vertical' ? width : 0);
+        return mouseX >= min && mouseX <= max;
     }
  inYRange(mouseY, useFinalPosition) {
         const { y, y2, height } = this.getProps([
@@ -809,30 +1113,34 @@ class Flow extends Element {
             'height'
         ], useFinalPosition);
         const minY = Math.min(y, y2);
-        const maxY = Math.max(y, y2) + height;
+        const maxY = Math.max(y, y2) + (this.options.orientation === 'vertical' ? 0 : height);
         return mouseY >= minY && mouseY <= maxY;
     }
  getCenterPoint(useFinalPosition) {
-        const { x, y, x2, y2, height } = this.getProps([
+        const { x, y, x2, y2, height, width } = this.getProps([
             'x',
             'y',
             'x2',
             'y2',
-            'height'
+            'height',
+            'width'
         ], useFinalPosition);
+        const vertical = this.options.orientation === 'vertical';
         return {
-            x: (x + x2) / 2,
-            y: (y + y2 + height) / 2
+            x: (x + x2 + (vertical ? width : 0)) / 2,
+            y: (y + y2 + (vertical ? 0 : height)) / 2
         };
     }
-    tooltipPosition(useFinalPosition) {
+    tooltipPosition(useFinalPosition = false) {
         return this.getCenterPoint(useFinalPosition);
     }
  getRange(axis) {
-        return axis === 'x' ? this.width / 2 : this.height / 2;
+        const vertical = this.options.orientation === 'vertical';
+        if (axis === 'x') return vertical ? this.width / 2 : 0;
+        return vertical ? 0 : this.height / 2;
     }
     constructor(cfg){
-        super();
+        super(), this.flow = 0, this.x2 = 0, this.y2 = 0, this.width = 0, this.height = 0, this.progress = 1;
         if (cfg) {
             Object.assign(this, cfg);
         }
@@ -844,11 +1152,23 @@ Flow.defaults = {
     colorFrom: 'red',
     colorMode: 'gradient',
     colorTo: 'green',
-    hoverColorFrom: (_ctx, options)=>getHoverColor(options.colorFrom),
-    hoverColorTo: (_ctx, options)=>getHoverColor(options.colorTo)
+    flowColor: null,
+    flowLabels: {
+        borderRadius: 0,
+        color: 'black',
+        display: false,
+        padding: 4,
+        position: 'center'
+    },
+    hoverColorFrom: (_ctx, options)=>getHoverColorOption(options.colorFrom),
+    hoverColorTo: (_ctx, options)=>getHoverColorOption(options.colorTo),
+    orientation: 'horizontal'
 };
 Flow.descriptors = {
-    _scriptable: true
+    _scriptable: true,
+    flowLabels: {
+        _scriptable: true
+    }
 };
 
 export { Flow, SankeyController };