Stacked area draws all the way to the bottom

[tannerlinsley]

I'm not sure if there is a way to fix this, or if it's a use case for anyone else, but when using transparency in stacked area, the colored blocks go all the way to the axis, which compounds and tints the the stack underneath it.

[amir-hadzic]

Hello @etimberg, do you know if any work has been started on this? Is this planned for 2.6 maybe?

[simonbrunel]

@amir-hadzic I started a plugin for a similar feature, I don't know if that can help you since you need to specify the filled areas. I can certainly add an "auto" config that determine these areas based on the stacked state of the chart. I have a local repo for this plugin and was planing to publish it as an official plugin if that sounds interesting.

[amir-hadzic]

@simonbrunel: yes, that could work. I'm not sure how well this works with charts that have mixed dataset types (bar and area for example), and that auto config would be very helpful.

This is a blocker for us so I'm trying to resolve it asap. I'm willing to work on it, but would need some guidance. Do you think that this would be easier solved by a plugin instead of changing Chart.js internals?

[simonbrunel]

It could live in the lib since it looks more like a bug fix, though I'm not sure it's an easy one to fix because filling is done at the line element level (so you don't have access to the previous dataset line). Ideally, we should move the filling step out of the element and do it in the controller.

So maybe the plugin approach is the easiest way to workaround your issue.

[amir-hadzic]

Thanks @simonbrunel, I'll look into the plugin you linked above, and try to adjust it for this. I'll post here if I come up with something.

[amir-hadzic]

Ok so I've adjusted the plugin to serve as a workaround for this issue: https://gist.github.com/amir-hadzic/a93abcdcbb3978499b287e4160a08095. Edit: line datasets with stackFill (instead of fill) set to true will be filled from one stackFill dataset to the other instead of drawing to the bottom.

I really hope we can fix this in Chart.js internals as the above isn't really ideal.

For example the fill overlaps the line strokes, and the line points when hovering are drawn behind the fills. @simonbrunel: please let me know if you have any ideas on how to improve this but looking at plugin methods I don't see a way to draw the fills before drawing each individual dataset. There's only beforeDatasetsDraw and afterDatasetsDraw which are called before/after all datasets are drawn.