Plugins (Weave)

Weave is the public plugin platform introduced in ApexCharts 6.0. A plugin draws into its own sandboxed layer and subscribes to lifecycle hooks against a stable, versioned API. It never touches raw internal state, so you can publish reusable plugins to npm and they keep working as the library's internals change.

Enable the feature

Weave is tree-shakeable. Import the feature once, then register plugins on the ApexCharts class:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/weave'

Register a plugin

ApexCharts.registerPlugin(def) registers a plugin globally. Each plugin declares an apiVersion and a setup(api) function that wires up its hooks:

ApexCharts.registerPlugin({
  name: 'watermark',
  apiVersion: 1,
  setup(api) {
    api.on('draw', ({ layer, scales }) => {
      layer.text({ x: 10, y: 20, text: 'ACME', size: '12px' })
    })
  },
})

ApexCharts.unregisterPlugin(name) removes it again, which is useful in tests and hot-reload.

Activate a plugin per chart

Registering makes a plugin available; a chart opts in through the plugins array. You can pass per-chart options and an order:

const options = {
  plugins: [{ name: 'watermark' }],
}

At runtime, chart.updateOptions({ plugins: [{ name, options }] }) reconfigures an active plugin.

The plugin API

setup(api) receives a facade, never the internals:

api.layer	A plugin-owned drawing surface with line, path, rect, circle, and text.
api.scales	Convert data values to pixels for the current view.
api.data	Read-only access to the resolved series data.
api.theme	The resolved theme (colors, tokens).
api.store	Per-plugin state that survives redraws.
api.on(event, cb)	Subscribe to lifecycle hooks such as draw.

The apiVersion field gates the contract, so raw internals can keep changing safely while your plugin keeps working.

When to use Weave

Reach for a plugin when you have a reusable, cross-chart behavior you want to package and share (a watermark, a domain-specific overlay, a custom guide layer). For a one-off drawing on a single chart, annotations are simpler; for a new mark shape driven by your data, use a custom series (Marks).

Weave ships as a tree-shakeable entry point; see the tree-shaking guide for the full list.