I've attached a picture of the behavior I'm trying to achieve.
What I've done:
Added several datapoints and listappends. Gave some of the datapoints the same DataSeriesName (e.g. "01"). Added a ColumnChart and set StackingType to Stacked. Relevant parts of HighchartsJSON:
chart: { type: 'waterfall', }, yAxis: { gridLineWidth: 0, labels: { enabled: false } }, plotOptions: { series: { borderWidth: 0, } }, legend: { enabled: false },
What i get as a result: https://i.imgur.com/735DKuG.png
They don't stack and instead go next to each other in the wrong order and with odd formatting.
Hi osacc,
you are probably using the column chart widget of outsystems, and then add extra json to change type to waterfall.
Problem is that outsystems widget generates following :
plotOptions: { column: { stacking: 'normal', stickyTracking: false, borderWidth: 0 } },
this is only for column type, so you still have to add stacking normal for waterfall type in your json
Dorine Boudry wrote:
Kilian Hekhuis wrote:
Check the JSON that is produced by looking at the page source, and compare that to the JSON in a Highcharts chart example that works.
Thanks so much guys! I wish I could mark both these as solutions. Working great now.
Also thanks for the heads-up Kilian, tbqh if you hadn't mentioned it I probably wouldn't have noticed ><
Hi Kilian I've looked at the source, apparently instead of 4 points in every series, I have 8:
series: [ { name: 'Late', data: [ {y:1}, {y:1}, {y:1}, {y:1}, {y:null}, {y:null}, {y:null}, {y:null} ], color: outsystems.chartColors [ 1 % outsystems.chartColors.length ] }, { name: 'On time', data: [ {y:null}, {y:null}, {y:null}, {y:null}, {y:3}, {y:1}, {y:2}, {y:6} ], color: outsystems.chartColors[ 0 % outsystems.chartColors.length ] } ]
Which is odd, since I only ever add 4 points to each of the 2 series. But apparently they do stack, only they are on top of (or under) zero-value bars?
Edit: So the datapoints need to be mirrored too? Didn't realize that. Once I renamed the points that need to be stacked to the same names they started stacking.
Edit 2: But they still don't stack when configured to waterfall (through HCJason). Darn it!
if you get it working, I'm interested to see result !
On another forum post I was trying to do something similar, maybe you could use that as a fallback if you can't get waterfall to work.
Happy coding,
Dorine
I think what happens is that because you have two series, the Platform tries to make sure both series have the same series, and adds empty ones for those "missing". It's a common problem (at least I've seen questions on the forum before), the solution to which is making sure you have a y value (even if 0) for every x value.
The solution does work for regular column charts, but doesn't seem to work for waterfall column charts.
Here's what I get with regular ones:
https://i.imgur.com/Bp8rwdA.png
And here's what I get as soon as I add
chart: { type: 'waterfall', },
to HighchartsJSON:
https://i.imgur.com/fhHZy5E.png
Is there anything that can be done about this? I've looked at this fiddle:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/waterfall-stacked/
Doesn't seem too different structurally from mine.
Also, OutSystems 11 uses Highcharts 6.1.4, which has a bug that displays guide lines for each series:
I don't think there's a workaround for that.
You're welcome osacc, happy coding!