# Sankey in version 8.3

**URL:** <https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554>\
**Category:** Ignition\
**Created:** [December 2, 2025, 7:46am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554 "2025-12-02T07:46:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [December 2, 2025, 7:46am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/1 "2025-12-02T07:46:12Z")

</div>

May I ask if there is a solution for Sankey diagrams in the current version 8.3？

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [December 2, 2025, 9:24am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/2 "2025-12-02T09:24:46Z")

</div>

[i4Cortex vCortex](https://i4cortex.com/product/vcortex-visual-component/) has a sankey diagram in its visuals pack. @nader.chinichian probably has some good screenshots of it in action.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [December 2, 2025, 11:50am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/3 "2025-12-02T11:50:35Z")

</div>

Yes we have eCharts pack in our modele. You just need to download and install it and check our demo project in your gateway. I include 4 different type of Sankey for reference.

---

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [December 2, 2025, 12:35pm UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/4 "2025-12-02T12:35:24Z")

</div>

I just opened it and took a look—the quoted price is too expensive for me.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [December 2, 2025, 1:09pm UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/5 "2025-12-02T13:09:36Z")

</div>

If you have webdev module licensed in your gateway you can bring sankey chart js code via iframe in your project and pass chart data in URL parameters.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 2, 2025, 4:02pm UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/7 "2025-12-02T16:02:18Z")

</div>

Embr Chart’s Chart.js component includes this Sankey diagram plugin:

> **[GitHub - kurkle/chartjs-chart-sankey: Chart.js module for creating sankey diagrams](https://github.com/kurkle/chartjs-chart-sankey)**
>
> Chart.js module for creating sankey diagrams

---

<div class="post-metadata">

**Author:** ![Senthee\_Wu](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/senthee_wu/32/67770_2.png) [@Senthee\_Wu](https://forum.inductiveautomation.com/u/Senthee_Wu)\
**Post date:** [December 3, 2025, 9:19am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/8 "2025-12-03T09:19:04Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1fb443a2be9844aa2d8123db53f8504502886a98.jpeg)

Thank you very much. I didn't realize that Sankey diagrams were supported until I clicked on the Chart.js section for types. I successfully created an energy flow chart and would like to ask an additional question: do you know which parameter can sort the data in the order of 'data'? In ECharts.js, I found a property parameter 'layoutIterations=0', but it didn't work. I added labels, and somehow by chance, it succeeded (in Figure 2, it changed to the order of my 'data'). Do you know why this happened or if there is a better approach?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52d0b14fd32cfefb51776199ddeab8c12793c308.jpeg)

> **Chart.json**
>
> ```json
> [
> {
> "type": "embr.chart.chart-js",
> "version": 0,
> "props": {
> "type": "sankey",
> "data": {
> "datasets": [
> {
> "alpha": 0.4,
> "animation": {
> "delay": 0,
> "duration": 1000,
> "easing": "easeOutQuart",
> "loop": false
> },
> "animations": {
> "colors": {
> "properties": [
> "color",
> "borderColor",
> "backgroundColor"
> ],
> "type": "color"
> },
> "numbers": {
> "properties": [
> "x",
> "y",
> "borderWidth",
> "radius",
> "tension"
> ],
> "type": "number"
> }
> },
> "borderDash": [],
> "borderWidth": 0,
> "colorFrom": "#23780433",
> "colorTo": "#389E0D33",
> "cubicInterpolationMode": "default",
> "data": [
> {
> "flow": 200000,
> "from": "总用电",
> "to": "生产用电"
> },
> {
> "flow": 40000,
> "from": "生产用电",
> "to": "冲压车间"
> },
> {
> "flow": 30000,
> "from": "生产用电",
> "to": "焊装车间"
> },
> {
> "flow": 80000,
> "from": "生产用电",
> "to": "涂装车间"
> },
> {
> "flow": 50000,
> "from": "生产用电",
> "to": "总装车间"
> },
> {
> "flow": 20000,
> "from": "冲压车间",
> "to": "冲压A线"
> },
> {
> "flow": 20000,
> "from": "冲压车间",
> "to": "冲压B线"
> },
> {
> "flow": 10000,
> "from": "焊装车间",
> "to": "焊装A线"
> },
> {
> "flow": 20000,
> "from": "焊装车间",
> "to": "焊装B线"
> },
> {
> "flow": 50000,
> "from": "涂装车间",
> "to": "涂装A线"
> },
> {
> "flow": 30000,
> "from": "涂装车间",
> "to": "涂装B线"
> },
> {
> "flow": 20000,
> "from": "总装车间",
> "to": "总装A线"
> },
> {
> "flow": 30000,
> "from": "总装车间",
> "to": "总装B线"
> },
> {
> "flow": 40000,
> "from": "总用电",
> "to": "非生产用电"
> },
> {
> "flow": 10000,
> "from": "非生产用电",
> "to": "食堂用电"
> },
> {
> "flow": 10000,
> "from": "非生产用电",
> "to": "办公用电"
> },
> {
> "flow": 10000,
> "from": "非生产用电",
> "to": "空调用电"
> },
> {
> "flow": 10000,
> "from": "非生产用电",
> "to": "照明用电"
> }
> ],
> "fill": false,
> "hidden": false,
> "hoverColorFrom": "#237804",
> "hoverColorTo": "#237804",
> "label": "用电流向",
> "labels": {
> "a": "非生产用电",
> "b": "生产用电"
> },
> "parsing": {
> "flow": "flow",
> "from": "from",
> "to": "to"
> },
> "pointStyle": "circle",
> "priority": {},
> "type": "sankey"
> }
> ]
> },
> "options": {
> "plugins": {
> "legend": {
> "display": false
> },
> "tooltip": {
> "displayColors": false,
> "intersect": false,
> "mode": "point"
> },
> "zoom": {
> "pan": {
> "modifierKey": null
> }
> }
> },
> "scales": {
> "x": {
> "type": "linear"
> },
> "y": {
> "type": "linear"
> }
> }
> }
> },
> "meta": {
> "name": "Chartjs"
> },
> "position": {
> "grow": 1
> },
> "custom": {}
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 3, 2025, 3:35pm UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/9 "2025-12-03T15:35:10Z")

</div>

I don’t have time to test anything, but according to the documentation you can set a `priority` property to control the order of the nodes.

Copied from GitHub:

```JS

const colors = {
  a: 'red',
  b: 'green',
  c: 'blue',
  d: 'gray'
};

const getHover = (key) => colors[key];
const getColor = (key) => colors[key];

const chart = new Chart(ctx, {
  type: 'sankey',
  data: {
    datasets: [{
      label: 'My sankey',
      data: [
        {from: 'a', to: 'b', flow: 10},
        {from: 'a', to: 'c', flow: 5},
        {from: 'b', to: 'c', flow: 10},
        {from: 'd', to: 'c', flow: 7}
      ],
      colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
      colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
      hoverColorFrom: (c) => getHover(c.dataset.data[c.dataIndex].from),
      hoverColorTo: (c) => getHover(c.dataset.data[c.dataIndex].to),
      colorMode: 'gradient', // or 'from' or 'to'
      /* optionally override default alpha (0.5) applied to colorFrom and colorTo */
      alpha: 1,
      /* optional labels */
      labels: {
        a: 'Label A',
        b: 'Label B',
        c: 'Label C',
        d: 'Label D'
      },
      /* optional priority */
      priority: {
        b: 1,
        d: 0
      },
      /* optional column overrides */
      column: {
        d: 1
      },
      size: 'max', // or 'min' if flow overlap is preferred
    }]
  },
});

```

---

<div class="post-metadata">

**Author:** ![alfred.x.wang](https://avatars.discourse-cdn.com/v4/letter/a/71c47a/32.png) [@alfred.x.wang](https://forum.inductiveautomation.com/u/alfred.x.wang)\
**Post date:** [May 20, 2026, 1:30am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/10 "2026-05-20T01:30:13Z")

</div>

could you please provide the link here? for eChart pack module

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [May 20, 2026, 4:30am UTC](https://forum.inductiveautomation.com/t/sankey-in-version-8-3/112554/11 "2026-05-20T04:30:58Z")

</div>

[http://i4cortex.com/wp-content/uploads/ignition\_module/vcortex/v1/vcortex%20(8.1).modl](http://i4cortex.com/wp-content/uploads/ignition_module/vcortex/v1/vcortex%20(8.1).modl)

[http://i4cortex.com/wp-content/uploads/ignition\_module/vcortex/v1/vcortex%20(8.3).modl](http://i4cortex.com/wp-content/uploads/ignition_module/vcortex/v1/vcortex%20(8.3).modl)