Search code examples
javascriptlightningchart

LightningChart JS: Assigning different MouseButton to Axis Interaction

We have a legacy desktop application with charts that have a specific handling of axis interaction our users are accustomed to.

Web-based interaction is now being moved to LightningChartJS. However, the API does not seem to offer to customize its behavior based on the mouse button.

Among others, we would like to enable panning an Axis using the left mouse button instead of RMB. The doc specifically references RMB though.

Solution

  • Since LightningChart JS v3.0.0 this is possible with the use of overrideInteractionMouseButtons initialisation option.

     const lcjs = lightningChart({
     // LightningChartOptions
     overrideInteractionMouseButtons: {
         chartXYPanMouseButton: 0, // LMB
         chartXYRectangleZoomFitMouseButton: 2, // RMB
     }
 })

    See OverrideInteractionMouseButtons for details on which interactions can be moved to different mouse buttons.