OrbChartsOrbCharts

Events

OrbCharts' events are exposed as RxJS streams, all on chart.context. You can listen to event$ (e.g. when a user clicks a datum), and you can trigger eventTrigger$ from the outside (e.g. to control highlighting programmatically).

EventType

type EventType =
  | 'click'
  | 'mouseover'
  | 'mousemove'
  | 'mouseout'
  | 'dragstart'
  | 'drag'
  | 'dragend'
  | 'zoom'
  | 'transitionMove'
  | 'transitionEnd'
EventFires when
clickA data element is clicked
mouseoverThe pointer enters a data element
mousemoveThe pointer moves over a data element
mouseoutThe pointer leaves a data element
dragstartA drag begins
dragA drag is in progress
dragendA drag ends
zoomA zoom occurs (e.g. on zoomable charts)
transitionMoveAn animation is in progress (each frame)
transitionEndAn animation finishes

EventData

Each event carries an EventData object:

interface EventData<T = ModelType> {
  eventName:  EventType
  pluginName: string
  layerName:  string
  target:     RenderDatumBase<T> | null
  data?:      any
  tween?:     number   // 0–1 animation progress
  event?:     Event    // DOM event
}
FieldTypeDescription
eventNameEventTypeThe kind of event
pluginNamestringName of the Plugin that fired the event
layerNamestringName of the Layer that fired the event
targetRenderDatumBase<T> | nullThe data element for the event; null when there is none
dataanyAdditional payload (depends on the event)
tweennumberAnimation progress, range 0–1 (only animation events such as transitionMove)
eventEventThe original DOM event (if any)

target is the rendered data node; its fields (such as id, value, series) vary by data dimension. For the full types, see TypeScript Types.

Listening for events

chart.context.event$ is an RxJS Observable. Subscribe to it to listen for all events:

import { OrbCharts } from '@orbcharts/core'
import { GridPlot } from '@orbcharts/plugin-basic'
import type { EventData } from '@orbcharts/core'
 
const chart = new OrbCharts(element, {
  data,
  plugins: [new GridPlot({ Bar: {}, CategoryAxis: {}, ValueAxis: {} })],
})
 
const subscription = chart.context.event$.subscribe((e: EventData) => {
  if (e.eventName === 'click' && e.target) {
    console.log('Clicked:', e.target.id, e.target.value)
  }
})

Tip: event$ emits all events, so you'll usually filter by e.eventName to pick out the kind you care about.

Note: Calling chart.destroy() cleans up the chart's internal subscriptions, but it does not automatically cancel a subscribe you created on the outside. Call subscription.unsubscribe() yourself on component unmount, then call chart.destroy(), to avoid memory leaks.

// On component unmount
subscription.unsubscribe()
chart.destroy()

Triggering events

chart.context.eventTrigger$ is an RxJS Subject that lets you push events in from the outside—for example to trigger a highlight programmatically or to sync with other UI:

chart.context.eventTrigger$.next({
  eventName: 'mouseover',
  pluginName: 'GridPlot',
  layerName: 'Bar',
  target: someDatum,
})