[Solved]-How to change line segment color of a line graph in Chart.js?-Chart.js

it's now built into chart.js 3:

https://www.chartjs.org/docs/latest/samples/line/segments.html

you can extend the chart to redraw the segment of your choice with the different color.

preview

script

chart.types.line.extend({
    name: "linealt",
    draw: function () {
        chart.types.line.prototype.draw.apply(this, arguments);

        var index = 1;
        var datasetindex = 0;

        var hasvalue = function(item){
            return item.value !== null;
        },
        previouspoint = function (point, collection, index) {
            return chart.helpers.findpreviouswhere(collection, hasvalue, index) || point;
        };

        var ctx = this.chart.ctx;
        var dataset = this.datasets[datasetindex];
        var pointswithvalues = chart.helpers.where(dataset.points, hasvalue);
        ctx.strokestyle = 'red';
        ctx.linewidth = 3;
        ctx.beginpath();
        var point = dataset.points[index];
        ctx.moveto(point.x, point.y);
        point = dataset.points[index + 1];
        var previous = previouspoint(point, pointswithvalues, index + 1);
        ctx.beziercurveto(
            previous.controlpoints.outer.x,
            previous.controlpoints.outer.y,
            point.controlpoints.inner.x,
            point.controlpoints.inner.y,
            point.x,
            point.y
        );
        ctx.stroke();
    }
});

and

...
new chart(ctx).linealt(data);

fiddle - http://jsfiddle.net/021xvuhd/10/

here's a working example to do this in charts.js 2

https://jsfiddle.net/egamegadrive16/zjdwr4fh/

var ctx = document.getelementbyid('mychart').getcontext('2d');
//adding custom chart type
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);
    });
  }
});

var chart = new chart(ctx, {
    // the type of chart we want to create
    type: 'multicolorline',

    // the data for our dataset
    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],
            //first color is not important
            colors: ['', 'red', 'green', 'blue']
        }]
    },

    // configuration options go here
    options: {}
});

source: https://github.com/chartjs/chart.js/issues/4895#issuecomment-342747042