score:1

Accepted answer

Here is your solution :

var plotBox = point.renderer.plotBox;
var path = renderer.path(['M',point.cx+plotBox.x,point.cy+plotBox.y,'L',100,100])

In fact, your graphic does not start at 0,0 of your svg, it has an offset. You can find it in the renderer of every objects. Your graphic is contained into the plotBox.

I have updated your jsFiddle : http://jsfiddle.net/FsDks/

score:1

You can use plotX and plotY coordinades, kept in point object (not graphic) and add plotTop / plotLeft (spacing around chart).

var renderer = this.series.chart.renderer,
                                chart = this.series.chart,
                                point = this,
                                path;


                            path = renderer.path(['M',point.plotX + chart.plotLeft,point.plotY + chart.plotTop,'L',100,100])
                                .attr({
                                    'stroke-width': 1,
                                    stroke: 'red'
                                }).add();                               
                            this.graphic.animate({                                  
                                opacity: 0.2                                    
                            });

http://jsfiddle.net/Mktvz/4/


Related Articles