I am trying to modify the tooltip with the following code:
function tooltipTemplate(
id: string,
seriesInfo: SeriesInfo,
rolloverTooltip: RolloverTooltipSvgAnnotation
) {
console.log({
id,
seriesInfo,
rolloverTooltip,
});
return `<svg width="120" height="16">
<rect x="0" y="0" width="100%" height="100%" fill="${seriesInfo.stroke}"/>
<svg width="100%">
<text y="0" x="0" font-size="12" font-family="Verdana" dy="0" fill="white">
<tspan x="4" dy="1em">${seriesInfo.seriesName}: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>`;
}
It is working but now all the tooltip are on top of each other, how can I fix that?
Version
3.4.644
Images
- Jhonatan Laguna asked 1 month ago
- last edited 3 weeks ago
Is there a way to solve this?- This is for Rollover, no errors in console. the function works just fine, I just need a way to avoid the overlapping
- You must login to post comments
Hi Jhonatan,
When overriding RenderableSeries.rolloverModifierProps.tooltipTemplate, you will need to specify the size of the new tooltip so that SciChart.js can perform layout and stop them from overlapping.
Try this code instead:
const tooltipTemplate = (id, seriesInfo, rolloverTooltip) => {
rolloverTooltip.updateSize(120, 16); // This line is needed
return `<svg width="120" height="16">
<rect x="0" y="0" width="100%" height="100%" fill="${seriesInfo.stroke}"/>
<svg width="100%">
<text y="0" x="0" font-size="12" font-family="Verdana" dy="0" fill="white">
<tspan x="4" dy="1em">${seriesInfo.seriesName}: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>`
};
// Add a tooltipTemplate to this series to override the tooltip
lineSeries0.rolloverModifierProps.tooltipTemplate = tooltipTemplate;
- Andrew Burnett-Thompson answered 3 weeks ago
- You must login to post comments
Your Answer
Please login first to submit.
