I'm showing an area graph with step defined to "left" in order to show that the "valid" value between the points is still the one to the left until the next point (simple example: https://jsfiddle.net/ugvL413n/). However, I would also like the point highlighting and tooltip to behave similarly, i.e. that the highlighted point is not the one closest to the mouse, but always the point to the left of the mouse (or right, if step is "right"). For starters, this would be nice to understand how to do for one chart.
Moreover, I'm looking to do this for synchronized charts (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/synchronized-charts). So, I would need the series.searchPoint function to allow me to not only find the closest point, but in fact the closest point to the left or right depending on the callers needs. However, it doesn't look like it's supported. So currently, I'm trying to do all of this in the "mousemove" event handler with some kind of logic based on the normalized event.chartX and some computed comparable X value based on many private properties of the found point, compare if they are left / right of the event and I get it working as I want.
// All of these properties are private, please find a more sustainable way to find the comparable value to the normalized event.chartX value
function getComparableChartX(point) {
return point.plotX + point.distX + (point.graphic.width - (point.graphic.hasStroke ? point.graphic['stroke-width'] * 2 : 0));
}
But to be honest, it's quite a horrible solution to maintain and I'm looking for guidance if there's a better way to do this, since my expectation towards private properties is that they can be changed without any prior notice. And I'm not even sure these are all the / correct properties to compare with. I got this working by trial and error.
Here's my current working example: https://jsfiddle.net/8sew72uk/
I think you can try setting a condition in the tooltip.formatter and show a specific value in the tooltip.
And if you don't want to show some points then disabling markers in for given ranges should work.
Highcharts.chart('container', {
chart: {
type: 'area'
},
plotOptions: {
area: {
step: 'left',
},
seires: {
findNearestPointBy: 'xy'
}
},
tooltip: {
followPointer: true,
formatter: function() {
return `${this.y}`
}
},
xAxis: [{
crosshair: {
snap: false
}
}],
series: [{
data: [0, 1, {
y: 1,
marker: {
enabled: false
}
}, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/vehz6yqx/
API References:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/highcharts/plotOptions.series.marker.enabled