Question

I’m trying to plot some straight lines over my chart and have gotten most of the way there, but am now stuck with the offsets. The red lines below are supposed to draw a line between two markers, but as you can see, they’re high and left.

I was expecting plotX and plotY to sort this out for me, but I’m missing something. There are four series in the chart: the green, the blue, the red triangles, and the red triangle-downs. I want to draw a line linking the red triangles (3rd series) and the red triangle-downs (4th series). I’m currently doing it by a callback which loops over series three and adds a path using plotX and plotY.

It currently looks something like this, but I’m open to better ways.

    function(){
        var chart = this;
        $.each(chart.series[2].data, function(index, value){
            startX = chart.series[2].data[index].plotX;
            startY = chart.series[2].data[index].plotY;
            endX = chart.series[3].data[index].plotX
            endY = chart.series[3].data[index].plotY
            chart.renderer.path(['M', startX, startY, 'L', endX, endY])
                    .attr({ 'stroke-width': 2, stroke: 'red' })
                    .add();
            console.log(index, startX, startY, endX, endY);
        })
    });

The axis and everything else look something like:

$(document).ready(function () {
    chart1 = new Highcharts.StockChart({
        chart:{
            renderTo:'container'
        },
        yAxis:[
            { // Leader yAxis
                labels:{
                    formatter:function () { return "$" + this.value.toFixed(2); },
                    style:{ color:'green' }
                },
                title:{
                    text:'Leader',
                    style:{ color:'green' }
                }
            },
            { // Follower yAxis
                title:{
                    text:'Follower',
                    style:{ color:'#4572A7' }
                },
                labels:{
                    formatter: function () { return "$" + this.value.toFixed(2); },
                    style: { color:'#4572A7' }
                },
                opposite: true
            }],
        series:[
            {
                type: 'line',
                name: 'Buyer Moving Average',
                data: buyer,
                color: 'green',
                yAxis: 1
            },{
                type:'line',
                name:'Data',
                data: equity,
                color: "#4572A7",
                yAxis: 0
            },{
                type: 'scatter',
                name: 'Buys',
                data: buys,
                color: 'red',
                marker: { symbol: "triangle" },
                yAxis: 0
            },{
                type:'scatter',
                name:'Sells',
                data: [{{ sells }}],
                color: 'red',
                marker: { symbol: "triangle-down" },
                yAxis: 0
            }
        ]

Answer 1

Funny how being forced to turn a problem into a question helps me straighten out my thoughts and frustrations enough to find an answer for myself…

The plotX and plotY attributes don’t take into account the labelling and whatever else that the axes introduce, so it’s just a matter of finding the offset they create and adding it in:

     function(){
        var chart = this;
        xoffset = chart.series[2].xAxis.left;
        yoffset = chart.series[2].xAxis.top;
        $.each(chart.series[2].data, function(index, value){
            startX = chart.series[2].data[index].plotX + xoffset;
            startY = chart.series[2].data[index].plotY + yoffset;
            endX = chart.series[3].data[index].plotX + xoffset;
            endY = chart.series[3].data[index].plotY + yoffset;
            chart.renderer.path(['M', startX, startY, 'L', endX, endY])
                    .attr({ 'stroke-width': 2, stroke: 'red' })
                    .add();
            console.log(index, chart.series[2].xAxis.left, startX, startY, endX, endY);
        }