Issues with RolloverModifier

[hecto932]

Hi guys!

I'm adding the rolloverModifier to watch the values on the chart using the cursor and I'm getting this issue.

Also, I don't know if this is a bug, but I need to know when each modifier is being attached or detached, so when I comment on this code from the example, it works.

 const setTooltip = (resScichartSurface: SciChartSurface) => {
    const tooltipModifier = new RolloverModifier();

    // tooltipModifier.onDetach = () =>
      console.log(`${id}: tooltip rolloverModifier removed!`);
    // tooltipModifier.onAttach = () =>
      console.log(`${id}: tooltip rolloverModifier attached`);

    resScichartSurface.chartModifiers.add(tooltipModifier);
    setSciChartTooltip(tooltipModifier);
  };

I have a simple sample about this issue here.

https://github.com/hecto932/scichart-example-issue

Please don't hesitate to ask me if you have any doubt.

[klishevich]

Hi @hecto932! Because for some of the modifiers (for RolloverModifier) onAttach and onDetach methods are used internally we cannot just override them, we need to call super. Therefore, you should create a custom modifier like this:

class RollModifier2 extends RolloverModifier {
  private id: string;

  constructor(id: string, options?: IRolloverModifierOptions) {
    super();
    this.id = id;
  }

  onDetach() {
    super.onDetach();
    console.log(`${this.id}: tooltip rolloverModifier removed!`);
  }

  onAttach() {
    super.onAttach();
    console.log(`${this.id}: tooltip rolloverModifier attached!`);
  }
}

And use it like this:

 const setTooltip = (resScichartSurface: SciChartSurface) => {
    const tooltipModifier = new RollModifier2(id);

    resScichartSurface.chartModifiers.add(tooltipModifier);
    setSciChartTooltip(tooltipModifier);
  };

[hecto932]

Oh, got it. I'll try to do that.

[hecto932]

Hi @klishevich!

Thank you for the idea of creating a custom rollover modifier.

I don't know why, but I'm still getting the same issue trying to display the tooltip

In that image, the tooltip has been added, but It isn't showing up.

Do you have any idea about what is happening?

I've updated the scichart repository using the custom rollover modifier.

[klishevich]

Hi @hecto932 the problem is this line resScichartSurface.annotations.clear():

  const setAnnotations = (resScichartSurface: SciChartSurface) => {
    // resScichartSurface.annotations.clear();

    // ADD ANNOTATIONS
    annotations.forEach((item: IAnnotation) => {
      resScichartSurface.annotations.add(item);
    });
  };

When you call annotations.clear() it clears all the annotations including RolloverModifier VerticalLine annotation. Just remove this line and it will fix the issue.

[hecto932]

Hi @klishevich, thanks for your response.

Why The RolloverModifier is being affected by this issue?

Is it a bug?

Why should be the right way to delete all the annotations on the surface?

[andyb1979]

Hi Hector

Good point, we were discussing today how the annotation collections exposed by the API should be separate to the annotations for modifiers (like the rollover). This is how it is on other platforms of SciChart (Windows, mobile).

We'll take a look at this and get back to you. In the meantime, does the workaround work?

Best regards, Andrew

On Wed, Mar 24, 2021 at 5:09 PM Hector Jose Flores Colmenarez < @.***> wrote:

Hi @klishevich https://github.com/klishevich, thanks for your response.

Why is the rollover being affecting by this?

Is it a bug?

Why should be the right way to delete all the annotations on the surface?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ABTSoftware/SciChart.JS.Examples/issues/67#issuecomment-806003432, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADLEDVOUMGK3GWOCKLGNSPDTFIMF3ANCNFSM4ZP6OIXA .

[hecto932]

Hi @andyb1979, thanks for your response.

Yes, I think in the meantime this solution works for me.

Please, feel free to share with me any update about how you are going to handle the Annotations or Modifiers in the future

Regards!