How to draw SVG shapes at a specific position (dependent on the xAxis)

Question

I have a chart in Highcharts (to be more specific: it's a Highstocks chart, candlesticks type) and now I want to add some SVG shapes to it.

I know there is this renderer object, but it only accepts x- and y-coordinates relative to the canvas.

What I need is to add some shapes at a specific TIME (xAxis), so I either need it to accept x/y vales as the chart coordinates (not the canvas coordinates) (which I clearly doubt is possible) or we need to get the x/y-canvas-position of a specific point inside the chart.

Is there any way to do this?

Answer 1

You can extend existing symbols via

$.extend(Highcharts.Renderer.prototype.symbols, {
    newSymbol: function() {
        return [//SVG path as Array];
    }
});

Here is a fiddle demonstrating that

Answer 2

To draw SVG shape and move it with the zoom , there is two ways i used the first one just take it as an idea and see if you can do it better than me , second way always works

the first way

Get the x coordinate for this shape : as you know highstock use unix time , so lets say you want to add your shape at X data = 1326844540000 , now get the x position for 1326844540000 according to series[i] i will assume that you have one series so use series[0] , here is how you get the x-coor :

               $.each(chart.series[0].points, function(index,value){
                         if(value.category == 1326847170000 ) 
                         console.log(this.plotX) ;
                 });

now use .append() to add your SVG :

   var myrect = $(".highcharts-series-group") ; 
    $(myrect).append(<your svg goes here with 
            x ="you have it from the previous code " y="")

this code will go inside (xAxis - events - setExtremes ) And o nchart load as well

the recommended way

the recommended and guranteed way is to create a flag give it an id and then you can do what ever you want by editing the attr() of this flag

UPDATE

• if you add a flag to your chart flags by default transform when zooming so you don't need to be worry about moving your element every time rangeselector or zoom change .
• if you give your flag id it will be easily selected using jquery
• see this :
• the fourth path in the highlighted <g> tag is what you will edit to draw what ever you want