Scrolling over highcharts graph

Question

Here\'s my issue: I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.

Answer 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 = $('
');
  $(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;
}