Chartjs: Overlap of color fill between 2 line series react chartjs

Question

while filling the color between 2 line series the fill color overlaps the point.

https://codesandbox.io/s/react-chartjs-2-line-chart-example-forked-5ruj86

I having this issue in version 3.6.0.

Answer 1

Just add order property to the first dataset. Documentation

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
      color: "#008484",
      backgroundColor: "#A5E1D2",
      pointBorderColor: "#007B5E",
      pointBackgroundColor: "#ffffff",
      borderColor: "#008484",
      fill: 1,
      borderWidth: 3,
      pointRadius: 5,
      pointHoverRadius: 5,
      pointBorderRadius: 5,
      order: 1
    },
    {
      data: [800000, 700000, 600000, 550000, 500000, 450000, 400000],
      color: "#002E2E",
      backgroundColor: "#A5E1D2",
      pointBorderColor: "#002E2E",
      pointBackgroundColor: "#ffffff",
      borderColor: "#002E2E",
      fill: 1,
      borderWidth: 3,
      pointRadius: 5,
      pointHoverRadius: 5,
      pointBorderRadius: 5
    }
  ]
};

Checkout the codesandbox