lightweight-charts
lightweight-charts copied to clipboard
Refactor hovering/hit test system API
Lightweight Charts Version: 3.7.0
Actual behavior:
Both hoveredSeries
and hoveredMarkerId
are undefined when clicking on the line.
Expected behavior:
According to the docs, there should be data.
CodeSandbox/JSFiddle/etc link: jsfiddle
It looks like hitTest
isn't implemented for most of the renderers. Will be a great feature to know what series are being hovered over.
Another nice feature of the API would be a "tolerance", perhaps? Where if you're within X pixels of the line itself it'll count as triggered.
It seems that it worked like that from the beginning and the idea of property hoveredSeries
is to indicated the source of a marker you clicked/hovered on. So I'd it is hoveredMarkersSeries
or so.
I don't think that we need to fix this issue in this way. Instead I'd say that we need to refactor the whole hittest system and provide more information to the API what exactly was hovered/clicked. For example, we could provide the type of a thing you're hovering (it's a mock up, we need to figure out what else we need to add to this "system").
Thus we'll postpone this feature for now and will go back later. If you face this issue and this is critical for you - please put your 👍 to the topic message so we can see that.
@timocov What is the status on this issue? There are a few people who thing this is critical to fix :)
What is the status on this issue? There are a few people who thing this is critical to fix :)
@ezhukovskiy @kirchet @edew @romfrancois ^^^
@ezhukovskiy @kirchet @edew @romfrancois @SlicedSilver Will this be included in the 4.0.0 release? In my opinion, it's quite an important feature that is not working atm
Unfrortunatelly that's not so easy to implement. It'll take a lot of time, so 98% that it will not be inclueded in the 4.0 release
plus one btw!
Need this feature!! Are there any known workarounds?
Possible base code for a workaround:
const handleChartHover = (param) => {
const seriesByDistance = [];
param.seriesData.forEach((value, serie, map)=> {
let refPrice = undefined;
const serieType = serie.seriesType();
if(serieType == 'Line') {
refPrice = value.value;
} else {
if(serieType == 'Candlestick') {
refPrice = value.close;
}
}
if(refPrice != undefined) {
const distance = refPrice - serie.coordinateToPrice(param.point.y);
seriesByDistance.push({
'distance': Math.abs(distance),
'serie': serie,
});
}
});
seriesByDistance.sort((a, b) => a.distance - b.distance);
console.log('seriesByDistance', seriesByDistance);
}
chart.subscribeCrosshairMove(handleChartHover);