Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save marco-martins/2994906 to your computer and use it in GitHub Desktop.
Save marco-martins/2994906 to your computer and use it in GitHub Desktop.
Highcharts tracker now don't prevent default behavior (like scrolling on touch devices).
Highcharts.Chart.prototype.callbacks.push(function(chart) {
var hasTouch = hasTouch = document.documentElement.ontouchstart !== undefined,
mouseTracker = chart.tracker,
container = chart.container,
mouseMove;
mouseMove = function (e) {
// let the system handle multitouch operations like two finger scroll
// and pinching
if (e && e.touches && e.touches.length > 1) {
return;
}
// normalize
e = mouseTracker.normalizeMouseEvent(e);
if (!hasTouch) { // not for touch devices
e.returnValue = false;
}
var chartX = e.chartX,
chartY = e.chartY,
isOutsidePlot = !chart.isInsidePlot(chartX - chart.plotLeft, chartY - chart.plotTop);
// cancel on mouse outside
if (isOutsidePlot) {
/*if (!lastWasOutsidePlot) {
// reset the tracker
resetTracker();
}*/
// drop the selection if any and reset mouseIsDown and hasDragged
//drop();
if (chartX < chart.plotLeft) {
chartX = chart.plotLeft;
} else if (chartX > chart.plotLeft + chart.plotWidth) {
chartX = chart.plotLeft + chart.plotWidth;
}
if (chartY < chart.plotTop) {
chartY = chart.plotTop;
} else if (chartY > chart.plotTop + chart.plotHeight) {
chartY = chart.plotTop + chart.plotHeight;
}
}
if (chart.mouseIsDown && e.type !== 'touchstart') { // make selection
// determine if the mouse has moved more than 10px
hasDragged = Math.sqrt(
Math.pow(mouseTracker.mouseDownX - chartX, 2) +
Math.pow(mouseTracker.mouseDownY - chartY, 2)
);
if (hasDragged > 10) {
var clickedInside = chart.isInsidePlot(mouseTracker.mouseDownX - chart.plotLeft, mouseTracker.mouseDownY - chart.plotTop);
// make a selection
if (chart.hasCartesianSeries && (mouseTracker.zoomX || mouseTracker.zoomY) && clickedInside) {
if (!mouseTracker.selectionMarker) {
mouseTracker.selectionMarker = chart.renderer.rect(
chart.plotLeft,
chart.plotTop,
zoomHor ? 1 : chart.plotWidth,
zoomVert ? 1 : chart.plotHeight,
0
)
.attr({
fill: mouseTracker.options.chart.selectionMarkerFill || 'rgba(69,114,167,0.25)',
zIndex: 7
})
.add();
}
}
// adjust the width of the selection marker
if (mouseTracker.selectionMarker && zoomHor) {
var xSize = chartX - mouseTracker.mouseDownX;
mouseTracker.selectionMarker.attr({
width: mathAbs(xSize),
x: (xSize > 0 ? 0 : xSize) + mouseTracker.mouseDownX
});
}
// adjust the height of the selection marker
if (mouseTracker.selectionMarker && zoomVert) {
var ySize = chartY - mouseTracker.mouseDownY;
mouseTracker.selectionMarker.attr({
height: mathAbs(ySize),
y: (ySize > 0 ? 0 : ySize) + mouseTracker.mouseDownY
});
}
// panning
if (clickedInside && !mouseTracker.selectionMarker && mouseTracker.options.chart.panning) {
chart.pan(chartX);
}
}
} else if (!isOutsidePlot) {
// show the tooltip
mouseTracker.onmousemove(e);
}
lastWasOutsidePlot = isOutsidePlot;
}
container.onmousemove = container.ontouchstart = container.ontouchmove = mouseMove;
});
@candrews
Copy link

Is this fix for an issue at https://github.com/highslide-software/highcharts.com/issues ? If not, could you make one so everyone can automatically get this fix?

@Lynn-cc
Copy link

Lynn-cc commented Jul 17, 2014

why is the chart.tracker undefined please?

@gevgeny
Copy link

gevgeny commented Aug 10, 2015

@Lynn-cc the same problem for me

@vasnakos
Copy link

vasnakos commented Aug 5, 2016

Same for me, chart.tracker is undefined. Any suggestions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment