CODEWITHSUNDEEP
javascriptjqueryhighcharts
peeps147
peeps147

Reputation: 23

Making a drawing clickable in highcharts

I working in Highcharts and drawing shapes (circles) on the chart. I want to make the circle clickable but am having some issues. I've tried adding the onclick event, but it seems to me the circle is drawn on the background of the chart and is not receiving the click event. Here's the link to my fiddle code.

http://jsfiddle.net/z23sswha/11/

$(function() {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'x'
    },
     title: {
        text: 'Fruit Count'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: 'Fruits'
        }
    },
    series: [{
        name: 'John',
        data: [[Date.UTC(2014,5,25),5], [Date.UTC(2014,6,22),7], [Date.UTC(2014,7,9),3]]
    }]
});

addCircle(chart);

function click_chart(evt) {
    alert('byby');
}


function addCircle(crt) { // on complete
    var circleradius = 10;

    var xaxis=chart.xAxis[0];
    var yaxis =chart.yAxis[0];
    var xpos=xaxis.toPixels(Date.UTC(2014,5,25));
    var ypos=yaxis.toPixels(2);

// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
    onclick: function(evt){
        alert('yo');
    },
    fill: 'red'

}).add();
}
});

Any help on how to get the circle to hear the click event would be great! Thanks!

Upvotes: 0

Views: 569

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Try using the on-function instead to attach the listener to your circle.

For example (JSFiddle demonstration):

// Render the circle
chart.renderer.circle(xpos, ypos, circleradius)
.on('click', function() {
    alert('yo');
}).css({
    fill: 'red'
}).add();

Upvotes: 2

Related Questions