Hi,

is there a possibility to force a custom stack ordering at a vertical bar group? For example: Set an priority index within a dataset property property? Like this (with the result, that "Oil" is on top, middle "Coal", bottom "Natural Gas" in the left bar. With highest priority number is on top.):

Currently the element with the highest value is at the top.

Btw: Very cool library. Good work.

When I using this array of data:

const chartDataTest = [ { from: 'User1', to: 'User2', flow: 23.67 }, { from: 'User1', to: 'User3', flow: 25.33 }, { from: 'User1', to: 'User4', flow: 41 }, { from: 'User1', to: 'User5', flow: 31.33 }, { from: 'User1', to: 'User6', flow: 11.33 }, { from: 'User1', to: 'User7', flow: 15.13 }, { from: 'User1', to: 'User8', flow: 2.67 }, { from: 'User1', to: 'User9', flow: 1.1 }, { from: 'User1', to: 'User10', flow: 8 }, { from: 'User1', to: 'User11', flow: 18.33 }, { from: 'User1', to: 'User3', flow: 52.33 }, { from: 'User1', to: 'User12', flow: 5.33 }, { from: 'User1', to: 'User13', flow: 16 }, { from: 'User1', to: 'User14', flow: 18.33 }, { from: 'User1', to: 'User7', flow: 16.67 }, { from: 'User1', to: 'User14', flow: 0.67 }, { from: 'User1', to: 'User4', flow: 0.43 }, { from: 'User1', to: 'User8', flow: 1 }, { from: 'User1', to: 'User11', flow: 4 }, { from: 'User1', to: 'User10', flow: 2.47 }, { from: 'User1', to: 'User15', flow: 48.87 }, { from: 'User1', to: 'User7', flow: 9.13 }, { from: 'User1', to: 'User12', flow: 6 }, { from: 'User1', to: 'User10', flow: 3.13 }, { from: 'User1', to: 'User14', flow: 22.67 }, { from: 'User1', to: 'User7', flow: 2.53 }, { from: 'User1', to: 'User8', flow: 3.67 }, { from: 'User1', to: 'User4', flow: 41.43 }, { from: 'User1', to: 'User5', flow: 20.33 }, { from: 'User1', to: 'User6', flow: 5.03 }, { from: 'User1', to: 'User3', flow: 52.5 }, { from: 'User1', to: 'User16', flow: 1.7 }, { from: 'User1', to: 'User1', flow: 1.33 }, { from: 'User1', to: 'User1', flow: 4.33 }, { from: 'User1', to: 'User6', flow: 15.67 }, { from: 'User1', to: 'User14', flow: 6.17 }, { from: 'User1', to: 'User9', flow: 6 }, { from: 'User4', to: 'User17', flow: 17.33 }, { from: 'User5', to: 'User12', flow: 1.33 }, { from: 'User6', to: 'User10', flow: 2.13 }, { from: 'User7', to: 'User17', flow: 19.67 }, { from: 'User9', to: 'User4', flow: 3.33 } ];

I'm getting error:

chartjs-chart-sankey.esm.js:109 Uncaught RangeError: Maximum call stack size exceeded at nodeCount (chartjs-chart-sankey.esm.js:109:1) at chartjs-chart-sankey.esm.js:109:1 at Array.reduce (<anonymous>) at nodeCount (chartjs-chart-sankey.esm.js:109:1) at chartjs-chart-sankey.esm.js:109:1 at Array.reduce (<anonymous>) at nodeCount (chartjs-chart-sankey.esm.js:109:1) at chartjs-chart-sankey.esm.js:109:1 at Array.reduce (<anonymous>) at nodeCount (chartjs-chart-sankey.esm.js:109:1)

when I reduce array in half everything works fine.

Hi !

I am implementing sankey diagrams on a project. I have a great result, thanks for this project!

However, there is a refresh problem when I update the data, especially when I reduce the data of all the nodes.

I made an example here : https://codesandbox.io/s/update-data-j3rvy?file=/src/index.js

The size of the nodes is very small, while there is space to draw them higher.

I found a way around the problem by making two calls to the update() function (which is not very nice).

I tried to look in the code without finding the problem.

Can you help me to find a fix?

Thanks for your help.

Canvas paints new draw operations on top of existing ones. Due to the fact that the _drawLabels method is invoked first, the text must compete with the transparent Flows drawn over it which limits the range of colors that are legible/visible (as well as fidelity of the text) within the chart. I changed the order of the calls such that _drawLabels occurs after the for expression for drawing the Flows.

When I try to register the SankeyController, I get "Cannot read property 'prototype' of undefined". Here is a code snippet:

import type { ChartDataset, ChartOptions } from 'chart.js';
import { Chart } from 'chart.js';
import { SankeyController, Flow } from 'chartjs-chart-sankey';

Chart.register(SankeyController, Flow);

Would appreciate some help! Thanks!

Added showValues and unitOfMeasure options: datasets: [ { data: [{ from: 'TEST1', to: 'TEST2', flow: 15}, {from: 'TEST3', to: 'TEST2', flow: 20}, {from: 'TEST4', to: 'TEST2', flow: 25}, {from: 'TEST2', to: 'TEST6', flow: 60}, {from: 'TEST5', to: 'TEST6', flow: 10}], showValues: true, unitOfMeasure: "kW", colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from), colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to), borderWidth: 0, borderColor: 'black', } ],

Hello there.

I propose two things:

1. An additional boolean configuration parameter 'adjustOverlaps'. The reason for that is that I have more 'out-connections' than 'in-connections'. (basically elements may fall into multiple categories) It doesn't look nice. So the 'adjustOverlaps === true' param does the following:

By default it is set to 'false'. The usual logic stays the same.

2. An updated way to calculate the largest node. This is a controversian one. But it helped me. The problem was due to the described above thing - more 'out-connections' than 'in-connections'. The 'findLargestNode' returned a node from a middle which then led to a visual bug. It got: But i expected one of the images above.

I added the 'tree.html' file which can reproduce the issue if the 'findLargestNode' function is reverted back. Also there is a test for that. expect(oneThenTwo).toEqual(jasmine.objectContaining({y: 28})); It failed here because 'y' was undefined;

The controvercial thing is that a few tests are broken because charts do not conform to the png images provided. I'd be nice you if could help with those images.

Thanks

Hi! I'm a commiter in https://github.com/Gnucash/gnucash/ and keen to import this nice module for cash flow charts. I hope you wouldn't mind? It'd need to wait for chartJS-3 release first. One issue: it doesn't seem to sanity check for circular flows?

{ from:"A", to:"B", flow:10 },
{ from:"B", to:"C", flow:10 },
{ from:"C", to:"A", flow:10 }

Hi

Data: [{ from: 'TEST1', to: 'TEST2', flow: 15}, {from: 'TEST3', to: 'TEST2', flow: 20}, {from: 'TEST4', to: 'TEST2', flow: 25}, {from: 'TEST4', to: 'TEST5', flow: 25}, {from: 'TEST2', to: 'TEST6', flow: 60}, {from: 'TEST5', to: 'TEST6', flow: 25}, {from: 'TEST7', to: 'TEST6', flow: 25}]

Priorities: { TEST1: 1, TEST2: 1, TEST3: 2, TEST4: 3, TEST5: 2, TEST6: 1, TEST7: 4 }

Priorities: { TEST1: 2, TEST2: 1, TEST3: 3, TEST4: 4, TEST5: 2, TEST6: 1, TEST7: 1 }

Why does this happen? The TEST2 node should leave free space for the connection between the TEST7 and TEST6 nodes.

Thanks in advance

Hello, is it possible to change the default font color? I have tried various ways, for example setting Chart.defaults.color = '#fffff'; and changing the color in the dataset option (but this only changes the label at the top.

Thank you for developing this plugin.

I was wondering if there is any way of avoiding the X scale offset without having the right most nodes disappearing. If I do not set the scales.x.offset property tu false this is what I see:

However, when I set the property to false, the offset is removed but the right most nodes too:

Thanks for the chart, it is really impressive.

The current column config behaviour is a bit confusing. With the config below my expectation was that it will define 4 columns prior to the 5th "Energy".

datasets: [
  {
    data: [
      { from: "Oil", to: "Energy", flow: 15 },
      { from: "Natural Gas", to: "Energy", flow: 20 },
      { from: "Coal", to: "Energy", flow: 25 },
      { from: "Electricity", to: "Energy", flow: 25 },
    ],
    column: {
      "Oil": 0,
      "Natural Gas": 1,
      "Coal": 2,
      "Electricity": 3,
    },
  },
]

After some investigation, it turns out that the count of columns is computed automatically based on the data and the actual visualization is broken.

https://codesandbox.io/s/vue-js-2-chart-js-3-sankey-diagram-forked-b5ob9i?file=/src/App.vue:710-1316

Adding column Overrides can potentially break a graph.

An example:

column: {
          Oil: 0,
          Oil1: 1,
          Air1: 1,
          Air2: 2,
          Stuff1: 1,
          Stuff2: 2
        },

With the following Dataset

data: [
          { from: "Oil", to: "Air1", flow: 15 },
          { from: "Oil", to: "Stuff1", flow: 20 },
          { from: "Oil1", to: "Air2", flow: 25 },
          { from: "Oil1", to: "Stuff2", flow: 25 `},]`

completly breaks the graph, as shown here:

How I would expect it to look (without the crossed out flow):

{ from: "Oil", to: "Oil1", flow: 15 }, was added for screenshot above

A modified codepen example: https://codepen.io/mh2207/pen/WNyGxPX

And Thanks for your hard work!

I'm using a custom priority parameter and getting the following error TypeError: nodes[0] is undefined

https://github.com/kurkle/chartjs-chart-sankey/blob/9dbd19faa27a67000403197ca6940a2c2931e357/src/layout.js#L215

nodes[0] assumes that there is always at least one element and this is not true in my case.

[email protected] [email protected]

We have a setup where this component is used inside a Vue 3 app, which is tested with jest (works fine!).

We are now moving to the latest vue tooling, and after porting the tests from jest to vitest, we get this error:

 ❯ TypedRegistry.isForType node_modules/chart.js/dist/chart.js:6136:74

 FAIL  tests/unit/caseDetail.spec.js [ tests/unit/caseDetail.spec.js ]
TypeError: Cannot read properties of undefined (reading 'prototype')
    6134|     console.log(`this.type = ${this.type}`)
    6135|     console.log(`type = ${JSON.stringify(type)}`)
    6136|     return Object.prototype.isPrototypeOf.call(this.type.prototype, type.prototype);
       |                                                                          ^
    6137|   }
    6138|   register(item) {
 ❯ Registry._getRegistryForType node_modules/chart.js/dist/chart.js:6279:15
 ❯ node_modules/chart.js/dist/chart.js:6259:41
 ❯ Registry._each node_modules/chart.js/dist/chart.js:6258:15
 ❯ Registry.add node_modules/chart.js/dist/chart.js:6216:10
 ❯ Function.value [as register] node_modules/chart.js/dist/chart.js:7549:16
 ❯ src/components/SankeyChart.vue:11:29
 ❯ async /app/frontend/src/components/CaseDetailPage.vue:14:31
 ❯ async /app/frontend/tests/unit/caseDetail.spec.js:14:31

it occurs in src/components/SankeyChart.vue on this line:

Chart.register(LinearScale, SankeyController, Flow)

I have set up a super-simple example to reproduce (https://gitlab.com/simevo/vue-3-vitest-basic-example), starting from the basic vue test example, I added chart.js and Chart.register(LinearScale) (works fine)

As soon as I import import { SankeyController, Flow } from 'chartjs-chart-sankey' and change Chart.register(LinearScale) to Chart.register(LinearScale, SankeyController, Flow) the error pops up.

Sorry for the convoluted use case, I just hope this helps you find some hidden bug in your nice module!

Hello

Firstly, thanks for this plugin. I've been able to quickly get some awesome charts going. Much obliged.

For most of my data, I have charts that have a few sources (say 10 or less) and hundreds of outputs. I'd like to vertically scroll the Sankey chart, if possible. Considering the number out connections I have, having a very large vertical canvas results in noticeable lag / overhead.

(ie, simply making the canvas large isn't a great solution as im drawing 4k pixels vertically... )

Id like to limit the drawing and provide some mechanism to vertically scroll / pan. Im aware Chart.js has this feature, but unless I am mistaken I can't seem to find the right way of getting It to work with this plugin.

For example, here's a zoomed out chart to provide a visual example ( had to split it over 2 images)

Is there a simple example of a working scrolling solution for Sankey charts?

Secondly, is there a way to pin some elements to a fixed / relative to the viewport on screen position? I'd love my left side elements to remain at the top even when scrolling, so one has a consistent reference point.

Thank you again!

@kurkle From the documentation example, is there any optimization we can do to avoid the flickering issue?

Charts built from the original chart.js usually would't have this issue.

https://user-images.githubusercontent.com/35160613/183940648-f362d3ee-d197-41ef-8305-292c97dbcdfb.mov