how to change color of dots in graph using chart.js

Question

want to change the graph dot point color

this is my js code

i had created a graph using chart.js but now i want to show different dot color in graph so that user can understand which value are more than average and which are not. how can i achieve that i am sending you my code

    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'
            }
        ],
    });

Answer 1

Refer to this issue. Basically, you can create an array of colors for pointBackgroundColor.

https://github.com/chartjs/Chart.js/issues/2670