Setting Color to Specific Range of Datapoints - CanvasJS JavaScript Charts

Setting Color to Specific Range of Datapoints - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
		title: {
				text: "Setting Color to Specific Range of Datapoints"
		},
		data: [{
				type: "line",    
				dataPoints: dataGenerator(new Date("2017-10-20T12:00:00Z"), 100)
		}]
});
chart.render();

//setColorToDataPoints(chart, dataSeriesIndex, startX, endX, color);
setColorToDataPoints(chart, 0, new Date("2017-10-21T12:00:00Z"), new Date("2017-10-22T12:00:00Z"), "red");

function dataGenerator(startX, limit) {
		var y = 100;
		var points = [];
		for (var i = 0; i < limit; i += 1) {
				y += Math.round(Math.random() * 10 - 5);
				points.push({
						x: new Date(startX.getTime() + (i * 60 * 60 * 1000)),
						y: y
				});
		}
		return points;
}

function setColorToDataPoints(chart, dsIndex, startX, endX, color) {
		var dps = chart.data[dsIndex].dataPoints;
		var startIndex = findIndex(chart, dsIndex, startX);
		var endIndex = findIndex(chart, dsIndex, endX);
		for(var i = startIndex; i <= endIndex; i ++) {
				chart.data[dsIndex].dataPoints[i].lineColor = color;
				chart.data[dsIndex].dataPoints[i].color = color;
		}
		chart.render();
}

function findIndex(chart, dsIndex, xValue) {
		var index = 0;
		var dps = chart.data[dsIndex].dataPoints;
		for(var i = 0; i < dps.length; i++) {  
				if(dps[i].x.getTime() == xValue.getTime()) {     
					index = i;
				}
		}
		return index;
}