JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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 || [],
			defaultBorderColor=  this.getDataset().borderColor,
      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;
    }

    for (var i = 0; i <= points.length; i++) {
				
				if(i==points.length){
				meta.dataset._children = originalDatasets.slice(startIndex, i);

				_setColor('transparent', meta) ;
				}else{
				_setColor(defaultBorderColor, meta) ;
				}
        meta.dataset.draw();
        startIndex = i - 1;		
				     
    }
meta.dataset.draw();
    /*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: [{
						fill: false,
            label: "My First dataset",
            borderColor: 'pink',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

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