I am using highcharts 3.0.7 with draggable-points module, to make it possible to drag points of a displayed series.
User should be able to drag a point to move it, but also to click on a point to remove it.
The problem is that dragging event takes over click event and the latter is not fired.
Here is my code:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>
JS:
var options = {
chart: {
renderTo: 'container',
},
tooltip: { enabled: false },
plotOptions: {
series: {
animation: false,
allowPointSelect: true,
point: {
events: {
click: function (event) {
console.log('click fired');
this.remove();
}
}
}
}
},
series: [{}]
};
options.series[0].data = [[1,1], [2,3],[4,2]];
options.series[0].draggableX = true;
options.series[0].draggableY = true;
new Highcharts.Chart(options);
http://jsfiddle.net/eu2d0t1L/2/ shows this.
Is there a way to allow both events to co-exist ?
Related question: when I comment:
// options.series[0].draggableX = true;
// options.series[0].draggableY = true;
Point removal is working but generates an error: Uncaught TypeError: object is not a function in highcharts.js: 220
. Why ?