Stacked area draws all the way to the bottom

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.

@etimberg

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

@amir-hadzic

@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.

@simonbrunel

@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?

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.

@simonbrunel

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.

@simonbrunel

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.

You can certainly hook beforeDatasetsDraw instead of afterDatasetsDraw to get fills drawn before lines & points?

I can but if I have a chart with line dataset and bars dataset, where the bars are behind the line, then the fill will be drawn behind the bars instead of over them. I hope that makes sense.

My 2 cents on this. We already have different fill modes (not well documented, but they exist). For example you can set fill: true to go to the baseline (towards 0). But you can also do fill: 'top' and fill: 'bottom'.

I had envisioned something like fill: 'dataset' and then adding a second property something like fill-dataset

dataset: {
  fill: 'dataset' // we are filling to another dataset in the chart
  fill-dataset: 0 // we are filling to the dataset at index 0 in chart.data.datasets
}

In terms of implementation, right now the line that closes the area for filling simply looks at the fill property and goes back to that Y value at the right edge of the chart, and moves to the left. Code

What we could do in the fill to another dataset case, is that the controller could add the points of the dataset we are filling to and then the line just iterates those.

Upsides

Should be possible to test the line independently without a full chart
Allows filling to a custom spot easily just by changing how the return points are specified
Could refactor the current behaviour to use these points as well to simplify the drawing code

Downsides

The line element gets even more complex
What do we do if the fill dataset has gaps (NaN data)
Slower performance when filling to another dataset because we potentially double the number of lineTo calls

I'm also blocked by the same issue, which is clearly annoying. It makes "area chart" simply not usable in chartjs (look at the display with 5 series).

Hope it will get fixed soon! Thanks!

I like the idea of fill: Number or fill:#id to keep it simple

Finally implemented as an internal plugin: this is not a bug fix, so for backward compatibility, default config will generate the same result as the one in the ticket description . To "stack" fill areas, you need the following:

data: {
    datasets: [{
        fill: 'origin'  // explicitly fill the first dataset to the x axis
    }, {
        // no fill value, fallback to elements/line/fill
    }, {
        // ...
    }]
},
options: {
    elements: {
        line: {
            fill: '-1' // by default, fill lines to the previous dataset
        }
    },
    scales: {
        yAxes: [{
            stacked: true
        }]
    }
}

This feature will be released in v2.6, until then, you can build master by yourself:

git clone https://github.com/chartjs/Chart.js.git chartjs
cd chartjs
npm install
gulp build

Built files will be generated in the /dist folder. Any help beta testing this new feature will be very appreciated :)

@simonbrunel

Does anyone actually was able to make that work correctly?

I followed the description provided by @simonbrunel but the blue area still goes all the way down to the 0 point at Y Axis: https://jsfiddle.net/piotrkulpinski/xtco0k6d/1/

Any thoughts?

That's because you set fill: 'origin' on the second dataset, which means: fill all the way down to 0 :) Just remove it to get it work: https://jsfiddle.net/xtco0k6d/3/

I'm trying to get this to work with the charts-plugin-colorschemes, but I'm still seeing transparency on the fill:

https://jsfiddle.net/EverHopeful/dsb7xtcv/5/

Do you know if there is a way to fix this without hard coded colours?

data: {
    datasets: [{
        fill: 'origin'  // explicitly fill the first dataset to the x axis
    }, {
        // no fill value, fallback to elements/line/fill
    }, {
        // ...
    }]
},
options: {
    elements: {
        line: {
            fill: '-1' // by default, fill lines to the previous dataset
        }
    },
    scales: {
        yAxes: [{
            stacked: true
        }]
    }
}

This works beautifully until a you try negative data points; the overlap problem becomes stranger because a positive dataset will fill down to the negative dataset, through all the stacked datasets in between: https://jsfiddle.net/mh6kwyb3/
Is there a way to conditionally fill to previous dataset or origin?

@hwinning

have you ever found a solution @hwinning ?

@simonbrunel

That's because you set fill: 'origin' on the second dataset, which means: fill all the way down to 0 :) Just remove it to get it work: https://jsfiddle.net/xtco0k6d/3/

So what about if that graph is changed to bar? I tried following: https://jsfiddle.net/czbg0hfm/ but its not working correctly.. @simonbrunel

It's late 2020 now... Any solution to the problem? It's funny that when transparent yellow and purple mix and yellow is turns into orange, or yellow turns into green when mixing with blue... this makes it impossible to build stacked area charts...

It's late 2020 now... Any solution to the problem? It's funny that when transparent yellow and purple mix and yellow is turns into orange, or yellow turns into green when mixing with blue... this makes it impossible to build stacked area charts...

try a recent version (v3)

It's late 2020 now... Any solution to the problem? It's funny that when transparent yellow and purple mix and yellow is turns into orange, or yellow turns into green when mixing with blue... this makes it impossible to build stacked area charts...

try a recent version (v3)

The latest production ready version of ChartJS is 2.9.4 as far as I know, v3 is still beta. Are you sure that this problem is solved in there? Can you post a link for working example? Thanks!

Navigation Menu

Repository navigation

Stacked area draws all the way to the bottom #2380

Upsides

Downsides

2 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Stacked area draws all the way to the bottom #2380

Description

Activity

amir-hadzic commented on Feb 7, 2017

simonbrunel commented on Feb 7, 2017

amir-hadzic commented on Feb 7, 2017

simonbrunel commented on Feb 7, 2017

amir-hadzic commented on Feb 7, 2017

amir-hadzic commented on Feb 8, 2017

simonbrunel commented on Feb 8, 2017

amir-hadzic commented on Feb 8, 2017

etimberg commented on Feb 8, 2017

Upsides

Downsides

rdemeyer commented on Feb 15, 2017

2 remaining items

etimberg commented on Feb 15, 2017

simonbrunel commented on Mar 18, 2017

piotrkulpinski commented on Jun 5, 2017

simonbrunel commented on Jun 5, 2017

shelagh-lewins-ucl commented on Jun 26, 2019

hwinning commented on Aug 17, 2019

nielskrijger commented on Dec 18, 2019

diamond95 commented on May 5, 2020

brootle commented on Oct 30, 2020

kurkle commented on Oct 30, 2020

brootle commented on Oct 30, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions