Hi,
I am using scichart for Vue.js app (with npm for version 3.5.687 ) .
Added ‘chartModifiers’ of ‘rolloverModifier’ to show tooltip when hovering above the lines.
I have multiple datasets and i only want to show one tooltip at a time for the nearest chart.
I added snapToDataPoint: true
and it doesnt do anything.
Can I get some help with that?
Thanks
- Avital Rubin asked 3 weeks ago
- last edited 3 weeks ago
- You must login to post comments
There is no dedicated property for that, you’ll need to override the modifier.
The main point to override is CalculateTooltipPositions
method. It recieves enough info to perform all of the necessary calcaulations. (i.e. find the nearest data point)
There the required info could be extracted from the results of hit test.
Depending on the requirements of behaviour on “pointerleave” and “pointerout” events, you might need to override the corresponding handlers as well. See Custom Chart Modifiers API
Full live example at CodeSandbox
class NearestPointRolloverModifier extends RolloverModifier {
protected CalculateTooltipPositions(
tooltipArray: TTooltipProps[],
allowTooltipOverlapping: boolean,
spacing: number,
seriesViewRect: Rect,
pixelRatio: number,
isVerticalChart: boolean = false
): TTooltipProps[] {
const allTooltips = super.CalculateTooltipPositions(
tooltipArray,
true,
spacing,
seriesViewRect,
pixelRatio,
isVerticalChart
);
let min = Number.MAX_SAFE_INTEGER;
let nearestTooltip: TTooltipProps = null;
allTooltips.forEach((tooltip) => {
if (tooltip.seriesInfo.distance < min) {
min = tooltip.seriesInfo.distance;
nearestTooltip = tooltip;
}
});
return [nearestTooltip];
}
}
// usage
sciChartSurface.chartModifiers.add(
new NearestPointRolloverModifier({
rolloverLineStroke: appTheme.VividOrange,
showTooltip: true,
hitTestRadius: 100000, // some large number to apply hit test detection on the whole viewport
})
);
- Jim Risen answered 3 weeks ago
- last edited 3 weeks ago
- You must login to post comments
hi Jim,
thanks for your reply!
I saw the hitTestRadius , but them problem is that i dont have a const number for the radius.
I want to show only one tooltip at every given time. and it will be the tooltip for the nearest graph to my mouse.
Is there a solution for that?
Thanks
- Avital Rubin answered 3 weeks ago
- last edited 3 weeks ago
- You must login to post comments
Hello, you are using the wrong property.
The purpose of the snapToDatapoint
flag is to define the tooltip transition behavior between data points.
What you are looking for is the hitTestRadius
property.
Setting a custom value on it will change the default behavior of the hit test applied by RolloverModifier.
This information is provided on the corresponding documentation page.
- Jim Risen answered 3 weeks ago
- You must login to post comments
Please login first to submit.