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;
});

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