I am optimizing a site for tablets and we are interested in disabling all the events for highcharts so that users can pan around the page without suffering.
I have tried setting the events to null in the constructor but I can't seem to find a way to remove the functionality via the API. Essentially the problem I'm facing is that a user is likely to "zoom in" to read the graph and then can't really do much because all the events are captured by the chart. I'd like it simply to display without any interactivity.
chart :{
....
events : null;
...
},
...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
events: null
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
},
plotOptions: {
series: {
cursor: 'ns-resize',
states : {
hover : {
enabled: false
}
},
stickyTracking : false
},
column: {
stacking: 'normal'
}
},
tooltip: {
enabled: false,
yDecimals: 0
},
series: [
{
name: "test",
data: [0, 10, 20, 30, 40, 50, 60, 70, 100, 70],
draggable: false,
dragMin: 0,
dragMax: 100
}]
});
$('document').ready(new function(){
('container').events = null;
('contener').css({'background-color':'#ff0000','pointer-events': 'none'});
});
$('#myChartDiv').click(function() { return false; });
and only run that code if the browser is identified as mobile (probably using server-side code)? Also,$('#myChartDiv').children().click(function() { return false; });
. – user1477388