Examples

Simplest Example - Pie Chart

Using a pie chart as an example, the minimum parameters required to draw a chart include plugins$ and data$:

import { SeriesChart, Pie } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

Pie Chart with Labels, Legend, and SeriesTooltip

You can add other Plugins (with the same Series data structure) as needed through plugins$:

import { SeriesChart, Pie, PieLabels, SeriesLegend, SeriesTooltip } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element)

chart.plugins$.next([new Pie(), new PieLabels(), new SeriesLegend(), new SeriesTooltip()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

View in Playground

Donut Chart - Using Preset

To modify the presentation of the chart (added Plugins), the simplest way is to use the Preset provided by OrbCharts:

import { SeriesChart, Pie, PieEventTexts, PieLabels, SeriesLegend, SeriesTooltip, PRESET_PIE_DONUT } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element, {
  preset: PRESET_PIE_DONUT
})

chart.plugins$.next([new Pie(), new PieEventTexts, new PieLabels(), new SeriesLegend(), new SeriesTooltip()])

chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

In fact, what Preset does is modify the default parameters of specific APIs. You can still achieve the same effect through APIs.

View in Playground

Donut Chart - Custom Parameters

If you don't want to use Preset or if Preset cannot achieve the adjustments you want, you can customize your chart style or behavior through APIs such as chartParams$ and dataFormatter$. Here is a simple example, and you can learn more details in the subsequent chapters of this document.

import { SeriesChart, Pie, PieLabels, SeriesLegend, SeriesTooltip, PRESET_PIE_DONUT } from 'orbcharts'

const element = document.querySelector('#chart')

const chart = new SeriesChart(element, {
  preset: PRESET_PIE_DONUT
})

const seriesLegend = new SeriesLegend()
seriesLegend.params$.next({
  placement: 'right-end'
})

const pie = new Pie()
pie.params$.next({
  outerRadius: 0.85,
  innerRadius: 0.5,
})

chart.dataFormatter$.next({
  separateSeries: true
})
chart.plugins$.next([new Pie(), new PieLabels(), seriesLegend, new SeriesTooltip()])
chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])