I am trying to size a background image on a HighCharts line chart dynamically depending on the position of the top plot line. The image I am trying to size is the bell curve in the image below.

I can't set the height of the image as a static value because the size of the screen can change and the top plot line also changes over time.

At the moment I am setting the position of the plot lines with external functions like this:

plotLines: [
                value: upperControl3()}, {
                color: '#ccc',
                zIndex: 3,
                width: 1,
                label: {
                    text: '-2s',
                    x: 520,
                    y: 3
                }

The closest thing to the y value of the top plot line I have been able to find is a dataMax value but this stays the same on every chart load. I have been trying to overlay and size the image with a function at the end of the chart like this:

function(chart) { 

   console.log(chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis);

   var h = chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis.dataMax;

   var y = chart.yAxis[0].axisTitle.y + extra;

   // X, Y, Width, Height
   chart.renderer.image('images/bell.jpg', 60, y, 200, h).add();   

}

Is the any way to find the coordinates of a plot line in highcharts?

I am trying to size a background image on a HighCharts line chart dynamically depending on the position of the top plot line. The image I am trying to size is the bell curve in the image below.

I can't set the height of the image as a static value because the size of the screen can change and the top plot line also changes over time.

At the moment I am setting the position of the plot lines with external functions like this:

plotLines: [
                value: upperControl3()}, {
                color: '#ccc',
                zIndex: 3,
                width: 1,
                label: {
                    text: '-2s',
                    x: 520,
                    y: 3
                }

The closest thing to the y value of the top plot line I have been able to find is a dataMax value but this stays the same on every chart load. I have been trying to overlay and size the image with a function at the end of the chart like this:

function(chart) { 

   console.log(chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis);

   var h = chart.yAxis[0].plotLinesAndBands[7].axis.plotLinesAndBands[0].axis.dataMax;

   var y = chart.yAxis[0].axisTitle.y + extra;

   // X, Y, Width, Height
   chart.renderer.image('images/bell.jpg', 60, y, 200, h).add();   

}

Is the any way to find the coordinates of a plot line in highcharts?

• javascript
• highcharts

• is the plot line fixed at some particular value on the yAxis or does it change it dynamically. Do you maintain the yAxis Value? – Strikers Commented Mar 6, 2014 at 10:05

2 Answers 2

You can use plotLinesAndBands object, where plotlines are kept. In the options you have value, whcih can be translated into pixels value by toPixels function.

var $button = $('#button'),
    $report = $('#report'),
    chart = $('#container').highcharts();

$button.click(function () {
    chart.xAxis[0].addPlotLine({
        value: 5.5,
        color: 'red',
        width: 2,
        id: 'plot-line-1'
    });

    var plotline = chart.xAxis[0].plotLinesAndBands[0];

    $report.html('Value: ' + plotline.options.value + ' Pixels: ' + chart.xAxis[0].toPixels(plotline.options.value));
});

http://jsfiddle/HhP39/1/

If you know which plot line (by index) it is, you can do this:

chart.yAxis[0].plotLinesAndBands[0].options.value

Of course, you need to make sure your data is actually normally distributed, or else that normal curve means nothing :)

And zero-bounded data is not usually normally distributed.