Plugin API

Every OrbCharts Plugin (such as GridPlot or PartitionPlot) shares the same set of operations and common parameter types. This page covers those shared concepts; each Plugin page only describes what is specific to it.

How layer visibility works

Each Plugin is composed of multiple Layers, where each Layer renders one visual element (e.g. bars, lines, axes). The Layer names you list in the params are the Layers that get shown.

// Show Bar + the two axes
new GridPlot({ Bar: {}, CategoryAxis: {}, ValueAxis: {} })
 
// List Line instead → a line chart
new GridPlot({ Line: {}, CategoryAxis: {}, ValueAxis: {} })

The rules:

1. The Layer names in the params object (capitalized, e.g. Bar, Line, Pie) determine which Layers are shown.
2. If you specify no Layers at all (e.g. new GridPlot()), the Plugin's system default Layers are shown (each Plugin page states its defaults).
3. Plugin-level params (such as direction, styles, container) are not Layer names and don't affect which Layers are shown.

Tip: Layer names are always capitalized (Bar, ValueAxis); Plugin-level params are lowercase (direction, separateSeries). Both can appear in the same params object.

Switching Layers dynamically

After creating a Plugin, you can control visibility at runtime:

const plugin = new GridPlot({ Bar: {}, CategoryAxis: {}, ValueAxis: {} })
 
plugin.show('Line')                 // additionally show one or more Layers
plugin.hide('Bar')                  // hide specified Layers
plugin.showOnly(['Line', 'ValueAxis'])  // show only these Layers
plugin.showAll()                    // show all Layers
plugin.hideAll()                    // hide all Layers
plugin.toggle('Point')              // toggle on/off
plugin.getShownLayerNames()         // get the array of currently shown Layer names

Updating parameters

// Partial update (deep-merged with existing params)
plugin.updateParams({ Bar: { barWidth: 20 } })
 
// Fully replace a Layer's params
plugin.forceReplaceParams({ Bar: { barWidth: 20, barPadding: 2, barGroupPadding: 10, barRadius: 4 } })
 
// Get current params
const params = plugin.getParams()

Lifecycle

plugin.destroy()  // release resources, remove event listeners

Tip: On component unmount (e.g. React's useEffect cleanup, Vue's onUnmounted), calling chart.destroy() cleans up its Plugins as well.

Shared parameter types

The following parameter types appear in most chart Plugins. Each Plugin may have different default values, but the structure is the same.

styles (GraphicStyles)

Controls padding, highlight behavior, and animation—the shared visual styles across all chart Plugins.

Note: The defaults for padding and transitionDuration vary by Plugin (e.g. ScatterPlot uses a shorter animation). Refer to the defaults stated on each Plugin's page.

container (Container)

Controls multi-chart layout (arranging several charts of the same type in a grid within one chart).

visibleFilter

Filters which data to show; data points that return false are not drawn.

new GridPlot({
  visibleFilter: (datum) => datum.value !== null && datum.value > 0,
})

Defaults to (datum) => true (show everything).

datasetIndex

When the data is multi-dataset (2D RawData), specifies which dataset to use. Defaults to 0.

Color settings

Many Layer parameters use ColorType to specify colors (e.g. 'data', 'primary'). See Theme for the full explanation.

Related

• Theme — themes and ColorType
• GridPlot — a complete example using GridPlot