Charts

v0.0.2

ECharts wrapped in the Flab theme, shipped from @flabbergasted-ai/charts. Separate from the core package on purpose: ECharts is the right tool for time series, distributions and part-to-whole, and the wrong tool for the thin inline bars in tables — those are plain SVG in the Meter family. Each chart registers only the modules it uses and honours reduced motion. For anything the wrappers don't cover, drop down to the <Chart> base with your own ECharts option and module set.

Chart types

Each chart type has its own page with focused examples. The loading, empty, events and ref features below are shared by all of them.

Events

Pass ECharts event handlers through events. Handlers are read live, so an unmemoised object won't rebind the listener on every render.

Click a bar to see its value.

const events = useMemo(  () => ({ click: (p) => setSelected(`${p.name} (${p.value})`) }),  [],);
<BarChart  ariaLabel="Orders by region — click a bar"  categories={['North', 'South', 'East', 'West']}  series={[{ name: 'Orders', data: [420, 332, 301, 234] }]}  events={events}  showLegend={false}/>

Loading

The loading prop shows the built-in ECharts indicator, coloured from Flab tokens. The mask is translucent, so a refresh dims the old chart rather than blanking it.

<LineChart  loading={loading}  ariaLabel="Weekly active users"  categories={['W1', 'W2', 'W3', 'W4', 'W5', 'W6']}  series={[{ name: 'Active', data: [820, 932, 901, 1034, 1120, 1284] }]}  showLegend={false}/>

Empty state

With no data, the chart engine is skipped entirely and the empty node renders in its place — no bare set of axes.

No orders in this range

Widen the date range to see results.

<BarChart  ariaLabel="Orders by region"  categories={[]}  series={[]}  empty={    <EmptyState      variant="no-results"      title="No orders in this range"      description="Widen the date range to see results."    />  }/>

Instance ref

A ref exposes getInstance() for imperative work — here, exporting the chart as a PNG via the ECharts instance.

Free
Team
Enterprise

const ref = useRef<ChartHandle>(null);
function download() {  const url = ref.current?.getInstance()?.getDataURL({ pixelRatio: 2 });  if (!url) return;  const link = document.createElement('a');  link.href = url;  link.download = 'chart.png';  link.click();}
<DonutChart ref={ref} ariaLabel="Plan distribution" data={data} />

Shared props

Accepted by every chart type. Type-specific props are documented on each chart's page.

Prop	Type	Default	Notes
`ariaLabel`	`string`	—	Required. Describes what the chart shows.
`theme`	`'light' \| 'dark'`	`'light'`	Pass the resolved theme from useTheme.
`height`	`number \| string`	`240`	Chart height.
`renderer`	`'canvas' \| 'svg'`	`'canvas'`	SVG is crisper for print and cheaper for many small charts.
`loading`	`boolean`	`false`	Show the themed loading indicator over the chart.
`events`	`Record<string, (params) => void>`	—	ECharts event handlers, e.g. { click, legendselectchanged }. Memoise the object.
`empty`	`ReactNode`	—	Rendered instead of the chart when there is no data; the engine is skipped.
`ref`	`Ref<ChartHandle>`	—	Exposes getInstance() for imperative work, and resize().