Stacked area draws all the way to the bottom

2 thoughts on “Stacked area draws all the way to the bottom”

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

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

Comments are closed.