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/
Source:stackexchange.com