javascript - Highcharts manually added svg elements not following stock graph on pan -

i have click event in highstock / highchart graph, have added custom drawing tools such adding lines , text. here code that

$('#stockchart-canvas-container').on('click','svg',function(e){         var svg = $('#stockchart-canvas-container svg')[0];         var point= svg.createsvgpoint(), svgp         point.x = e.clientx         point.y = e.clienty         svgp = point.matrixtransform(svg.getscreenctm().inverse());          if(user.selected_tool=='line'){             if(user.previous_x == undefined && user.previous_y == undefined) {                 user.current_x = svgp.x                 user.current_y = svgp.y                 user.previous_x = 0                 user.previous_y = 0                 $('#stockchart-canvas-container').on('mousemove','svg',function(ev){                     var svg2 = $('#stockchart-canvas-container svg')[0];                     var point2= svg.createsvgpoint(), svgp2                     point2.x = ev.clientx                     point2.y = ev.clienty                     svgp2 = point2.matrixtransform(svg2.getscreenctm().inverse());                     $('#temp-line').remove()                     stockchart.renderer.path(['m',                                         user.current_x,                                         user.current_y,                                         'l',                                         svgp2.x,                                         svgp2.y,                                         'z',                                         ]).attr({'stroke-width':2,stroke:'#ccc',id:'temp-line'}).add(stockchart.seriesgroup)                 })             } else {                 $('#stockchart-canvas-container').off('mousemove')                 stockchart.renderer.path(['m',                                         user.current_x,                                         user.current_y,                                         'l',                                         svgp.x,                                         svgp.y,                                         'z'                                         ]).attr({'stroke-width':2,stroke:'#ccc'}).add(stockchart.seriesgroup)                 user.current_x=0                 user.current_y=0                 user.previous_x=undefined                 user.previous_y=undefined             }         } else if (user.selected_tool=='text') {             $('#insert-text-modal').modal('show')             $('#accept-insert-text').on('click',function(){                if($('#text-input').val()){                 stockchart.renderer.text($('#text-input').val(),svgp.x,svgp.y).add(stockchart.seriesgroup)                    }                $(this).off('click')                $('#insert-text-modal').modal('hide')             })         }     }) 

my problem want line , text follow stock graph pan or zoom graph. ideas how can this?

you have preserve coordinate values @ moment text/line drawn - coordinates in terms of axes. on each chart redraw, need reposition line/text - have calculate new pixel position (which can calculated via axis.topixels) , set new values line/text. text need calculate 1 point, path element need recalculate each segment.

see code below:

function calculating pixels values , values pixels - includes basic logic hiding text if overflows chart's plot area - should adjusted depending on needs.

function translate (x, y, chart, topixels) {   const xaxis = chart.xaxis[0]   const yaxis = chart.yaxis[0]   let tx, ty, hide    if (topixels) {     tx = xaxis.topixels(x)     ty = yaxis.topixels(y)      if (tx < xaxis.left || tx > xaxis.left + xaxis.width) {        hide = true      } else if (!hide && (ty < yaxis.top || ty > yaxis.top + yaxis.height)) {        hide = true      }       if (hide) {        tx = -9e7        ty = -9e7      }   } else {     tx = xaxis.tovalue(x)     ty = yaxis.tovalue(y)   }        return { x: tx, y: ty } } 

on chart click - adds text , keep in array, on chart redraw r - repositions items.

 chart: {    events: {      load: function () {        this.drawnitems = []      },      click: function (e) {        const { x, y } = e        const text = this.renderer.text('custom text', x, y).add()        text.point = translate(x, y, this)        this.drawnitems.push(text)      },      redraw: function () {        this.drawnitems.foreach(item => {          const { x, y } = item.point          item.attr(translate(x, y, this, true))        })      }    }  }, 

live example: http://jsfiddle.net/nsf67ro6/