Create a Sankey Chart with CFF Charts

Hi, I have no problem adding a pie chart here: https://openbuilding.ca/tools/building-sankey/, but when I try to call the type of chart ‘sankey’ – I don’t appear to be calling the right script. Here there is a Charts.js community maintained chart option called ‘Sankey’ https://github.com/kurkle/chartjs-chart-sankey – how is it that I can call to display this chart in the canvas? I am pretty sure this is not doing it (even if it doesn’t refer to my fieldnames yet).

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

Chart.register(SankeyController, Flow);

const chart = new Chart(ctx, {
type: 'sankey',
data: dataObject
});

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

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),
colorMode: 'gradient', // or 'from' or 'to'
/* 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
}]
},
});

Thanks in advance, Andy

• This topic was modified 10 months ago by andyro.

The page I need help with: [log in to see the link]