Highcharts Scrollbar up arrow throws error on click - svg

Question

When clicking the up arrow on a highcharts xrange graph with a scrollbar on the yAxis (there is also one on the xAxis but it doesn't throw an error when i use it's arrow button)
the error returned is
Uncaught TypeError: Cannot read property 'call' of undefined
at SVGGElement.<anonymous> (highcharts.src.js:5182)
I haven't found anything specific on the internet about this error so far but if i do i will update this ticket
Might this have something to do with having an X and Y scrollbar ?
I don't plan on using the button at all since we have implemented a listener for the trackpad/wheel - is there a way of removing the arrow button entirely (rather than make it transparent which i currently have implemented which includes an unsightly hover i can't get rid of)
If you can help me A) Remove/hide the button entirely B) listen for the click and throw away the event to avoid this error or C) fix whatever the underlying cause of this error is ... i'd greatly appreciate it
{
'chart': {
'renderTo': graphId,
'type': 'xrange',
'zoomType': 'xy',
'panning': true,
'panKey': 'shift',
'marginRight': 40,
'marginLeft': 150,
'resetZoomButton': {
'position': {
'x': -150,
'y': -10
}
}
},
'exporting': {
'enabled': true,
'buttons': {
'enabled': true,
'contextButton': {
'enabled': false
},
'resetScopeButton': {
'y': -10,
'x': -25,
'symbolX': 20,
'symbolY': 20,
'enabled': true,
'onclick': context['LiAnalytics']['resetScopeButton'],
'symbol': 'url(../images/refresh.png)'
},
'hourButton': {
'enabled': true,
'text': 'H',
'y': -10,
'x': -50,
'onclick': context['LiAnalytics']['hourButton']
},
'dayButton': {
'text': 'D',
'y': -10,
'x': -75,
'enabled': endTS - startTS > 86400000,
'onclick': context['LiAnalytics']['dayButton']
},
'weekButton': {
'text': 'W',
'y': -10,
'x': -100,
'enabled': endTS - startTS >= 604800000,
'onclick': context['LiAnalytics']['weekButton']
},
'monthButton': {
'text': 'M',
'y': -10,
'x': -125,
'enabled': endTS - startTS >= 2419000000,
'onclick': context['LiAnalytics']['monthButton']
}
}
},
'legend': {
'enabled': false
},
'xAxis': {
'type': 'datetime',
'dateTimeLabelFormats': {
...
},
'events': {
'setExtremes': new js.JsFunction.withThis(_handleRedraw)
},
'min': (endTS - startTS) > initialZoom ? endTS - initialZoom : startTS,
'max': endTS,
'scrollbar': {
'enabled': true,
'showFull': false,
'barBackgroundColor': '#ccc',
'barBorderRadius': 7,
'barBorderWidth': 0,
'buttonBorderWidth': 0,
'buttonArrowColor': 'transparent',
'buttonBackgroundColor': 'transparent',
'rifleColor': 'transparent',
'trackBackgroundColor': '#F3F3F3',
'trackBorderColor': 'transparent',
'height': 10,
'minWidth': 25
}
},
'yAxis': {
'categories': agents,
'min': 0,
'max': agents.length < maxY ? agents.length - 1 : maxY,
'scrollbar': { /* Why you throw err on click ? */
'enabled': true,
'showFull': false,
'barBackgroundColor': '#ccc',
'barBorderRadius': 7,
'barBorderWidth': 0,
'buttonBorderWidth': 0,
'buttonArrowColor': 'transparent', /* Remove entirely ? */
'buttonBackgroundColor': 'transparent',
'rifleColor': 'transparent',
'trackBackgroundColor': '#F3F3F3',
'trackBorderColor': 'transparent',
'height': 10,
'minWidth': 25
},
'reversed': true,
'tickmarkPlacement': 'on',
'gridLineColor': 'transparent'
},
'plotOptions': {
'series': {
'animation': {
'duration': 2000
},
'point': {
'events': { /* can i do something similar for scrollbar? */
'mouseOver': new js.JsFunction.withThis(_mouseOver),
'mouseOut': new js.JsFunction.withThis(_mouseOut)
}
},
'pointWidth': 20,
'pointPlacement': 0,
'minPointLength': 10,
'borderRadius': 0
}
},
'series': series,
'tooltip': {
...
}
}
(C) Current code block
(function() {
//internal functions
function stopEvent(e) {
if (e) {
if (e.preventDefault) {
e.preventDefault();
}
if (e.stopPropagation) {
e.stopPropagation();
}
e.cancelBubble = true;
}
}
/* Wrap allows us to override the behavior of render while not interrupting the normal rendering procedure */
Highcharts.wrap(Highcharts.Chart.prototype, 'render', function(proceed) {
var chart = this;
proceed.call(chart);
/* When a chart has a scrollbar and is xrange our PM/UX has requested the touchpad be abled to control the scrollbar */
if (chart.options['chart']['type'] === "xrange" && chart.options['yAxis'][0]['scrollbar']['enabled']) {
// Add the mousewheel event
Highcharts.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function (event) {
var delta, diff, extr, newMax, newMin, step, axis = chart.yAxis[0];
e = chart.pointer.normalize(event);
// Firefox uses e.detail, WebKit and IE uses wheelDelta
delta = e.detail || -(e.wheelDelta / 120);
delta = delta < 0 ? 1 : -1;
/* Up or Down */
if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
extr = axis.getExtremes();
if (extr.dataMax !== extr.dataMin) {
diff = extr.max - extr.min;
step = diff / 5;
/* move by fifths */
step = step > 1 ? Math.ceil(step) : 1;
/* Min step is 1, Move by whole numbers */
step = step * delta;
/* Up/Down */
if (step > 0) {
/* UP */
if (extr.max + step > extr.dataMax) {
newMax = extr.dataMax;
newMin = extr.dataMax - diff;
/* Enforce window not getting too small */
} else {
newMin = extr.min + step;
newMax = extr.max + step;
}
} else {
/* DOWN */
if (extr.min + step < 0) {
newMin = 0;
newMax = diff;
} else {
newMin = extr.min + step;
newMax = extr.max + step;
}
}
axis.setExtremes(newMin, newMax, true, false);
}
}
stopEvent(event);
return false;
});
}
});
Highcharts.Scrollbar.prototype.addEvents = function() {
var chart = this;
var buttonsOrder = chart.options.inverted ? [1, 0] : [0, 1],
buttons = chart.scrollbarButtons,
bar = chart.scrollbarGroup.element,
track = chart.track.element,
mouseDownHandler = chart.mouseDownHandler,
mouseMoveHandler = chart.mouseMoveHandler,
mouseUpHandler = chart.mouseUpHandler,
_events;
// Mouse events
_events = [
/* [buttons[buttonsOrder[0]].element, 'click', this.buttonToMinClick],
[buttons[buttonsOrder[1]].element, 'click', this.buttonToMaxClick], */
[track, 'click', this.trackClick],
[bar, 'mousedown', mouseDownHandler],
[bar.ownerDocument, 'mousemove', mouseMoveHandler],
[bar.ownerDocument, 'mouseup', mouseUpHandler]
];
// Touch events
if (Highcharts.hasTouch) {
_events.push(
[bar, 'touchstart', mouseDownHandler], [bar.ownerDocument, 'touchmove', mouseMoveHandler], [bar.ownerDocument, 'touchend', mouseUpHandler]
);
}
// Add them all
_events.forEach(function(args) {
Highcharts.addEvent.apply(null, args);
});
chart._events = _events;
};
}());
EDIT: removed old details

Answer 1

This was caused by trying to singularly disable the context button while including other custom buttons. The context button hung around as a phantom button that was overladed over the scrollbar up arrow causing the misdiagnosis during debugging.
Solution i ended up going up with was repurposing the context button by overriding the symbol/symbolX symoblY(to center symbol in button area)/onclick behavior
routed onclick to the resetScope behavior i was working toward
overrode the burger symbol with the png saved / decided on by UX