Create Plugin

This chapter mainly explains how to create a Plugin object and the APIs that can be used by the Plugin object.

Plugin Class

Each Plugin has its own data class, which means it must be used on chart objects created by the same data class chart type (SeriesChart, GridChart, etc.).

Import method:

import { Pie } from 'orbcharts'

Plugin Object

A Plugin object is created by using the new keyword on the "Plugin Class".

For example:

import { Pie } from 'orbcharts'

const pie = new Pie()

To add a Plugin object to a chart, it must be used with the plugins$ API on the chart object. Here, we use Pie and PieLabels as examples:

import { SeriesChart, Pie } from 'orbcharts'

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

const chart = new SeriesChart(element)

const pie = new Pie()

const pieLabels = new PieLabels()

chart.plugins$.next([ pie, pieLabels ])

params$ of Plugin Object

The Plugin object provides an API params$ to set the parameters of the Plugin object. Each Plugin has its own parameters that can be set (please refer to the documentation for details), and all parameters are optional.

• Syntax:

plugins.params$.next(Params)

• Example:

const pie = new Pie()
const pieLabels = new PieLabels()

pie.params$.next({
  // parameters
})
pieLabels.params$.next({
  // parameters
})

chart.plugins$.next([pie, pieLabels])

There is no restriction on using params$ before or after the Plugin object is added to the chart object. The drawing result will not be affected regardless of the order.

For example, the result is the same if the params$ operation is placed afterwards:

const pie = new Pie()
const pieLabels = new PieLabels()

chart.plugins$.next([pie, pieLabels])

pie.params$.next({
  // parameters
})
pieLabels.params$.next({
  // parameters
})

TIP

RxJS handles data flow events asynchronously. OrbCharts will collect all data created by the APIs internally, merge and calculate them, and then pass them to the drawing function. Therefore, the order does not matter.