Highcharts: how to handle touch events via plotOptions.series.events

Question

On a Highcharts bar chart, when the user clicks one of the bars, additional data is loaded elsewhere on the page via the loadDetails function.

loadDetails is specified as a click callback function for a chart via plotOptions.series.events :

var chart = new Highcharts.Chart({
    defaultSeriesType: 'bar',
    ...
    plotOptions: {
        series: {
            events: {
                click: loadDetails
            }
        }
    },
    ...

});

function loadDetails() {
    ...
}

The problem is I need to call the same callback function for a touchstart event on mobile devices.

There doesn't seem to be any obvious way of adding a touch event handler via the Highcharts API as far as I could tell: http://api.highcharts.com/highcharts#plotOptions.series.events .

Has anyone got any idea how to add callback functions for touch events, or trigger the click callback function from a touch event?

Answer 1

Yeah, something like this is not supported, I advice you to create idea here .

The only workaround which comes to my mind is use Element.on function to add custom events to elements which exists on a chart. For example: http://jsfiddle.net/3bQne/269/

    chart: {
        renderTo: 'container',
        events: {
            load: function(){
                var chart = this,
                    path = chart.series[0].tracker;

                path.on('click', function() {
                   alert("click");; 
                });
            }
        }
    }

Answer 2

This works. I was trying to get Highcharts to work with Apple Pencil. I used code above but included markerGroup (along with tracker) so event triggers when user click on points along with lines of a series. I use 'touchstart' event to trap apple pencil click. See below.

chart: {
        renderTo: 'container',
        events: {
            load: function(){
                var chart = this,
                    path = chart.series[0].tracker;
                    path2 = chart.series[0].markerGroup;
            path.on('touchstart', function() {
               alert(“touch");
            });
            path2.on('touchstart'), function() {
               alert(“touch 2”);
            });
        }
    }
}