Highcharts - Diagonal Line X/y Axis

Is there any way of showing a 1:1 diagonal line in Highcharts? I am looking for a line which X and Y values always match. I know how to render a line in Highcharts using the render

Solution 1:

You can do it by detecting the setExtremes() event on you axes, and fire a function to get the axis extremes and draw a line. (or, in this case, I used the afterSetExtremes() function)

In my example I did it by using a line series. I assume you can adapt it to use the renderer since you've already used the renderer to draw the line initially.

functionredrawLine(chart) {
    var xExt = chart.xAxis[0].getExtremes();
    var yExt = chart.yAxis[0].getExtremes();

    chart.series[1].setData([
        {'x':xExt.min,'y':yExt.min},
        {'x':xExt.max,'y':yExt.max}
    ]);
}

Example:

• http://jsfiddle.net/jlbriggs/feLdzpux/

Of course, if your intent is to compare observed values to predicted values, then re-drawing the line when you zoom in is counter productive and misleading - the line should not move based on the zoom level - it should always be constant.