SciChartJS - Programatically show RolloverModifier Tooltip and keep it visible all the time

Hi Sachin

I’ve managed to figure this out almost. Here is a CodePen.

How this works:

We create a class which inherits RolloverModifier.

// required imports. For npm use import { RolloverModifier, ... } from "scichart"
const { RolloverModifier, EMousePosition, Point, translateFromSeriesViewRectToCanvas } = SciChart;

// Workaround for programmatically placing a RolloverModifier at a specific location
class CustomPlacementRollover extends RolloverModifier {
  constructor() {
    super();
  }

  // do nothing (disable default behavior)
  modifierMouseMove(e) { }
  modifierMouseLeave(e) { }

  onParentSurfaceRendered() {

    const xAxis = this.parentSurface?.xAxes?.getById(this.xAxisId);
    if (xAxis && this.xValue && this.parentSurface?.seriesViewRect) {
      // Convert xValue from data to coordinate.
      const xCoord = xAxis.getCurrentCoordinateCalculator()?.getCoordinate(this.xValue);
      // Translate from the seriesViewRect back to the parent canvas (rollover expects coords in this space)
      const hackedMousePoint = translateFromSeriesViewRectToCanvas(new Point(xCoord, 0), this.parentSurface.seriesViewRect);
      // Simulate rollover at x,y coord
      console.log(`Simulating a mouse move to (x,y) = ${hackedMousePoint?.toString()}`);
      super.modifierMouseMove({ mousePoint: hackedMousePoint });
    }

    super.onParentSurfaceRendered();
  }

  setXValue(xValue) {
    console.log(`Setting XValue to ${xValue}`);
    this.xValue = xValue;
  }
}

When the parent chart renders, it gets an X-Value e.g. X=10 and converts this into a pixel coordinate, then forces modifierMouseMove on the base RolloverModifier class. We also disable the default mouse-move behaviour by overriding modifierMouseMove and doing nothing.

This doesn’t satisfy all your requirements such as click + placement via CTRL but does show how you can ‘hack’ the RolloverModifier to be placed programmatically.

Suggest if you extend this – try to override modifierMouseDown or modifierMouseUp and capture the args.mousePoint from ModifierMouseArgs passed into the function. Detect if this.ctrlKey is true and then set isEnabled on the modifier.

Can you give me feedback so far on the codepen?

Best regards
Andrew

Update:

For the second requirement – placing rollover on CTRL+CLICK turns out this is much easier.

const { RolloverModifier } = SciChart;

// or for npm import { RolloverModifier } from "scichart"

// Workaround for placing a RolloverModifier on CTRL+Click
// Clicking without CTRL will hide the rollover
class RolloverPlacedOnClick extends RolloverModifier {
  constructor() {
    super();
  }

  // do nothing (disable default behavior)
  modifierMouseMove(e) { }
  modifierMouseLeave(e) { }

  modifierMouseDown(e) {
    if (e.ctrlKey) {
      console.log(`RolloverModifier clicked at ${e.mousePoint.x}, ${e.mousePoint.y}`);
      super.modifierMouseMove(e);
    } else {
      console.log(`hiding rollover`);
      super.modifierMouseLeave(e);
    }
  }
}

Codepen

Here is a second CodePen

How this works

various functions in the RolloverModifier perform actions. For instance:

• modifierMouseMove is the default function which updates the RolloverModifier as you move the mouse. This expects ModifierMouseArgs which has a property mousePoint which defines the x,y coordinate on the parent <div>
• modifierMouseLeave is used by default to hide the rollover line when user mouse exits the chart viewport
• onParentSurfaceRendered is called every time the chart updates or redraws to reposition tooltips
• modifierMouseDown is not used by RolloverModifier, but we use this here and forward the event either to modifierMouseMove (causing placement of a rollover line) or modifierMouseLeave hiding it.

Voila!

WOW! Thank you @Andrew. Let me pick your solution and put it my project to see how it works out. Looks like it will.

Please allow me until mid next-week to get back to you on this. Based on your original response, I thought it would take you few days to investigate, so, I moved to other priorities. I will definitely get back to you early to mid next-week.

Thank you so much and as always, you are fantastic!

Best Regards,
Sachin Patel.

Hello Andrew, Your solution works, but, not when the charts are embedded in SciChartVerticalGroup. We are stacking multiple chart using SciChartVerticalGroup.

However, I have uploaded a solution that works with SciChartVerticalGroup by extending your solution.

Can you please check my solution to see if I implemented it in a way, you would have implemented yourself?

The solution is located in:

• CodeSandBox
• OR
• Github

Few other things that I observed:

1: Using % to size the charts in the containers

• In the MultiChart.tsx file, I was not able to use 50% height for each of the charts. It just didn’t work!
• I would appreciate if you could look into it and tell my what I am doing wrong.

2: Rollover tooltip hides when mouse leaves the chart(s)

• If I subscribe to mouseleave event using sciChartSurface.domCanvas2D.addEventListener('mouseleave', ...), then, the Rollover tooltip hides.
• I am using this event (and mouseenter) to track which chart within the stack is going to be active.
• I can fix it by either not using mouseleave event OR by using another modifier.
• I thought, I should at least let you know if this is intentional from your side or some other side effect.

Best Regards,
Sachin Patel