SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis

  • User clicks on axis
  • Provide callback for side effect when clicked

Thanks

Version
1.4.1575
  • You must to post comments
1
0

Hi Henrique,

In order to implement a chart modifier that reacts to interactions within the axis you need to create a custom modifier like this:

import { ChartModifierBase2D, testIsOverAxes } from "scichart/Charting/ChartModifiers/ChartModifierBase2D";
import { translateFromCanvasToSeriesViewRect } from "scichart/utils/translate";
import { ModifierMouseArgs } from "scichart/Charting/ChartModifiers/ModifierMouseArgs";

export class TestModifier extends ChartModifierBase2D {
    public modifierMouseDown(args: ModifierMouseArgs): void {
        super.modifierMouseDown(args);

        const firstXAxis = this.parentSurface.xAxes.get(0);
        // test if the point is over the X Axis
        if (testIsOverAxes([firstXAxis], args.mousePoint)) {
            console.log("the mouse is over the first X Axis");
            // Get mouse click coordinates relative to the axis view rectangle
            const translatedPoint = translateFromCanvasToSeriesViewRect(args.mousePoint, firstXAxis.viewRect);
            console.log(translatedPoint);
        }
    }
}
Images
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.