CODEWITHSUNDEEP
jqueryhighcharts
user1196935
user1196935

Reputation: 21

Highcharts javascript

Am using highcharts scatter plots. I wanted to give a glow effect to a point on selecting the point. So am using chart.renderer.rect() method to create a SVG element and add it behind the selected point. But i am not getting the x y position of the selected point. Please help me.

Below is the code am using.

chart.renderer.rect( 1, 1, 30, 30, 5)
 .attr({
        'stroke-width': 2,
        stroke: 'red',
        fill: 'yellow',
        zIndex: 3,
        translateX: 220,
        translateY: 265
 })
 .add();

Thanks in advance..!

Upvotes: 2

Views: 1640

Answers (2)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

See the following example. http://jsfiddle.net/cfKzS/7/ If you want the chart x and y position you can access as this.x and this.y. Or if you want the position in pixels you can use something like this:

plotOptions: {
    series: {
        allowPointSelect: true,
        point: {
            events: {
                select: function(e) {
                    $report.html('chart x position: ' + e.target.plotX + '<br>' + 'chart y position: ' + e.target.plotY);
                }
            }
        }
    }
}

Upvotes: 3

Blowsie
Blowsie

Reputation: 40575

Transform is not part of the attr object see here... http://www.highcharts.com/ref/#element

attr Object hash : Element Since 2.0
Apply attributes to the SVG/VML elements. These attributes for the most parts correspond to SVG, but some are specific to Highcharts, like zIndex and rotation for text.

Most important available attributes:

d
end
fill
height
r
rotation
start
stroke
stroke-width
style
text
translateX
translateY
visibility
width
x
y
zIndex

Upvotes: 1

Related Questions