Enable rotation of Highcharts 3D scatter chart on touch devices

Question

In my web application I utilize this beautiful 3D scatter chart rendered using Highcharts.

It does rotate nicely using the mouse by clicking on it and dragging around.

However, on neither my phone nor my tablet it does rotate also.

The code for enabling rotation looks as follows (adopted from the Highcharts sample page):

// Add mouse events for rotation
$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
    eStart = chart.pointer.normalize(eStart);

    var posX = eStart.pageX,
        posY = eStart.pageY,
        alpha = chart.options.chart.options3d.alpha,
        beta = chart.options.chart.options3d.beta,
        newAlpha,
        newBeta,
        sensitivity = 5; // lower is more sensitive

    $(document).on({
        'mousemove.hc touchdrag.hc': function (e) {
            // Run beta
            newBeta = beta + (posX - e.pageX) / sensitivity;
            chart.options.chart.options3d.beta = newBeta;

            // Run alpha
            newAlpha = alpha + (e.pageY - posY) / sensitivity;
            chart.options.chart.options3d.alpha = newAlpha;

            chart.redraw(false);
        },
        'mouseup touchend': function () {
            $(document).off('.hc');
        }
    });
});

I assume that the events where this logic is registered are not available on my devices (recent Samsung Galaxy Tab and Samsung Galaxy S5).

Any ideas?

score 0 · Answer 1 · answered Jun 01 '17 at 05:26

The problem is, a touch event doesn't have pageX or pageY. Instead of using event.pagePosition, you should use event.chartPosition. And chartPositions are only available after normalized by chart.pointer.normalize.

Also, there is no touchdrag event, it should be touchmove

Enable rotation of Highcharts 3D scatter chart on touch devices

1 Answers1