Skip to main content
Version: 4.2.1

Events

LightningChart JS has a lot of events that user applications can subscribe to for implementing dynamic interactions and reactions. These methods all follow the same basic syntax that is identified by methods starting with on... (for subscription) and off... (for unsubscription) respectively:

Axis.onIntervalChange((axis, start, end) => {
    // This function is executed when Axis interval changes
})

The supplied callback function is called whenever the event is fired. The parameters depend on the type of event, but the first parameter is always a reference to the object that fires the event.

Event handlers can be removed by unsubscribing from the event:

const token = Axis.onIntervalChange((axis, start, end) => {
    // Do something ...
})

// Unsubscribe from event by using the token received on subscription
Axis.offIntervalChange(token)

User interaction events​

One important type of user interaction events are those triggered by user interactions, like moving mouse over a chart, or clicking on a component. Almost all parts of LightningChart components expose the possibility for tracking user interactions independently. For example:

ChartXY.onSeriesBackgroundMouseClick((chart, event) => {
    // This function is executed when series background is clicked.
    // event = original JavaScript event. It includes info like where the mouse is, etc.
})

The currently available methods for tracking user interactions are:

  • onMouseClick
  • onMouseDoubleClick
  • onMouseEnter
  • onMouseMove
  • onMouseLeave
  • onMouseDown
  • onMouseUp
  • onMouseDragStart
  • onMouseDrag
  • onMouseDragStop
  • onTouchStart
  • onTouchMove
  • onTouchEnd

Note, that the method name might have some additional prefix to indicate what part of the component the interaction is attached to. For example, above, onSeriesBackgroundMouseClick.

Often, event handlers need to do something with the location of the event. This is accessed with event.clientX and event.clientY properties which originate from MouseEvent API. These coordinates can be translated to useful coordinate systems in LightningChart domain, such as Axis coordinates. See Coordinate translations for more information.