chartjs-chart-sankey 0.14.4 → 0.15.0

package/dist/chartjs-chart-sankey.cjs

@@ -1,5 +1,5 @@
 /*!
- * chartjs-chart-sankey v0.14.4
+ * chartjs-chart-sankey v0.15.0
  * https://chartjs-chart-sankey.pages.dev/
  * (c) 2026 Jukka Kurkela
  * Released under the MIT license
@@ -39,6 +39,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;
@@ -231,16 +324,22 @@ function processFrom(node, y) {
     }
     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 nodeY$1(node) + node.size;
 }
@@ -331,7 +430,10 @@ function calculateYUsingPriority(nodeArray, maxX) {
     for(let x = 0; x <= maxX; x++){
         let y = nextYStart;
         const nodes = nodeArray.filter((node)=>nodeX$1(node) === x).sort((a, b)=>(a.priority ?? 0) - (b.priority ?? 0));
-        nextYStart = nodes.length ? nodes[0].to.filter((to)=>nodeX$1(to.node) > x + 1).reduce((acc, cur)=>acc + cur.flow, 0) || 0 : 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);
@@ -429,6 +531,15 @@ function nodeX(node) {
 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) {
@@ -437,15 +548,111 @@ 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 chart_js.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 ?? 10,
             priority: !!this.options.priority
@@ -460,24 +667,15 @@ class SankeyController extends chart_js.DatasetController {
             if (!from || !to) continue;
             const fromY = nodeY(from) + getAddY(from.to, dataPoint.to, i);
             const toY = nodeY(to) + getAddY(to.from, dataPoint.from, i);
-            parsed.push({
-                _custom: {
-                    flow: dataPoint.flow,
-                    from,
-                    height: yScale.parse(dataPoint.flow, i),
-                    to,
-                    x: xScale.parse(nodeX(to), i),
-                    y: yScale.parse(toY, i)
-                },
-                x: xScale.parse(nodeX(from), i),
-                y: yScale.parse(fromY, 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
         };
     }
@@ -490,22 +688,15 @@ class SankeyController extends chart_js.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);
         }
         if (sharedOptions) {
@@ -517,54 +708,45 @@ class SankeyController extends chart_js.DatasetController {
         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_js.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(nodeX(node));
-            const y = yScale.getPixelForValue(nodeY(node));
-            const max = Math[size](node.in || node.out, node.out || node.in);
-            const height = Math.abs(yScale.getPixelForValue(nodeY(node) + 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 = helpers.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: helpers.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 = helpers.toFont(this.options.font ?? this.chart.options.font ?? chart_js.Chart.defaults.font);
-        const lines = toTextLines(label);
-        const lineCount = lines.length;
-        const middle = y + height / 2;
-        const textHeight = font.lineHeight;
-        const padding = helpers.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();
@@ -575,14 +757,12 @@ class SankeyController extends chart_js.DatasetController {
         for (const node of nodes.values()){
             ctx.fillStyle = node.color ?? 'black';
             if (!xScale || !yScale) return;
-            const x = xScale.getPixelForValue(nodeX(node));
-            const y = yScale.getPixelForValue(nodeY(node));
             const max = Math[sizeMethod](node.in || node.out, node.out || node.in);
-            const height = Math.abs(yScale.getPixelForValue(nodeY(node) + 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();
     }
@@ -619,6 +799,14 @@ class SankeyController extends chart_js.DatasetController {
     }
 }
 SankeyController.id = 'sankey';
+SankeyController.descriptors = {
+    _indexable: false,
+    _scriptable: true,
+    nodeLabels: {
+        _indexable: false,
+        _scriptable: false
+    }
+};
 SankeyController.defaults = {
     animations: {
         colors: {
@@ -634,13 +822,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'
         }
     },
@@ -651,6 +840,7 @@ SankeyController.defaults = {
     modeX: 'edge',
     nodePadding: 10,
     nodeWidth: 10,
+    orientation: 'horizontal',
     transitions: {
         hide: {
             animations: {
@@ -734,7 +924,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
@@ -760,14 +968,16 @@ const pointInLine = (p1, p2, t)=>({
 const applyAlpha = (original, alpha)=>helpers.color(original).alpha(alpha).rgbString();
 const getColorOption = (option, alpha)=>typeof option === 'string' ? applyAlpha(option, alpha) : option;
 const getHoverColorOption = (option)=>typeof option === 'string' ? helpers.getHoverColor(option) : option;
-function setStyle(ctx, { x, x2, options }) {
+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));
     }
@@ -775,44 +985,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 chart_js.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 = helpers.toFont(labels.font ?? chart_js.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
@@ -826,15 +1096,18 @@ class Flow extends chart_js.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([
@@ -843,30 +1116,34 @@ class Flow extends chart_js.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 = 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(), this.x2 = 0, this.y2 = 0, this.width = 0, this.height = 0, this.progress = 1;
+        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);
         }
@@ -878,11 +1155,23 @@ Flow.defaults = {
     colorFrom: 'red',
     colorMode: 'gradient',
     colorTo: 'green',
+    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)
+    hoverColorTo: (_ctx, options)=>getHoverColorOption(options.colorTo),
+    orientation: 'horizontal'
 };
 Flow.descriptors = {
-    _scriptable: true
+    _scriptable: true,
+    flowLabels: {
+        _scriptable: true
+    }
 };
 
 chart_js.Chart.register(SankeyController, Flow);