Chart Extension & Registries

ChartType is an open string union: 'line' | 'bar' | 'area' | 'pie' | 'doughnut' are built in, and any other string can be registered as a custom type; unregistered types fall back to the built-in line behavior.

Registering an ECharts series mapping

import { registerEChartsSeries } from '@meterry/component-react' // same for the Vue package

registerEChartsSeries(
  'r9s:spark',
  (series) => ({
    type: 'bar',
    data: series.points.map((point) => point.value),
  }),
)

Once registered, use it directly (rows come from your client query, as in Getting Started):

<MeterChart type="r9s:spark" data={rows} x="bucket" series={[...]} />

Loading extra ECharts modules

The React/Vue packages bundle only the echarts modules needed by line/bar/pie. If your custom type needs another series (scatter, radar, …), register the required modules through the third argument of registerEChartsSeries; otherwise echarts cannot render it:

import { ScatterChart } from 'echarts/charts'
import { registerEChartsSeries } from '@meterry/component-react'

registerEChartsSeries(
  'scatter',
  (series) => ({
    type: 'scatter',
    data: series.points.map((point) => point.value),
  }),
  { modules: [ScatterChart] },
)

Registry lifecycle

unregisterChartSvgRenderer(type)
unregisterEChartsSeries(type)

After unregistering, the type reverts to the line fallback behavior.

Scoped isolation for micro frontends

When multiple independently deployed bundles coexist on one page (micro frontends), create isolated scoped registries with createChartSvgRendererRegistry() / createEChartsSeriesRegistry(); they never affect the global registry, and passing false creates an empty registry without the built-in types. renderChartSvg(model, registry) and createEChartsOption(model, registry) accept an explicit registry, and the React/Vue MeterChart / MeterUsage support the seriesRegistry prop:

import { createEChartsSeriesRegistry } from '@meterry/component'

const registry = createEChartsSeriesRegistry()
registry.register('r9s:spark', sparkBuilder)
// only affects components given this registry; the global one stays clean

<MeterChart type="r9s:spark" seriesRegistry={registry} ... />

ECharts-free setups: SVG renderers

In headless / ECharts-free setups, register an SVG renderer with registerChartSvgRenderer(type, renderer) and emit a pure SVG string via renderChartSvg(model):

import {
  createChartModel,
  registerChartSvgRenderer,
  renderChartSvg,
} from '@meterry/component'

registerChartSvgRenderer('r9s:spark', (model, width, height) => {
  // return an SVG string
})

const model = createChartModel({ type: 'r9s:spark', data: rows, series: [...] })
const svg = renderChartSvg(model)

Headless data models

Use core directly without the components:

import { createChartModel, createTableController } from '@meterry/component'

// rows: fetched from the meter service and mapped app-side
const model = createChartModel({
  type: 'bar',
  data: rows,
  x: 'bucket',
  series: [{ key: 'tokens', label: 'Tokens', value: 'tokens' }],
  height: 180,
})
// model.labels / model.series / model.maxValue ... can feed any UI

const controller = createTableController({ columns, data: rows, pageSize: 10 })
controller.subscribe((state) => render(state))
void controller.load()

See API Reference · core for the complete export list.