LineChart colored segmetns

by bairog

HTML

<div id="chartDiv"><canvas id="chart"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

JavaScript

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7"],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 51, 48, 56, 57, 40],
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgb(75, 192, 192)'
    }]
  },
  options: {
    fill: false,
    interaction: {
      intersect: false
    },
  },
  plugins: [{
    id: 'legendGradient',
    afterUpdate(chart) {
      const {
        legendHitBoxes,
        legendItems
      } = chart.legend;
      for (let i = 0; i < legendItems.length; i++) {
        const {top,left} = legendHitBoxes[i];
        const gradient = chart.ctx.createLinearGradient(left, top, left + 40, top);
        gradient.addColorStop(0.20, "#43dea6");
        gradient.addColorStop(0.20, "orange");
        gradient.addColorStop(0.40, "orange");
        gradient.addColorStop(0.40, "#ed7506");
        gradient.addColorStop(0.60, "#ed7506");
        gradient.addColorStop(0.60, "#e44269");
        gradient.addColorStop(0.80, "#e44269");
        gradient.addColorStop(0.80, "#c0c0c0");
        legendItems[i].fillStyle = gradient;
        legendItems[i].strokeStyle = 'transparent';
      }
    }
  }]
});