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?

Question

I have the following chart:

How can I make sure that the the blue line isn't filled, but at the same time, stays on top of the filled red line?

Taking the line chart example from the documentation, I have tried playing around with the drawTime property, but as you can see, the blue line is on the foreground of the red one, but it is filled (I expect the blue line to be on the foreground, but not filled).

Here's what I have so far:

Data:

const data = {
  labels: generateLabels(),
  datasets: [
    {
      label: 'Dataset 1',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.red,
      backgroundColor: Utils.CHART_COLORS.red,
      fill: true
    },
    {
      label: 'Dataset 2',
      data: generateData(),
      borderColor: Utils.CHART_COLORS.blue,
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
      // changed `fill` propery from `true` to `false`
      fill: false
    }
  ]
};

Config:

const config = {
  type: 'line',
  data: data,
  options: {
    plugins: {
      filler: {
        propagate: false,
        // added `drawTime` property here
        drawTime: "beforeDraw",
      },
      title: {
        display: true,
        text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
      }
    },
    pointBackgroundColor: '#fff',
    radius: 10,
    interaction: {
      intersect: false,
    }
  },
};

Setup:

const inputs = {
  min: -100,
  max: 100,
  count: 8,
  decimals: 2,
  continuity: 1
};

const generateLabels = () => {
  return Utils.months({count: inputs.count});
};

Utils.srand(3);
const generateData = () => (Utils.numbers(inputs));

LeeLenalee · Accepted Answer · 2022-06-09T14:23:33.623

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

Thank you very much! I've used the `order` property and it works. Once the bugfix is merged, I'll use the `drawTime` property. — ryanzidago, Jun 09 '22 at 20:35

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?

1 Answers1