CODEWITHSUNDEEP
javascriptdygraphs
user2100194
user2100194

Reputation: 31

Dygraphs vertical line with label

I need to place a vertical line with a label on my dygraph like the National holiday line in this example - http://www.fusioncharts.com/dev/chart-attributes.html?chart=msline

I have searched google for about 2 hours and can't find any examples. Can someone shoot me an example or put me on the right track? Thanks.

Upvotes: 1

Views: 1503

Answers (1)

Selfish
Selfish

Reputation: 6190

Best practice today is to add highlighted region using underlay callback (example).

try specifying the "underlayCallback" option within your "new Dygraph()" call. Use HTML Canvas context to draw the line.

On creating your graph:

// Graph range on X axis:
var xMin=0, xMax=1;
// horizontal line Y value:
var yValue = 0.5;

new Dygraph(document.getElementById('garph'), data, {
    // Graph options
    underlayCallback: function(ctx, area, dygraph) {
        var xLeft =  dygraph.toDomCoords(Min, yValue);
        var xRight = dygraph.toDomCoords(Max, yValue);
        ctx.strokeStyle = 'black';
        ctx.beginPath();
        ctx.moveTo(xLeft[0],  xLeft[1] );
        ctx.lineTo(xRight[0], xRight[1]);
        ctx.closePath();
        ctx.stroke();
    }
});

Note this is a very general example, as you haven't shown your own code.

Upvotes: 2

Related Questions