{"id":1368,"date":"2026-07-27T02:31:06","date_gmt":"2026-07-27T02:31:06","guid":{"rendered":"https:\/\/www.vpascode.com\/de\/docs\/uncategorized\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions\/"},"modified":"2026-07-29T08:52:21","modified_gmt":"2026-07-29T08:52:21","slug":"sankey-chart-directional-flow-and-volume-transitions-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/","title":{"rendered":"Sankey Chart: Directional Flow and Volume Transitions"},"content":{"rendered":"<p>When tracking continuous transfers, resource distributions, or multi-stage user journeys, the <strong>Sankey Chart<\/strong> is the premier visualization tool. By drawing proportional flow bands between sequential stage nodes, Sankey charts illustrate <em>how total quantities split, combine, and transition through complex systems<\/em>\u2014such as website user conversion funnels, energy distribution grids, or organizational budget allocations.<\/p>\n<h2>The Mechanics of Sankey Charts<\/h2>\n<p>In Apache ECharts, Sankey charts use <code>type: 'sankey'<\/code>. Similar to graph charts, a Sankey plot is defined by a list of distinct <code>nodes<\/code> (or <code>data<\/code>) and directed <code>links<\/code> (or <code>edges<\/code>). Each link contains a <code>source<\/code> node name, a <code>target<\/code> node name, and a numeric <code>value<\/code> that determines the visual width of the connecting flow line.<\/p>\n<h3>1. Essential Setup<\/h3>\n<p>To construct a basic Sankey chart, declare your node items inside <code>data<\/code> and define directed flow volumes in <code>links<\/code>:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqtk8FOwzAMhu+T9g45kcuEBmhCKuLGFYFWbmgHK\/W6sDSpEqdShfrupGNkW7sRCeFTE\/\/+7PxpTE3SaPbIPqcTFoKMUSTr7Ge927OyLNFmjEvCis9GmRcdcpXxDivTIP\/Od3udQyvRZez9UHbE3lHaGgPAgd5ie4zvowCCk+IIYRqqvu7NECi2xAa1Rx77ntW+WlN4QSwHhS6hzdE2UiRlz2C3SFKXCd3y6ik93FpSEJ1qVoMaJfXWXbDEGW\/F2JQZI7Al0siBGWtA+VBwP78wW5oYfYqwuyRsOEWEHdz8D1rveeTcLv7M2d9MRN0kUUemXKT0B\/v9qrGqN+Cky4ZPpo+1ET5kOBQfIFCLlp9quvF\/gzm1Cs\/ShFGmf+KlhUKiJn7mfMLbcPvoQtf59WLQ7bDcf66mk+7hC5vbET8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sankey',\r\n            data: [\r\n                { name: 'Total Revenue' },\r\n                { name: 'Product Sales' },\r\n                { name: 'Services' },\r\n                { name: 'Marketing' },\r\n                { name: 'R&amp;D' },\r\n                { name: 'Profit' }\r\n            ],\r\n            links: [\r\n                { source: 'Total Revenue', target: 'Product Sales', value: 70 },\r\n                { source: 'Total Revenue', target: 'Services', value: 30 },\r\n                { source: 'Product Sales', target: 'Marketing', value: 30 },\r\n                { source: 'Product Sales', target: 'R&amp;D', value: 25 },\r\n                { source: 'Product Sales', target: 'Profit', value: 15 },\r\n                { source: 'Services', target: 'Profit', value: 30 }\r\n            ],\r\n            emphasis: {\r\n                focus: 'adjacency'\r\n            },\r\n            lineStyle: {\r\n                color: 'gradient',\r\n                curveness: 0.5\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqtk8FOwzAMhu+T9g45kcuEBmhCKuLGFYFWbmgHK\/W6sDSpEqdShfrupGNkW7sRCeFTE\/\/+7PxpTE3SaPbIPqcTFoKMUSTr7Ge927OyLNFmjEvCis9GmRcdcpXxDivTIP\/Od3udQyvRZez9UHbE3lHaGgPAgd5ie4zvowCCk+IIYRqqvu7NECi2xAa1Rx77ntW+WlN4QSwHhS6hzdE2UiRlz2C3SFKXCd3y6ik93FpSEJ1qVoMaJfXWXbDEGW\/F2JQZI7Al0siBGWtA+VBwP78wW5oYfYqwuyRsOEWEHdz8D1rveeTcLv7M2d9MRN0kUUemXKT0B\/v9qrGqN+Cky4ZPpo+1ET5kOBQfIFCLlp9quvF\/gzm1Cs\/ShFGmf+KlhUKiJn7mfMLbcPvoQtf59WLQ7bDcf66mk+7hC5vbET8=\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"BECFcBk\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1849\" height=\"1384\" class=\"alignnone size-full wp-image-1369 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png 1849w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539-300x225.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539-1024x766.png 1024w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539-768x575.png 768w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539-1536x1150.png 1536w\" sizes=\"(max-width: 1849px) 100vw, 1849px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Advanced Structural Techniques<\/h2>\n<p>Sankey charts can be customized with vertical flow orientations, multi-level node colors, and dynamic link highlighting to trace individual paths through intricate networks.<\/p>\n<h3>1. Vertical Flow Orientation<\/h3>\n<p>Set <code>orient: 'vertical'<\/code> to transform horizontal stage flows into a top-to-bottom vertical waterfall view:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNU7FugzAQ3SPlH7yxoMqpmgxUXdJKHRupUjNUGVxzIhbgQ\/YZCVX59xpCIFAicouB9+75vTPGghRq9sJ+lwvmixAzUkV0eW++GZUkYCIWKII8CP8hH9pjOToLOZYQnPFTy7NgFNiIffdtV9qNSlWAF7BCp1Bdy9eFvluTh0swpKTIxgSNMexVTMeIPfIJ7F34NKvNCIkFiYGnzhvTIq\/t7OHH+rzsS\/nFBl2eSfLOYOwksZ1IYIb6pgx45hadlnPcV2FojnIEmaKraUPWYdSVKZ3aG5EtOiMnQoeMhEmAxglDVorM+YYV5\/yGvzs0h6PoRJ\/mNUduOsVmYJ3QZl6obegFLuPs3az5HaOFT6oyiMa\/dl0SM6wvz3nPYMKPdKYEDdYfD39YD\/GrrdvHw3Jxev4DvAjk\/g==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    tooltip: {\r\n        trigger: 'item',\r\n        triggerOn: 'mousemove'\r\n    },\r\n    series: [\r\n        {\r\n            type: 'sankey',\r\n            orient: 'vertical',\r\n            nodeWidth: 20,\r\n            nodeGap: 16,\r\n            data: [\r\n                { name: 'Website Visits' },\r\n                { name: 'Product Page' },\r\n                { name: 'Direct Bounce' },\r\n                { name: 'Cart' },\r\n                { name: 'Checkout' }\r\n            ],\r\n            links: [\r\n                { source: 'Website Visits', target: 'Product Page', value: 1000 },\r\n                { source: 'Website Visits', target: 'Direct Bounce', value: 400 },\r\n                { source: 'Product Page', target: 'Cart', value: 600 },\r\n                { source: 'Cart', target: 'Checkout', value: 450 }\r\n            ],\r\n            lineStyle: {\r\n                color: 'source',\r\n                curveness: 0.5\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqNU7FugzAQ3SPlH7yxoMqpmgxUXdJKHRupUjNUGVxzIhbgQ\/YZCVX59xpCIFAicouB9+75vTPGghRq9sJ+lwvmixAzUkV0eW++GZUkYCIWKII8CP8hH9pjOToLOZYQnPFTy7NgFNiIffdtV9qNSlWAF7BCp1Bdy9eFvluTh0swpKTIxgSNMexVTMeIPfIJ7F34NKvNCIkFiYGnzhvTIq\/t7OHH+rzsS\/nFBl2eSfLOYOwksZ1IYIb6pgx45hadlnPcV2FojnIEmaKraUPWYdSVKZ3aG5EtOiMnQoeMhEmAxglDVorM+YYV5\/yGvzs0h6PoRJ\/mNUduOsVmYJ3QZl6obegFLuPs3az5HaOFT6oyiMa\/dl0SM6wvz3nPYMKPdKYEDdYfD39YD\/GrrdvHw3Jxev4DvAjk\/g==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"fYbbaiR\"><img decoding=\"async\" width=\"1894\" height=\"1384\" class=\"alignnone size-full wp-image-1371 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304.png 1894w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304-300x219.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304-1024x748.png 1024w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304-768x561.png 768w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c401d9304-1536x1122.png 1536w\" sizes=\"(max-width: 1894px) 100vw, 1894px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Fine-Tuning Layout and Link Styling<\/h2>\n<p>Adjusting node spacing, line curvature, and hover highlight behaviors keeps complex multi-stage flows clean and readable.<\/p>\n<h3>1. Node Gap Controls and Source-Target Gradient Flows<\/h3>\n<p>Customizing <code>nodeGap<\/code> and setting <code>lineStyle.color: 'gradient'<\/code> creates smooth color transitions between stages:<\/p>\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">ECharts<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqdkz9vwjAQxXckvoOlqsqCqvwhCU3VoQzt2IGhQ8VgnCNYBDtyLkgp4rvXppQoJmlQb7L1Lj8\/v4tlgVwK8kwO4xHRVYLiUCbk82dr6tAsTWFdQEKckoot1M6kLeawRi2G97ageLYxinctCZnCB09xkxB\/2qG90SIh3sxSUkWzjK5y7QVVBbYPuoI8sa2bKmTJzZW1l5Mn240pJnOpdMNdEARd+loKXPAvfbTnt9Wj7ZIibYV5CZUIujM5LmSlGJAXZ0I4wm6BtbnSofEQTmOXRQ45XsG7OPNezqPHWBwOc5BmQLxezJqyWTi7EeP3YgAiXYOYVy5oTt4rLCrsZcUBc1M4sdqopf1XcLEte8ZRnvJrDwSpygBboexpXumu0O3xbWPmf2KCYczlE4viN5ToPxQr2TPKvxHlD6OMq8FxwO80+x9hpmjKQXQ\/1ErtQUCph+o+RB0NsqCMY23kqfVSm+15uRyPjk\/f99AyGw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-echarts\"><code data-language=\"echarts\" class=\"language-echarts\">option = {\r\n    series: [\r\n        {\r\n            type: 'sankey',\r\n            left: '5%',\r\n            right: '15%',\r\n            nodeWidth: 24,\r\n            nodeGap: 18,\r\n            draggable: true,\r\n            label: {\r\n                position: 'right',\r\n                color: '#333',\r\n                fontSize: 12\r\n            },\r\n            data: [\r\n                { name: 'Source A', itemStyle: { color: '#5470c6' } },\r\n                { name: 'Source B', itemStyle: { color: '#91cc75' } },\r\n                { name: 'Stage 1', itemStyle: { color: '#fac858' } },\r\n                { name: 'Stage 2', itemStyle: { color: '#ee6666' } },\r\n                { name: 'Final Output', itemStyle: { color: '#73c0de' } }\r\n            ],\r\n            links: [\r\n                { source: 'Source A', target: 'Stage 1', value: 50 },\r\n                { source: 'Source B', target: 'Stage 1', value: 30 },\r\n                { source: 'Stage 1', target: 'Stage 2', value: 60 },\r\n                { source: 'Stage 1', target: 'Final Output', value: 20 },\r\n                { source: 'Stage 2', target: 'Final Output', value: 60 }\r\n            ],\r\n            lineStyle: {\r\n                color: 'gradient',\r\n                curveness: 0.6,\r\n                opacity: 0.4\r\n            }\r\n        }\r\n    ]\r\n};<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#echarts:eNqdkz9vwjAQxXckvoOlqsqCqvwhCU3VoQzt2IGhQ8VgnCNYBDtyLkgp4rvXppQoJmlQb7L1Lj8\/v4tlgVwK8kwO4xHRVYLiUCbk82dr6tAsTWFdQEKckoot1M6kLeawRi2G97ageLYxinctCZnCB09xkxB\/2qG90SIh3sxSUkWzjK5y7QVVBbYPuoI8sa2bKmTJzZW1l5Mn240pJnOpdMNdEARd+loKXPAvfbTnt9Wj7ZIibYV5CZUIujM5LmSlGJAXZ0I4wm6BtbnSofEQTmOXRQ45XsG7OPNezqPHWBwOc5BmQLxezJqyWTi7EeP3YgAiXYOYVy5oTt4rLCrsZcUBc1M4sdqopf1XcLEte8ZRnvJrDwSpygBboexpXumu0O3xbWPmf2KCYczlE4viN5ToPxQr2TPKvxHlD6OMq8FxwO80+x9hpmjKQXQ\/1ErtQUCph+o+RB0NsqCMY23kqfVSm+15uRyPjk\/f99AyGw==\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit ECharts in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<p id=\"RlBHLJz\"><img decoding=\"async\" width=\"1987\" height=\"1384\" class=\"alignnone size-full wp-image-1372 \" src=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce.png\" alt=\"\" srcset=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce.png 1987w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce-300x209.png 300w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce-1024x713.png 1024w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce-768x535.png 768w, https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c40f979ce-1536x1070.png 1536w\" sizes=\"(max-width: 1987px) 100vw, 1987px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>Strategic Best Practices<\/h2>\n<ul>\n<li><strong>Maintain Conservation of Flow:<\/strong> Ensure the sum of values flowing into a node equals or logically accounts for the outgoing values to prevent misleading visual gaps.<\/li>\n<li><strong>Enable <code>emphasis.focus: 'adjacency'<\/code>:<\/strong> When dealing with multi-stage flows, focusing on adjacent links on hover allows users to isolate specific pathways without visual noise.<\/li>\n<li><strong>Use Gradient Links:<\/strong> Setting <code>lineStyle.color: 'gradient'<\/code> smoothly blends the source node color into the target node color, making multi-stage transitions visually intuitive.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When tracking continuous transfers, resource distributions, or multi-stage user journeys, the Sankey Chart is the premier visualization tool. By drawing proportional flow bands between sequential stage nodes, Sankey charts illustrate how total quantities split, combine, and transition through complex systems\u2014such&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1254,"menu_order":20,"template":"","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"ld_collection":[14],"class_list":["post-1368","ld_docs","type-ld_docs","status-publish","hentry","ld_collection-vpascode-docs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool<\/title>\n<meta name=\"description\" content=\"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool\" \/>\n<meta property=\"og:description\" content=\"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"VPasCode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-29T08:52:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"2\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\",\"name\":\"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\",\"datePublished\":\"2026-07-27T02:31:06+00:00\",\"dateModified\":\"2026-07-29T08:52:21+00:00\",\"description\":\"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/07\\\/img_6a66c3f3b1539.png\",\"width\":1849,\"height\":1384},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/sankey-chart-directional-flow-and-volume-transitions-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lean Docs\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/%ld_collection%\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ECharts Playbook\",\"item\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/docs\\\/vpascode-docs\\\/echarts-playbook\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Sankey Chart: Directional Flow and Volume Transitions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"name\":\"VPasCode\",\"description\":\"by Visual Paradigm\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#organization\",\"name\":\"VPasCode\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"contentUrl\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/wp-content\\\/uploads\\\/sites\\\/4\\\/2026\\\/06\\\/cropped-vp-online-logo-v1.png\",\"width\":128,\"height\":138,\"caption\":\"VPasCode\"},\"image\":{\"@id\":\"https:\\\/\\\/www.vpascode.com\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool","description":"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/","og_locale":"de_DE","og_type":"article","og_title":"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool","og_description":"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.","og_url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/","og_site_name":"VPasCode","article_modified_time":"2026-07-29T08:52:21+00:00","og_image":[{"url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"2\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/","url":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/","name":"ECharts Sankey Chart Guide | VPasCode Text to Diagram Tool","isPartOf":{"@id":"https:\/\/www.vpascode.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png","datePublished":"2026-07-27T02:31:06+00:00","dateModified":"2026-07-29T08:52:21+00:00","description":"Visualize energy, financial, or data volume flows using ECharts Sankey charts in VPasCode, a diagram-as-code tool.","breadcrumb":{"@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/#primaryimage","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/07\/img_6a66c3f3b1539.png","width":1849,"height":1384},{"@type":"BreadcrumbList","@id":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/sankey-chart-directional-flow-and-volume-transitions-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vpascode.com\/de\/"},{"@type":"ListItem","position":2,"name":"Lean Docs","item":"https:\/\/www.vpascode.com\/de\/docs\/%ld_collection%\/"},{"@type":"ListItem","position":3,"name":"ECharts Playbook","item":"https:\/\/www.vpascode.com\/de\/docs\/vpascode-docs\/echarts-playbook\/"},{"@type":"ListItem","position":4,"name":"Sankey Chart: Directional Flow and Volume Transitions"}]},{"@type":"WebSite","@id":"https:\/\/www.vpascode.com\/de\/#website","url":"https:\/\/www.vpascode.com\/de\/","name":"VPasCode","description":"by Visual Paradigm","publisher":{"@id":"https:\/\/www.vpascode.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vpascode.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.vpascode.com\/de\/#organization","name":"VPasCode","url":"https:\/\/www.vpascode.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","contentUrl":"https:\/\/www.vpascode.com\/de\/wp-content\/uploads\/sites\/4\/2026\/06\/cropped-vp-online-logo-v1.png","width":128,"height":138,"caption":"VPasCode"},"image":{"@id":"https:\/\/www.vpascode.com\/de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/1368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs"}],"about":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/types\/ld_docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/users\/3"}],"up":[{"embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_docs\/1254"}],"wp:attachment":[{"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/media?parent=1368"}],"wp:term":[{"taxonomy":"ld_collection","embeddable":true,"href":"https:\/\/www.vpascode.com\/de\/wp-json\/wp\/v2\/ld_collection?post=1368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}