0

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.

I have read the chart area doc (https://www.chartjs.org/docs/latest/charts/area.html) and this answer https://stackoverflow.com/a/45398867/10250051

However, the graph still fills the whole area under the Max line instead of stopping at the min line.

$(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
                        }
              },
          }
      }
  });
});

Wrong graph

VEvergarden
  • 105
  • 11

1 Answers1

1

Your code is working fine, only thing I can think of is that you are using an outdated version of the lib, with the latest V2 (2.9.4) release and V3 release its working as intended, see examples:

V2.9.4

var ctx = document.getElementById('chartJSContainer').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
        }
      },
    }
  }
});
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

V3:

var ctx = document.getElementById('chartJSContainer').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: {
      y: {
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Energy (kW)'
        }
      },
      x: {
        scaleLabel: {
          display: true,
          labelString: 'Time'
        }
      },

    },
    pointLabels: {
      fontStyle: 'bold',
    },
    plugins: {
      filler: {
        propagate: false
      }
    },
  }
});
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69