CODEWITHSUNDEEP
javascriptinternet-explorergoogle-chromefirefoxhighcharts
anber
anber

Reputation: 874

In Highcharts, how do I get consistent coordinates for points in IE,Chrome and Fixefox

K - K - K - Kode breaker !

I’m trying to create a custom tooltip for Highcharts. The problem is that the click event fires off different coordinate types the various browsers. (Chrome, IE, The Fox that is on Fire)

I have tried the following code:

// create the chart
function onClick(e) {
  $('#report').text('x: ' + e.offsetX + ', y: ' + e.offsetY).css({
     'position': 'absolute',
        'left': e.offsetX,
        'top': e.offsetY
  })
}

var chart = new Highcharts.Chart({
  chart: {
     renderTo: 'container'
  },
  xAxis: {},
  tooltip: {
     enabled: false
  },
  series: [{
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
     events: {
        click: onClick
     }

  }]
});

The Fiddle can be found here:

http://jsfiddle.net/6JxWz/

The code works in Chrome with different values in IE and doesn’t work at all in Firefox. How can I consistently get the correct coordinates to the point that was clicked?

Upvotes: 0

Views: 1255

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Have you tried to use position() or offset() function in jquery?

Upvotes: 0

Sondre
Sondre

Reputation: 1898

Not sure I get completely what you're trying to do, but have you tried with e.pageX and e.pageY instead of the offset?

Upvotes: 1

Related Questions