Pre loader

The ZoomPanModifier prevents keyboard events to reach other custom modifiers

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


I am trying to add a custom modifier (derived from ChartModifierBase2D) to allow our users to navigate through datapoints using keyboard — left and right arrows.
But, the ZoomPanModifier prevents the keyboard events to reach this custom modifier.

Steps to reproduce the issue:
1. For example, use the following modifier that just listens to keyboard event and logs the event to console.
2. Add ZoomPanModifier along with the custom modifier.
3. Click on the chart to focus it and then press arrow keys. Nothing will be logged in the console.
4. Disable the ZoomPanModifier (either by setting its this.isEnabled = false or removing it entirely).
5. Click on the chart to focus it and then press arrow keys. You will see the keys logged in the console.

export class DataPointNavigatorModifier extends ChartModifierBase2D {
  public readonly type: string;

  constructor(options?: IChartModifierBaseOptions) {
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.type = 'DataPointNavigatorModifier';

  private handleKeyDown(ev: KeyboardEvent) {
    console.log('DataPointNavigatorModifier::handleKeyDown', ev);

  override onAttach() {
    this.parentSurface.domChartRoot.tabIndex = this.parentSurface.domChartRoot.tabIndex || 0;
    this.parentSurface.domChartRoot.addEventListener('keydown', this.handleKeyDown);

  override onDetach() {
    this.parentSurface.domChartRoot.removeEventListener('keydown', this.handleKeyDown);

I am open to other solutions that would allow users to navigate through datapoints using keyboard.

Best Regards,
Sachin Patel.

  • You must to post comments

Hello! I couldn’t reproduce the issue. But here are some suggestions:

Make sure the root element is focused and has the proper tabIndex.
Try switching the order of adding the modifiers.
ZoomPanModifier calls “preventDefault” so this potentially may be the issue.

If the issue persists please send us a reproducible example via CodePen or CodeSandbox.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.