Pre loader

Display Rollover Modifier only on selected graph

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

0
0

Hello,

I am having a problem where I want to display the Rollover Modifier only when I click on the selected graph.
For example:
https://demo.scichart.com/javascript-chart-rollovermodifier-tooltips
If I select the Second Lines Series, I want to see the rollover only for that particular graph and not the first one and the third one.

I have tried using charts id’s as a reference to show only one tooltip but it just enables it for all the graphs.

Any help would be kindly appreciated.

Version
3.3.560
  • You must to post comments
0
0

Hello,

To implement this you would probably need the Series Selection API in combination with a custom Rollover Modifier.

class CustomRolloverModifier extends RolloverModifier {
  getIncludedRenderableSeries() {
    return super.getIncludedRenderableSeries().filter((rs) => rs.isSelected);
  }
}

const rolloverModifier = new CustomRolloverModifier({
  showRolloverLine: true,
  showTooltip: true,
  // ...
});

const seriesSelectionModifier = new SeriesSelectionModifier({
  enableSelection: true,
  onSelectionChanged: (args: SelectionChangedArgs) => {
    args.allSeries.forEach((rs) => {
      rolloverModifier.includeSeries(rs, false);
    });
    rolloverModifier.includeSeries(args.selectedSeries[0], true);
  },
});

sciChartSurface.chartModifiers.add(rolloverModifier, seriesSelectionModifier);

Here is a live CodeSandbox Example:

Also consider checking out the Cursor Modifier.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.