My current project involves developing a hybrid app using the phonegap framework, and I have decided to incorporate graphs using the highcharts library.
However, I am facing an issue where I am unable to scroll after interacting with the chart within the app. I would like the chart to be passive, not capturing any events, and allow for smooth scrolling even over the chart area.
To achieve this, I have included the following code snippet:
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]
}]
});