[Chartjs]-How to create a line chart with two line, with one of them being filled, and the other staying on the foreground of the filled line?

by

1👍

✅

This seems like a bug in chart.js itself.
You have 3 options:

  • wait until it is fixed within chart.js itself
  • write your own custom plugin that does the filling
  • make use of the order property so the blue line gets drawn on the canvas after the red one like so:
var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'red',
        borderColor: 'red',
        fill: true,
        order: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'blue',
        order: 0
      }
    ]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

EDIT:
After looking at the source code it seems indeed like its a bug in chart.js, it does not check if fill has been set to false so it will always fill with the non default modes. Will put in a fix for this so it will be fixed in version 3.8.1

Leave a comment