Help: draw multicolorline in line charts

[ayushsoni1010]

Before, I was using @2.9.3 version of chart.js
Now, I am using the latest version @3.7.0 of chart.js

As I know, the latest version has some newly added features and also have revamped the version.

In my case, multicolorline is not working due to version problem
I want the multicolorline based on the data coming through and also I am getting so many errors. So how do I draw color line in Line Chart

here is the code, which I was using before which is not working

// Extending ChartJS for multi-color line charts
Chart.defaults.multicolorLine = Chart.defaults.line;
Chart.controllers.multicolorLine = Chart.controllers.line.extend({
  draw: function (ease) {
    var startIndex = 0,
      meta = this.getMeta(),
      points = meta.data || [],
      colors = this.getDataset().colors,
      area = this.chart.chartArea,
      originalDatasets = meta.dataset._children.filter(function (data) {
        return !isNaN(data._view.y);
      });
    function _setColor(newColor, meta) {
      meta.dataset._view.borderColor = newColor;
    }
    if (!colors) {
      Chart.controllers.line.prototype.draw.call(this, ease);
      return;
    }
    for (var i = 2; i <= colors.length; i++) {
      if (colors[i - 1] !== colors[i]) {
        _setColor(colors[i - 1], meta);
        meta.dataset._children = originalDatasets.slice(startIndex, i);
        meta.dataset.draw();
        startIndex = i - 1;
      }
    }
    meta.dataset._children = originalDatasets.slice(startIndex);
    meta.dataset.draw();
    meta.dataset._children = originalDatasets;
    points.forEach(function (point) {
      point.draw(area);
    });
  },
});

This is how I am drawing this particular line color in yellow based on the data, the rest it is in blue color

@LeeLenaleee Can you please help me with this, how to do it according to the latest version

[kurkle]

You can use segments instead:
https://www.chartjs.org/docs/latest/samples/line/segments.html

[ayushsoni1010]

I had also tried Line Segment Styling but As of now, I have done this manually, I have to do it according to data, I am not getting how should I do it.

here is the code for it
functions

    skipped(ctx, value) {
      return ctx.p0.skip || ctx.p1.skip ? value : undefined;
    },
    down(ctx, value) {
      return ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
    },

    segment: {
      borderColor: (ctx) => {
        return (
          this.skipped(ctx, "rgb(255,0,0)") ||
          this.down(ctx, "rgb(252, 152, 3)")
        );
      },
    },   

This is not what I want in the chart, I want the colors like the above image, how should I do

[kurkle]

You need to write the rule as a function. Obviously you don't want to color the lines going down by yellow.
You can use index, value, coordinates etc.

Maybe your rule is something like:

    myRule(ctx, value) {
      return ctx.p0.index > 10 && ctx.p1.index < 20 ? value : undefined;
    },

    borderColor: "rgb(255,0,0)"), // the default color when segment rule returns undefined
    segment: {
      borderColor: (ctx) => this.myRule(ctx, "rgb(252, 152, 3)"),
    },

[ayushsoni1010]

Cool, got it
Thanks :)