Custom "compare" and axis range in Highcharts - highcharts

Question

I added a custom "compare" routine in order to compute the difference of some point value relative to the previous point (instead of relative to the first point in the series as implemented in compare: 'value'):
Highcharts.wrap(Highcharts.Series.prototype, "setCompare", function(proceed, compare) {
// Set or unset the modifyValue method
this.modifyValue = (compare === 'value' || compare === 'percent' || compare === 'value_previous' || compare === 'percent_previous') ?
function(value, point) {
// MODIFIED ---------------------
var compareValue;
if (point && compare.includes("_previous")) {
compareValue = point.series.processedYData[point.index - 1];
} else {
compareValue = this.compareValue;
}
// -------------------------------
if (typeof value !== 'undefined' && typeof compareValue !== 'undefined') { // #2601, #5814
// Get the modified value
if (compare.includes('value')) { // MODIFIED!!!!!!!
value -= compareValue;
// Compare percent
} else {
value = 100 * (value / compareValue) - (this.options.compareBase === 100 ? 0 : 100);
}
// record for tooltip etc.
if (point) {
point.change = value;
}
return value;
}
return 0;
} :
null;
// Survive to export, #5485
this.userOptions.compare = compare; // ---WHAT TO DO???---
// Mark dirty
if (this.chart.hasRendered) {
this.isDirty = true;
}
});
The chart is drawn as expected (see fiddle), but the yaxis' range does not cover the new computed values. Any idea how to solve the problem?
Fiddle

Answer 1

You need also include this part of the code which will trigger and get the this.modifyValue from your custom wrap.
///
/// MISSED FUNCTIONS
///
var arrayMin = Highcharts.arrayMin = function arrayMin(data) {
var i = data.length, min = data[0];
while (i--) {
if (data[i] < min) {
min = data[i];
}
}
return min;
};
var arrayMax = Highcharts.arrayMax = function arrayMax(data) {
var i = data.length, max = data[0];
while (i--) {
if (data[i] > max) {
max = data[i];
}
}
return max;
};
// Modify series extremes
Highcharts.addEvent(Highcharts.Series.prototype, 'afterGetExtremes', function (e) {
var dataExtremes = e.dataExtremes;
if (this.modifyValue && dataExtremes) {
var extremes = [
this.modifyValue(dataExtremes.dataMin),
this.modifyValue(dataExtremes.dataMax)
];
dataExtremes.dataMin = arrayMin(extremes);
dataExtremes.dataMax = arrayMax(extremes);
}
});
///
///
///
Demo: https://jsfiddle.net/BlackLabel/ucvae7xy/