Reveal.js with highcharts

Question

I'm using reveal.js (http://lab.hakim.se/reveal-js/) together with Highcharts JS but i have problems with tooltips position. For example, if i use a line with the months on the x axis, when i put the mouse over the point in january the tooltip its ok, but when i put the mouse over december the tooltip shows me the october data. The tooltip for each month is displaced more and more.

You can see http://lideria.net/presentacion/index1.php to see the problem

Answer 1

This may be problem with Highcharts which us already reported here. Also there is suggested workaround: http://jsfiddle.net/highcharts/BD3R7/

Answer 2

reveal.js autoscales the viewport with a css zoom tag. If you inspect class="slides" div, you'll see something like this:

<div class="slides" style="width: 960px; height: 700px; zoom: 0.8331428571428572;"> 

Here the content (the chart) is scaled 80% of normal size and Highcharts loses it's ability to calculate positions properly if the chart is scaled outside of its control.

With that knowledge, a quick stack overflow search talks about the ability to force 'reveal.js` to not auto-scale content.

Answer 3

You must overwrite the normalize of the H.Pointer.prototype (referenced WRAPPING UP A PLUGIN). Add the following code to document.ready function (maybe somewhere else works, I guess). The reasons are:

1. reveal.js has separate ways when zoom>1 and zoom<1, e.g., zoom:1.25 and transform:scale(0.75).

2. So, when a section has several charts and zoom>1, must adjust e.chartX by e.pageX.

   (function (H) {
       H.wrap(H.Pointer.prototype, 'normalize', function (proceed, e) {
           var e = proceed.call(this,e);
           var zoom = Reveal.getScale();
           if(zoom>1) {
           var positionX = e.pageX - e.chartX;
           var positionY = e.pageY - e.chartY;
           e.chartX = Math.round((e.pageX - positionX*zoom)/zoom);
           e.chartY = Math.round((e.pageY - positionY*zoom)/zoom); 
           } else {
             e.chartX = Math.round(e.chartX/zoom);
             e.chartY = Math.round(e.chartY/zoom);
           }
         return e;
       });
   }(Highcharts));