I want to highlight specific data point (Like a green circle) in series data graph. It should be a static/permanent highlight point, independent of mouse hover. For example, need to highlight peak point of all data points in a graph. I'm expecting a way to use x, y coordinates to inform dygraph to highlight specific data point.
You can use the underlayCallback option for this, which allows you to draw on the base canvas of the graph.
The example below is quickly extracted from a much more complex example I have - hopefully it's close enough to working to give you the idea:
To highlight the point x = 5, y = 17
graph_options.underlayCallback = function(canvas, area, g) {
// Convert data co-ordinates to canvas co-ordinates
var xPoint = g.toDomXCoord(5);
var yPoint = g.toDomYCoord(17);
// Draw a red circle
canvas.fillStyle = 'rgba(255, 0, 0, 1)';
canvas.beginPath();
canvas.arc(xPoint, yPoint, 20, 0, 2 * Math.PI, false);
canvas.fill();
}
The above will draw a big red circle (radius 20) at the desired data point, and the "real" data point will be drawn over the top of it and behave like any other. This technique works quickly enough to have many highlighted points but not particularly slow things down.