Chartjs-Fill between two lines Chartjs

by

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>

Leave a comment