Chartjs-ChartJS incorrect plot when plotting multiple line charts in one graph

by

0👍

I followed your instructions and commented out the first two datasets. The result looks fine to me.

const chartData = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  datasets: [
    /*
    {
      label: "Set 1",
      data: [10, 20, null, 40, 30, null, 20, 40],
      borderColor: "#F00",
      fill: false,
      steppedLine: false,
      tension: 0,
      fillBetweenSet: 1,
      fillBetweenColor: "rgba(255,0,0, 0.2)"
    },
    {
      label: "Set 2",
      data: [60, 40, 10, 50, 60, null, 50, 20],
      borderColor: "#00F",
      fill: false,
      steppedLine: false,
      tension: 0.5
    },
    */
    {
      label: "Set 2",
      data: [40, 50, 30, 30, 20, null, 60, 40],
      borderColor: "#0D0",
      fill: false,
      steppedLine: false,
      tension: 0,
      fillBetweenSet: 1,
      fillBetweenColor: "rgba(5,5,255, 0.2)"
    }
  ]
};

var chartOptions = {
  responsive: true,
  title: {
    display: true,
    text: 'Demo Fill between lines'
  }
};

var chartDemo = new Chart(document.getElementById('demo'), {
  type: 'line',
  data: chartData,
  options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="demo" height="90"></canvas>

UPDATE

The problem lies in the fillBetweenLinesPlugin that simply doesn’t work correctly when only one line is drawn. This can easily be fixed by changing the condition in the for loop by adding datasets.length > 1 as follows.

for (var d = 0; datasets.length > 1 && d < datasets.length; d++) {
   ...
}

Leave a comment