Highcharts plotLines with multiple xAxis and yAxis

Question

I have a chart with multiple xAxis and yAxis . I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle . Click on All to see what I mean.

The plotLine on the first axis goes to the second axis as well. How could I stop it?

Answer 1

There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis . So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.

yAxis: [{
    title: {
        text: 'OHLC'
    },
    height: 200,
    lineWidth: 2,
    xAxis: 0,
}, {
    title: {
        text: 'Volume'
    },
    top: 300,
    height: 100,
    offset: 0,
    lineWidth: 2,
    xAxis: 1,
}, {
    title: {
        text: 'Other data panel'
    },
    top: 300,
    height: 100,
    offset: 0,
    lineWidth: 2,
    opposite: true,
    xAxis: 1,
}]

Updated Fiddle with each plotline only on its corresponding pane.

Note that the ability to define related axes appears to be undocumented in the API .