Events

LightningChart JS Trader has several events that can be used to add custom user interactions to the chart. Each event comes with a built-in set of parameters such as the current pointer location, pressed mouse button, and the current data point count. The available parameters depend on the used event.

All events work by subscribing to onEventName event.

// Subscribing to PointerDown event.
// ZoomToFit action (fit all data on screen) is performed when the middle mouse button is pressed.
tradingChart.onPointerDown((e) => {
  if (e.button == 1) {
    tradingChart.zoomToFit()
  }
})

Unsubscribing from an event is done by calling respective offEventName.

// Unsubscribing from PointerDown event.
tradingChart.offPointerDown()

Chart events

The following events can be accessed directly via the TradingChart instance. Use the respective offEventName method to unsubscribe from them.

onChartClicked
Event is triggered when the TradingChart instance is clicked. This includes the main chart, the margin area, and the menus. If only the chart area should trigger the event, it is recommended to use PointerDown or PointerUp events.

Parameters:

button - The pressed mouse button
axisX - The clicked point X-coordinate in axis value
axisY - The clicked point Y-coordinate in axis value
pixelsX - The clicked point X-coordinate in screen coordinates (pixels)
pixelsY - The clicked point Y-coordinate in screen coordinates (pixels)

onClearEverything
This event fires when the chart is completely cleared via Clear Everything button found under delete menu, or when clearEverything() method has been called in code.

Parameters: None

onDataModified
This event is fired whenever the data added to the chart is modified. The triggering actions include adding or removing data points, replacing the dataset, or updating the last point via updateLastDataPoint() method. Switching to certain chart types such as Renko and Kagi can also trigger the event.

Parameters:

pointCount - The current point count after the changes to the data.

onPointerDown
Triggers when any mouse button is pressed down on top of the main chart. Chart's margins do not trigger the event.

Parameters:

button - The pressed mouse button
axisX - The clicked point X-coordinate in axis value
axisY - The clicked point Y-coordinate in axis value
pixelsX - The clicked point X-coordinate in screen coordinates (pixels)
pixelsY - The clicked point Y-coordinate in screen coordinates (pixels)

onPointerUp
Triggers when any mouse button is released on top of the main chart. Chart's margins do not trigger the event.

Parameters:

button - The released mouse button
axisX - The clicked point X-coordinate in axis value
axisY - The clicked point Y-coordinate in axis value
pixelsX - The clicked point X-coordinate in screen coordinates (pixels)
pixelsY - The clicked point Y-coordinate in screen coordinates (pixels)

onPointerMove
This event is fired when pointer is moved on the main chart.

Parameters:

axisX - The clicked point X-coordinate in axis value
axisY - The clicked point Y-coordinate in axis value
pixelsX - The clicked point X-coordinate in screen coordinates (pixels)
pixelsY - The clicked point Y-coordinate in screen coordinates (pixels)

onXAxisRangeChanged
The event is fired whenever the X-axis (time axis) range is changed. This can happen due to zooming or panning, or when new data points are being added. Modifying certain settings such as price chart type or data point limit can also change the axis range thus triggering the event.

Parameters:

start - The new axis start value
end - The new axis end value

onYAxisRangeChanged
The event is fired whenever the Y-axis (price axis) range is changed. This can happen due to zooming or panning, or when new data points are being added. Modifying certain settings such as price chart type or data point limit can also change the axis range thus triggering the event. Note that only the main price axis causes the event to fire; study indicators' axes shown below the main chart do not trigger it.

Parameters:

start - The new axis start value
end - The new axis end value

Drawing tool events

Drawing tools have their own specific set of events. These work the same way as the main chart's events.

// Adding Cross Line drawing tool in code and subscribing to its DrawingToolMoved event.
// The Cross Line's position is written to the console whenever the event is fired.
const crossLine = tradingChart.drawingTools().addCrossLine(5, 5)
crossLine.onDrawingToolMoved((e) => {
  console.log('X: ' + e.xPosition + ' Y: ' + e.yPosition)
})

Unsubscribing from an event is done by calling respective offEventName.

// Unsubscribing from DrawingToolMoved event.
crossLine.offDrawingToolMoved()

onDrawingToolMoved
The event triggers when the drawing tool's position is being altered by either dragging the tool, or by calling updatePosition() in code. The event parameters indicating the tool's new location vary depending on how many control points the tool has.

Parameters:

drawingTool - Gets the drawing tool instance
startX - The first control point X-value (in drawing tools with two control points)
startY - The first control point Y-value (in drawing tools with two control points)
endX - The second control point X-value (in drawing tools with two control points)
endY - The second control point Y-value (in drawing tools with two control points)

onPointerDown
Triggers when any mouse button is pressed down on top of the drawing tool.

Parameters:

button - The pressed mouse button
drawingTool - Gets the drawing tool instance
isControlPoint - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
xPosition - The pointer's X-position in axis value
yPosition - The pointer's Y-position in axis value
xPositionClient - The pointer's X-position in screen coordinates (pixels)
yPositionClient - The pointer's Y-position in screen coordinates (pixels)

onPointerUp
Triggers when any mouse button is released on top of the drawing tool.

Parameters:

button - The released mouse button
drawingTool - Gets the drawing tool instance
isControlPoint - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
xPosition - The pointer's X-position in axis value
yPosition - The pointer's Y-position in axis value
xPositionClient - The pointer's X-position in screen coordinates (pixels)
yPositionClient - The pointer's Y-position in screen coordinates (pixels)

onPointerEnter
This event triggers when the pointer is moved onto the drawing tool.

Parameters:

drawingTool - Gets the drawing tool instance
isControlPoint - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
xPosition - The pointer's X-position in axis value when it entered the drawing tool
yPosition - The pointer's Y-position in axis value when it entered the drawing tool
xPositionClient - The pointer's X-position in screen coordinates (pixels) when it entered the drawing tool
yPositionClient - The pointer's Y-position in screen coordinates (pixels) when it entered the drawing tool

onPointerLeave
This event triggers when the pointer is moved away from the drawing tool.

Parameters:

drawingTool - Gets the drawing tool instance
isControlPoint - Tells if the event was triggered by one of the drawing tool's control points or some other part such as line.
xPosition - The pointer's X-position in axis value when it left the drawing tool
yPosition - The pointer's Y-position in axis value when it left the drawing tool
xPositionClient - The pointer's X-position in screen coordinates (pixels) when it left the drawing tool
yPositionClient - The pointer's Y-position in screen coordinates (pixels) when it left the drawing tool

Chart events​

Drawing tool events​

Chart events

Drawing tool events