render a circle onclick event in highcharts

Question

I have a requirement to render circles on click event in highcharts. The x,y value should be the point getting from click event I mean

var x = event.xAxis[0].value;
var y = event.yAxis[0].value;

If I click more than one point there should render another circle.

js fiddle:

http://jsfiddle.net/das_palash89/WN3XC/1/

Answer 1

Poles,

Renderer draws the shape based on the inputs given to it. It accepts its input in pixels.

When you pass x and y positions for it to render they have to be in pixels, but the x and y values you will be getting from the click events will be in corresponding x and y units. You need to convert them into respective pixels and then pass them to the renderer.

For this highcharts has provided toPixels() method on both the axes. you can convert the axis Units into corresponding pixel positions using them

API ref

I've updated your JS fiddle here

Hope this will help you

Answer 2

If you want more than a circle you can use the annotations plugin: http://www.highcharts.com/plugin-registry/single/17/Annotations