CODEWITHSUNDEEP
javascripthighcharts
TomCDona
TomCDona

Reputation: 150

Highcharts centre of a bubble chart point

I'm trying to add some extra information to a bubble chart on point clicks, but for the life of me I can't find the centre of a bubble point!

Here's what's happening: http://jsfiddle.net/H07R0D/Mktvz/

and here's the point click event

plotOptions: {
    bubble: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    var renderer = this.series.chart.renderer;
                    var point = this.graphic;
                    var path = renderer.path(['M',point.cx,point.cy,'L',100,100])
                        .attr({
                            'stroke-width': 1,
                            stroke: 'red'
                         }).add();
                 }
            }
        }
    }
}

When a bubble is clicked, I'm trying to draw a path from the bubble's centre to an arbitrary point(just testing....) but the drawn path never starts in the bubble's centre.

Is there a different value other than point.cx and point.cy I should be using?

Upvotes: 0

Views: 864

Answers (2)

Pierre Fourgeaud
Pierre Fourgeaud

Reputation: 14510

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/

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

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/

Upvotes: 1

Related Questions