Chartjs-Can I plot random points on a chart.js or Google Charts chart?

2๐Ÿ‘

โœ…

If your scatter points will come within the area that you have already drawn you can do this in the onAnimationComplete callback

var scatterPoints = [
    { x: 2, y: 15 },
    { x: 5.5, y: 20 }
]

var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    // disable tooltips so that a redraw won't wipe out our scatter points
    // alternatively we could extend the chart and move the scatter point drawing into the draw override
    showTooltips: false,
    onAnimationComplete: function () {
        var self = this;
        var ctx = self.chart.ctx;

        // style
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "red";

        scatterPoints.forEach(function (scatterPoint) {
            ctx.fillText("x",
                // adjust x axis value if the x axis does not start at 0

                self.scale.calculateX(scatterPoint.x - Number(self.scale.xLabels[0])),
                self.scale.calculateY(scatterPoint.y));
        })
    }
});

If you are only going to have integral values for x (i.e. ones that are already labels) you can do it in a simpler way โ€“ be adding a third series with the line color set to transparent.


Fiddle โ€“ http://jsfiddle.net/sucfguw1/


enter image description here

Leave a comment