score:5

Accepted answer

To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).

Added new option, tooltip.followTouchMove. When this is true, the tooltip can be moved by dragging a single finger across the chart, like in Highcharts 2. When it is false, dragging a single finger is ignored by the chart, and causes the whole page to scroll. This applies only when zooming is not enabled.

Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):

Made tooltip.followTouchMove true by default, and allowed page scroll at the same time.

For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.

score:1

The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):

$('.highcharts-container').each(function() {
  var dragHandle;
  dragHandle = $('<div class="chart-drag-handle">');
  $(this).append(dragHandle);
  dragHandle.on('touchstart', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchmove', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchend', function(e) {
    e.stopPropagation();
  });
  dragHandle.on('touchcancel', function(e) {
    e.stopPropagation();
  });
});

The elements added would need to be styled to overlay the chart, I did that like so:

.highcharts-container .chart-drag-handle {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 100;
}

score:19

Try this link .... Just make a separate javascript file ,copy paste the code and include the file


Related Query

More Query from same tag