yAxis scrollbars don't work correctly with boost

[mateuszkornecki]

Expected behaviour

Scrolling should work in the same way as without.

Actual behaviour

Scrollbar shows that the content is zoomed out to its full extent, but it’s not.
It is happening when we have more points that’s boostThreshold (5k by default) or while using both yAxis.min and yAxis.max properties.

Live demo with steps to reproduce

Try to use yAxis scrollbar
https://jsfiddle.net/BlackLabel/fbd42ro9/

Product version

Highstock JS v8.0.0 (2019-12-10)

Affected browser(s)

All

[pawelfus]

Internal note:
Scrollbar is rendered according to Axis.min/max and Axis.dataMin/dataMax relation. In the demo above, dataMin and dataMax are not defined for yAxis (they're nulls), to it's falling back to Axis.min and renders full scrollbar:

highcharts/ts/parts/Scrollbar.ts

Lines 1247 to 1256 in 071ca12

	scrollMin = Math.min(
	pick(axis.options.min, axis.min as any),
	axis.min as any,
	pick(axis.dataMin, axis.min as any) // #6930
	),
	scrollMax = Math.max(
	pick(axis.options.max, axis.max as any),
	axis.max as any,
	pick(axis.dataMax, axis.max as any) // #6930
	),

I'm not sure why boost does node set dataMin and dataMax only for yAxis, probably limits data processing.

[mateuszkornecki]

Possible workaround: Set the value of boostThreshold to be higher or equal than the number of points.
Live demo: https://jsfiddle.net/BlackLabel/fbd42ro9/

[pawelfus]

Internal note:
Before proceeding with the issue, check if boost has access (or already calculated) dataMin and dataMax values. And if not, find the reason why, if that's the performance related limitation, we need to rethink this.

[ppotaczek]

Internal note:

That is probably for performance reason. If yAxis.min and yAxis.max are set, series.getExtremes method returns an empty object and yAxis.dataMin and yAxis.dataMax are always nulls.

highcharts/ts/modules/boost/boost-overrides.ts

Lines 278 to 290 in 1e6571d

	* Do not compute extremes when min and max are set.
	* If we use this in the core, we can add the hook
	* to hasExtremes to the methods directly.
	*/
	wrap(Series.prototype, 'getExtremes', function (
	this: Highcharts.Series,
	proceed: Function
	): Highcharts.DataExtremesObject {
	if (!this.isSeriesBoosting || (!this.hasExtremes || !this.hasExtremes())) {
	return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
	}
	return {};
	});

highcharts/ts/modules/boost/boost-overrides.ts

Lines 495 to 514 in 1e6571d

	Series.prototype.hasExtremes = function (checkX?: boolean): boolean {
	var options = this.options,
	data: Array<Highcharts.PointOptionsType> = options.data as any,
	xAxis = this.xAxis && this.xAxis.options,
	yAxis = this.yAxis && this.yAxis.options,
	colorAxis = this.colorAxis && this.colorAxis.options;
	return data.length > (options.boostThreshold || Number.MAX_VALUE) &&
	// Defined yAxis extremes
	isNumber(yAxis.min) &&
	isNumber(yAxis.max) &&
	// Defined (and required) xAxis extremes
	(!checkX ||
	(isNumber(xAxis.min) && isNumber(xAxis.max))
	) &&
	// Defined (e.g. heatmap) colorAxis extremes
	(!colorAxis ||
	(isNumber(colorAxis.min) && isNumber(colorAxis.max))
	);
	};

As a simple solution we could calculate the extremes in case of y scrollbar.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[pawellysy]

unstale

[kamil-musialowski]

Workaround: https://jsfiddle.net/BlackLabel/j5p03gv8/

(function(H) {
    H.wrap(H.Series.prototype, 'hasExtremes', function() {
        return false;
    });
})(Highcharts);

There's a similar problem with a heatmap with colorAxis, see demo: https://jsfiddle.net/BlackLabel/vou6qwax/

As a workaround, you can overwrite the hasExtremes method the same as above: https://jsfiddle.net/BlackLabel/864ma3he/

Internal note:
The problem doesn't occur when the colorAxis is added without any min/max options: https://jsfiddle.net/BlackLabel/Ld41ahrj/, but, of course, the points colors are calculated automatically.