Please have a look at this: https://jsfiddle.net/jakobvinther/9u5wdmhp/
The chart has a series with arearange type and forced dataGrouping, looking like this:
Obviously the tooltip is pointing at the minimum y-value in the group. However, I need the tooltip to refer to the value in the center of the dataGroup (I don't mean the average). Likewise for the sliding "header" at the bottom of the vertical crosshair (it is impossible to see the difference in the example, but I use much more fine-grained data in reality).
A hand-made sketch of what is wanted:
To experiment, my jsfiddle includes a wrapper of the Highcharts Tooltip.positioner function. (Alternatively I could have introduced a section tooltip.positioner in the highcharts chart options, but I prefer to have a wrapper around the original Tooltip.positioner function in order to keep all the functionality it provides, and only modify the y-positioning as described).
Well, I had expected the wrapper to execute when the cursor hovers over the chart, but it does not. I also tried with 'TooltipPositionerCallbackFunction' instead of 'positioner' without luck.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'positioner', function (proceed, args) {
console.log("positioner wrapper executing"); // **** this does not run !!?? ***
// how can I get to the point? Is it args.point?
const start = args.point.dataGroup.start;
const length = args.point.dataGroup.length;
// index of the central point within the group:
const cidx = Math.floor((start + length / 2.0));
// get the that point from the series
const cx = args.point.series.xData[cidx];
const cy = args.point.series.yData[cidx];
// Here I want to call the original positioner function
// with the point coordinates { x: cx, y: cy }
// but I don't know how.
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
$(function () {
// generate some data
const x0 = 2592000000;
const dx = 86400000;
const n = 900;
let data = [
[x0, 10, 20]
]; // initial value
for (i = 1; i < n - 1; i++) { // construct n values of [timestamp, random, random]
data[i] = [data[i - 1][0] + dx, 10 + Math.random() * 10, 20 + Math.random() * 10];
}
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
},
series: [{
name: 'data',
data: data,
type: 'arearange',
dataGrouping: {
forced: true,
}
}]
});
});
EDITS: I have modified the text and jsfiddle code several times to clarify my intentions and avoid problems with the jsfiddle.