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.

The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).

What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.

Code:

chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'containerBar',
    animation: false,
    type: 'bar',
    events: {
      click: function(event){
        return false;
      }
    }
  },
  scrollbar: {
    enabled: true
  },
  title: {
    text: 'Fruit Consumption'
  },
  plotOptions: {
    bar: {
      events: {
        click: function(event){
          return false;
        },
        mouseOver: function(event){
          return false;           
        },
        legendItemClick: function () {
          return false;
        }
      },
      states: {
        hover: function(){
          alert("Allow");
        }
      }
    }
  },
  events: {
    click: function(e) {
      alert("Click");
    }  
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  tooltip: {
    enabled: false
  },
  series: [{
    name: 'Jane',
    data: [1, 3, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

Solution 1

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.

Solution 2

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

Solution 3

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