Chart.js: 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.

[simonbrunel]

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

[amir-hadzic]

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.

[etimberg]

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

[rdemeyer]

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!

[simonbrunel]

@amir-hadzic that's right! maybe we need new plugin hooks (before/afterDatasetDraw), called for each dataset? we would be able to draw fill before stroke of the line dataset but after the bar dataset has been fully drawn.

@etimberg the fill logic seems now out of the scope of the line element so I would totally remove it from this class. I don't know who should be responsible of the fill? the dataset controller? a (built-in or external) plugin (+1)?

I'm still working on the chartjs-plugin-filler, so if you like the plugin approach, I can try to make it part of Chart.js instead to have it external. It would require the new plugin hooks and we could start to store that kind of built-in plugins in src/plugins/* (in this case src/plugins/filler.js).

Right now it's done like that:

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    plugins: {
      filler: {
        areas: [{
          from: 0,
          to: 2
        }, {
          from: 3,
          to: 'origin'     // or 'start' (left or bottom) or 'end' (right or top)
        }]
      }
    }
  }
});

But could be directly in data (undecided what is the best), in this case I would only use fill:

var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        fill: true, // false: no fill
                    // true: same as 'origin'
                    // number: index of the dataset
                    // string: 'start'|'end'|'origin'|'#dataset-id'
    }]
  }
});

We could also introduce dataset id and so have fill: '#my_dataset_id'.

[etimberg]

@simonbrunel lets explore the plugin option and see how it goes

[etimberg]

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

[simonbrunel]

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 :)

[piotrkulpinski]

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?

[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/

[shelagh-lewins-ucl]

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?

[hwinning]

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?

[nielskrijger]

have you ever found a solution @hwinning ?

[diamond95]

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

[brootle]

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

[kurkle]

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)

[brootle]

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!