Highcharts tracker now don't prevent default behavior (like scrolling on touch devices).

touch-tooltip-fix.js

Highcharts.Chart.prototype.callbacks.push(function(chart) {
  var hasTouch = document.documentElement.ontouchstart !== undefined,
      mouseTracker = chart.tracker,
      container = chart.container,
      mouseMove;

  mouseMove = function (e) {
    // let the system handle multitouch operations like two finger scroll
    // and pinching
    if (e && e.touches && e.touches.length > 1) {
      return;
    }

    // normalize
    e = mouseTracker.normalizeMouseEvent(e);
    if (!hasTouch) { // not for touch devices
      e.returnValue = false;
    }

    var chartX = e.chartX,
      chartY = e.chartY,
      isOutsidePlot = !chart.isInsidePlot(chartX - chart.plotLeft, chartY - chart.plotTop);

    // cancel on mouse outside
    if (isOutsidePlot) {

      /*if (!lastWasOutsidePlot) {
        // reset the tracker
        resetTracker();
      }*/

      // drop the selection if any and reset mouseIsDown and hasDragged
      //drop();
      if (chartX < chart.plotLeft) {
        chartX = chart.plotLeft;
      } else if (chartX > chart.plotLeft + chart.plotWidth) {
        chartX = chart.plotLeft + chart.plotWidth;
      }

      if (chartY < chart.plotTop) {
        chartY = chart.plotTop;
      } else if (chartY > chart.plotTop + chart.plotHeight) {
        chartY = chart.plotTop + chart.plotHeight;
      }
    }

    if (chart.mouseIsDown && e.type !== 'touchstart') { // make selection

      // determine if the mouse has moved more than 10px
      hasDragged = Math.sqrt(
        Math.pow(mouseTracker.mouseDownX - chartX, 2) +
        Math.pow(mouseTracker.mouseDownY - chartY, 2)
      );
      if (hasDragged > 10) {
        var clickedInside = chart.isInsidePlot(mouseTracker.mouseDownX - chart.plotLeft, mouseTracker.mouseDownY - chart.plotTop);

        // make a selection
        if (chart.hasCartesianSeries && (mouseTracker.zoomX || mouseTracker.zoomY) && clickedInside) {
          if (!mouseTracker.selectionMarker) {
            mouseTracker.selectionMarker = chart.renderer.rect(
              chart.plotLeft,
              chart.plotTop,
              zoomHor ? 1 : chart.plotWidth,
              zoomVert ? 1 : chart.plotHeight,
              0
            )
            .attr({
              fill: mouseTracker.options.chart.selectionMarkerFill || 'rgba(69,114,167,0.25)',
              zIndex: 7
            })
            .add();
          }
        }

        // adjust the width of the selection marker
        if (mouseTracker.selectionMarker && zoomHor) {
          var xSize = chartX - mouseTracker.mouseDownX;
          mouseTracker.selectionMarker.attr({
            width: mathAbs(xSize),
            x: (xSize > 0 ? 0 : xSize) + mouseTracker.mouseDownX
          });
        }
        // adjust the height of the selection marker
        if (mouseTracker.selectionMarker && zoomVert) {
          var ySize = chartY - mouseTracker.mouseDownY;
          mouseTracker.selectionMarker.attr({
            height: mathAbs(ySize),
            y: (ySize > 0 ? 0 : ySize) + mouseTracker.mouseDownY
          });
        }

        // panning
        if (clickedInside && !mouseTracker.selectionMarker && mouseTracker.options.chart.panning) {
          chart.pan(chartX);
        }
      }

    } else if (!isOutsidePlot) {
      // show the tooltip
      mouseTracker.onmousemove(e);
    }

    lastWasOutsidePlot = isOutsidePlot;
  }

  container.onmousemove = container.ontouchstart = container.ontouchmove = mouseMove;
});

Nice work, but i find a problem, in line graph tooltip it does not appear.
You know what it will be?

I don't see any problem here: http://jsfiddle.net/mqz3N/1130/ (tested on iOS simulator and iPhone, both with iOS5)

I have got the erro when over mouse on the graph "Uncaught TypeError: Object # has no method 'onmousemove' ", is very strange.

Does it happen in the above demo too? Which browser / device / OS / version are you using?

I found it, if you use the source like testing.js works fine, try use the download version or this src="http://highcharts.com/js/highcharts.js"

<_script type="text/javascript" src="http://highcharts.com/js/highcharts.js"></script>
insted
<_script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

Oh, now I see. Simply, this module requires at least Highcharts 2.2.4. Since that version we have access to many methods used internally, so we can simply override them without touching the source code.

You can read about it in the changelog (http://www.highcharts.com/documentation/changelog):
"Refactored major parts of Highcharts by splitting the Chart object into separate prototypes. This eases extendability as the objects are available from the outside, and individual methods and properties can be overridden."

Many thanks slawekkolodziej works fine now, Highcharts shoud be include your fix in source code.
I belive Highcharts is the best and must complet charts library in the world! but the touch problem in the mobile devices broken me!
Best regards.

I won't consider this as a bug. Take a look at these two demos and try to move the tooltip:

• http://jsfiddle.net/mqz3N/1132
• http://jsfiddle.net/mqz3N/1133
  In the first demo you have to tap each point, because moving a finger causes scrolling. In the second one tooltip smoothly follows your finger.

I think your fix is ok, because this way the touch scroll works fine and its still possible read the value with simple tap on the dot.

Hello, I updated My highchartJS lib from 2.2.0 to 2.2.5. I can't get rid of the error explained below (and above) :

" Uncaught TypeError: Object # has no method 'onmousemove' - file: touch-tooltip-fix.js:100
mouseMove ".

However, the vertical scroll works perfectly while the horizontal scroll doesn't work at all. Did you manage to make the horizontal scroll work ?
(I use a container of width=800px).

Thanks for sharing anyway!

Could you set up a jsbin demo demonstrating this issue?

Here is the example : http://jsbin.com/oxitat/20/edit#source

Someone know if its possible create one method to trigger de click event on xAxes or yAxis labels?

@Watticsam, your demo uses 2.2.0. I wrote, this "patch" requires at least 2.2.5. You can check current version by reading Highcharts.version property. Here's updated and working version: http://jsbin.com/oxitat/24/edit

@slawekkolodziej
The error disappeared. Sorry for the inconvenience. However I can't manage to add the horizontal scroll this way :/

Do you have any idea ?

Thanks

@slawekkolodziej this is really useful. thank you!

@slawekkolodziej great fix for the scrolling issues I was having on my iPad! I was wondering if it ok to use this patch in my commercial web application. I suspect that since this is public you don't have any license restrictions but I just wanted to check. Thanks again.

For Highcharts 3.0, you can use this script. https://gist.github.com/ricardoferreira1980/5335186

lastWasOutsidePlot is undefined