leeoniya
stacking demo of bars with lines improperly clips lines
Hi there!
First, thank you for the effort you've put into uPlot. It's a very impressive bit of kit.
The issue I'm running into pertains to drawing a chart with sets of series that use differing path types. I've experimented with the drawing order of each series and the data for each series, but I can't find a configuration that does not produce visual issues.
As a forewarning, I am using the stacked series plugin.
Example (using stacked series plugin):
const chartData = [[1553817600,1556578800,1559257200,1561676400,1572480000,1574985600,1577750400,1580428800,1582848000,1585609200,1588201200,1590706800,1593471600,1596150000,1598828400,1601420400],[68132,12102,23457,null,null,null,null,null,null,null,null,null,null,null,null,null],[31404,32061,36870,138926,29621,27995,25200,33596,36822,24411,34831,37553,38109,146347,79291,57954],[68132,12102,23457,null,null,null,null,null,null,null,null,null,null,null,null,null],[31404,32061,36870,138926,29621,27995,25200,33596,36822,24411,34831,37553,38109,146347,79291,57954]]
const chartOptions = {"width":773,"height":386.5,"series":[{},{"label":"Class A Shares","stroke":"#fc8764","spanGaps":true,"fill":"#fc8764","points":{"show":false}},{"label":"Class F Shares","stroke":"#ffb561","spanGaps":true,"fill":"#ffb561","points":{"show":false}},{"label":"Class L Shares","stroke":"#ff6b6b","spanGaps":true,"width":3},{"label":"Class Z Shares","stroke":"#7cd6fd","spanGaps":true,"width":3}],"axes":[{"space":70,"grid":{"show":false},"stroke":"#555b51","font":"12px inherit","gap":8},{"font":"12px inherit","stroke":"#555b51"}],"plugins":[{"hooks":{"setScale":[null],"setSeries":[null]}}],"scales":{"y":{}},"bands":[{"series":[2,1]},{"series":[3,2]},{"series":[4,3]}],"hooks":{"setSeries":[null]}}
This produces a graph that looks like this:
A few things I found interesting;
- The visual gap issue only occurs when there are one or more differing path styles
- The visual gap is only present on a line style series if it is preceded by a bar style series
- The issue only occurs when using the stacked series plugin.
Without stacked series plugin
When I draw different sets without using the stacked plugin (which I prefer), I don't get the visual gap issue, but my bar type series' can occlude each other visually which is also a problem. Is there a way I can work around this?
See below for example;
| Class F toggled on: | Class F toggled off: |
|---|---|
 |
 |
yes, the the band fill clipping works differently for bars than it does for lines, and if you mix them, then you get this result. you can modify the stacking plugin so that it still stacks the line series' values but excludes the line series from the bands definitions, which should prevent uPlot from trying to clip them using the bars clipping strategy. i think that will solve your issue.
Hey, thanks for the quick response.
I did make an attempt to prevent banding being applied to non-bar types but did not get much luck. It was the first thing I tried to do after I realised the issue comes from the stacking plugin.
If it's not too much trouble would you be able to whip up a quick demo/fiddle that covers this case? I'd be forever grateful! No pressure of course, I understand you're probably busy.
Cheers
yeah, it looks like there's a bit more involved here. i'm not sure when i'll get to doing this.
there needs to be a way to omit from band definitions without omitting from the data stacking itself:
https://github.com/leeoniya/uPlot/blob/c315b3b81aa2128240eaf2b1d186d20f9327801f/demos/stacked-series.html#L35
you can try adjusting the non-stacked variants by using a semi-transparent fill so the bars don't full occlude each other. you can additionaly define different bar widths and alignments for each series here:
https://github.com/leeoniya/uPlot/blob/c315b3b81aa2128240eaf2b1d186d20f9327801f/demos/stacked-series.html#L161-L162