Changing stack order

[dpanster]

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.

[kurkle]

This would probably be quite useful feature and should not be too hard to implement.
I think that's all that would need to be altered (in addition to reading the options):

chartjs-chart-sankey/src/layout.js

Lines 148 to 161 in 4ad829f

	export function sortFlows(nodeArray) {
	nodeArray.forEach(node => {
	let addY = 0;
	node.from.sort((a, b) => (a.node.y + a.node.out / 2) - (b.node.y + b.node.out / 2)).forEach(flow => {
	flow.addY = addY;
	addY += flow.flow;
	});
	addY = 0;
	node.to.sort((a, b) => (a.node.y + a.node.in / 2) - (b.node.y + b.node.in / 2)).forEach(flow => {
	flow.addY = addY;
	addY += flow.flow;
	});
	});
	}

Btw: Very cool library. Good work.

Thanks ❤️

[kurkle]

No, I'm actually wrong, its not that simple.

The current layout process starts by finding the largest node (bar). And that is placed at y=0. Then it starts iterating the flows left and right, ordering by node count behind each flow. Finally it places anything that was not yet placed in similar manner. After bars are placed, flows from/to each bar are ordered by the above sortFlows.

I think it would be better and easier to implement another layout mode for this.

[dpanster]

Thanks for your quick response and for trying to implement this feature. Have a nice day.

[musicaldoctor]

+1 (I think)

We're doing this sankey chart on COVID-19 to track counties and their risk tiers through lockdowns:

And we're not being able to make sure the green bar always stays on top on the fourth iteration, and make sure we control the order of all those stacks on each iteration. Also, can't figure out how to change labels (without changing the JSON source file that feeds the chart).

[kurkle]

Initial implementation released in v0.3.0

// the y-order of nodes, smaller = higher
var priority = {
  Oil: 1,
  'Narural Gas': 2,
  Coal: 3,
  'Fossil Fuels': 1,
  Electricity: 2,
  Energy: 1
};

[musicaldoctor]

awesome! is it possible to hide those labels or change them through some sort of callback? if so, how? thanks

EDIT: and also, is it possible to remover that black border from the stacks?

[kurkle]

@musicaldoctor added labels (similar to priority), borderWidth and borderColor. These are released in v0.3.2.

Edit: Forgot to mention nodeWidth. This one is not tested though :). Default is 10.

[dpanster]

Well done. Thank You :)