[Solved]-Chartjs Line Color Between Two Points-Chart.js

I've been wanting to let everyone know a way for react chart.

import React from "react";
import { LineController } from 'chart.js';
import Chart from 'chart.js/auto';

class MultiLineController extends LineController {
  draw() {
    const ctx = this.chart.ctx;
    const meta = this.getMeta();
    const points = meta.data || [];
    const colors = this.getDataset().colors || [];
    const area = this.chart.chartArea;

    colors.forEach((color, idx) => {
      meta.dataset.options.borderColor = color;
      meta.dataset.draw(ctx, area, idx, 2);
    });
    meta.dataset.draw(ctx, area, colors.length, points.length - colors.length);
  }
}
MultiLineController.id = "multicolorLine";
MultiLineController.defaults = LineController.defaults;

Chart.register(MultiLineController);

export default function App() {
  React.useEffect(() => {
    const ctx = document.getElementById("line-chart").getContext("2d");
    window.lineChart = new Chart(ctx, {
      type: 'multicolorLine',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
          label: "My First dataset",
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45],
          colors: ['red', 'green', 'blue', 'yellow']
        }]
      },
      options: {}
    });

    return () => window.lineChart.destroy();
  }, []);

  return (
    <div style={{width: '100%', height: 300}}>
      <canvas id="line-chart" />
    </div>
  );
}

Here is screenshot of this chart. React Chart Component implemented by chart.js

In V3 you can make use of the segment option in the dataset to style specific line parts:

new Chart('myChart', {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    datasets: [{
      label: 'My Dataset',
      data: [101, 122, 103, 115, 95, 94, 100, 108, 112, 115, 119, 120, 109, 108, 105, 116, 117, 108, 109, 114],
      segment: {
        borderColor: (ctx) => {
          const xVal = ctx.p1.parsed.x;

          if (xVal <= 7) {
            return 'gray';
          } else if (xVal <= 15) {
            return 'red'
          } else {
            return 'blue'
          }
        },
      },
    }]
  },
  options: {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="myChart" height="70"></canvas>

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook to create a linear gradient through CanvasRenderingContext2D.createLinearGradient().

In the following example, the linear gradient is created from the colors defined in data.dataset.colors.

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterLayout: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var gradientStroke = ctx.createLinearGradient(xAxis.left, 0, xAxis.right, 0);
      var dataset = chart.data.datasets[0];
      dataset.colors.forEach((c, i) => {
        var stop = 1 / (dataset.colors.length - 1) * i;
        gradientStroke.addColorStop(stop, dataset.colors[i]);
      });
      dataset.backgroundColor = gradientStroke;
      dataset.borderColor = gradientStroke;
      dataset.pointBorderColor = gradientStroke;
      dataset.pointBackgroundColor = gradientStroke;
      dataset.pointHoverBorderColor = gradientStroke;
      dataset.pointHoverBackgroundColor = gradientStroke;
    }
  }],
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    datasets: [{
      label: 'My Dataset',
      data: [101, 122, 103, 115, 95, 94, 100, 108, 112, 115, 119, 120, 109, 108, 105, 116, 117, 108, 109, 114],
      fill: false,
      colors: ['gray', 'gray', 'gray', 'gray','gray', 'gray', 'red', 'red', 'red', 'red', 'red', 'red', 'red', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue']
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="70"></canvas>

Latest versions of ChartJS allow you to customize line segments individually, which can be used to change the color and also the style (dashed etc) of a specific segment.

const config = {
  type: 'line',
  data: {
    labels: Utils.months({count: 7}),
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, NaN, 48, 56, 57, 40],
      borderColor: 'rgb(75, 192, 192)',
      segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      }
    }]
  },
  options: genericOptions
};

See https://www.chartjs.org/docs/master/samples/line/segments.html for more info.