Pre loader

RolloverModifier - show one tooltip when having multiple datasets

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
0
0

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

Version
3.5.687
  • You must to post comments
Best Answer
0
0

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
    })
  );
  • You must to post comments
1
0

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

  • You must to post comments
0
0

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.

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.