title: Fill between two lines Chartjs
body: <p>I want to draw a chart with 4 lines, with filling between 2 specific lines named Max and Min. The library I'm using is Javascript Chartjs.</p>
  <p>I have read the chart area doc (<a href="https://www.chartjs.org/docs/latest/charts/area.html" rel="nofollow noreferrer">https://www.chartjs.org/docs/latest/charts/area.html</a>) and this answer <a href="https://stackoverflow.com/a/45398867/10250051">https://stackoverflow.com/a/45398867/10250051</a></p>
  <p>However, the graph still fills the whole area under the Max line instead of stopping at the min line.</p>
  <pre><code>$(document).ready(function(){
    var ctx = document.getElementById('mixed-api').getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: [1,2,3,4,5,6,7],
            datasets: [
            
              {
                label: 'Median',
                data: [20, 20, 20, 20, 20, 20, 20],
                fill: false,
                borderColor: 'rgb(0, 0, 0)',
                tension: 0.1,
                //backgroundColor: 'rgba(255,193,8,0)'
              },
              {
                label: 'Min',
                data: [10, 10, 10, 10, 10, 10, 10],
                fill: false,
                borderColor: 'red',
                tension: 0.1,
                //backgroundColor: 'rgba(255,193,8,0)'
              },
              {
                label: 'Max',
                data: [30, 30, 30, 30, 30, 30, 30],
                fill: '-1',
                borderColor: 'red',
                tension: 0.1,
                backgroundColor: 'rgba(255,193,8,0.5)'
              },
              {
                label: 'Random',
                data: [5, 10, 15, 20, 25, 30, 35],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                //backgroundColor: 'rgba(255,193,8,0)'
              }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                      display: true,
                      labelString: 'Energy (kW)'
                    }
                }],
                xAxes: [{
                  scaleLabel: {
                    display: true,
                    labelString: 'Time'
                  }
                }],
                pointLabels: {
                  fontStyle: 'bold',
                },
                plugins: {
                          filler: {
                              propagate: false
                          }
                },
            }
        }
    });
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/1V8Ge.png" rel="nofollow noreferrer">Wrong graph</a></p>