Need assistance with changing the color of graph data points
https://i.sstatic.net/QGJBv.png
Here is my JavaScript code snippet
I have successfully created a graph using chart.js. However, I now want to differentiate data points by displaying different colors based on whether they are above or below the average value. This will help users easily interpret the information displayed on the graph.
var label = [];
var dataset_data = [];
$scope.number = details.number;
var total_picked = 0;
angular.forEach(details.picked_details,function(value,key)
{
label.push("Pair with "+value.paired_with);
dataset_data.push(value.no_of_times);
total_picked+=value.no_of_times;
})
var data = {
labels: label,
datasets: [{
data: dataset_data
}]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;
for (var i = lines.length; --i >= 0;) {
var xStart = Math.round(this.scale.xScalePaddingLeft);
var linePositionY = this.scale.calculateY(lines[i].value);
//this.chart.ctx.fillStyle = lines[i].color ? lines[i].color : this.scale.textColor;
this.chart.ctx.fillStyle = "green";
this.chart.ctx.font = this.scale.font;
this.chart.ctx.textAlign = "left";
this.chart.ctx.textBaseline = "top";
if (this.scale.showLabels && lines[i].label) {
this.chart.ctx.fillText(lines[i].label, xStart + 20, linePositionY);
}
this.chart.ctx.lineWidth = this.scale.gridLineWidth;
this.chart.ctx.strokeStyle = lines[i].color ? lines[i].color : this.scale.gridLineColor;
//this.chart.ctx.strokeStyle = "green";
if (this.scale.showHorizontalLines) {
this.chart.ctx.beginPath();**strong text**
this.chart.ctx.moveTo(xStart, linePositionY);
this.chart.ctx.lineTo(this.scale.width, linePositionY);
this.chart.ctx.stroke();
this.chart.ctx.closePath();
}
this.chart.ctx.lineWidth = this.lineWidth;
this.chart.ctx.strokeStyle = this.lineColor;
//this.chart.ctx.strokeStyle = "yellow";
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(xStart - 5, linePositionY);
this.chart.ctx.lineTo(xStart, linePositionY);
this.chart.ctx.stroke();
this.chart.ctx.closePath();
}
}
});
new Chart(ctx).LineWithLine(data, {
datasetFill : false,
limitLines: [
{
value: parseInt(total_picked/47),
label: "Average Pair of "+details.number+" With Other is "+parseInt(total_picked/47),
color: '#FF0000'
}
],
});