@wizeworks/silicaui-charts

Silica UI charts — Apache ECharts wrapped in a single <Chart> component that auto-themes to your Silica design tokens. Full ECharts API, zero manual palette wiring.

Install

pnpm add @wizeworks/silicaui-charts @wizeworks/silicaui-react
pnpm add -D @wizeworks/silicaui tailwindcss

Usage

import { Chart } from "@wizeworks/silicaui-charts";

<Chart
  style={{ height: 320 }}
  option={{
    xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
    yAxis: { type: "value" },
    series: [{ type: "bar", data: [120, 200, 150, 80, 70] }],
  }}
/>

The chart re-reads Silica's color tokens — and re-inits, since ECharts themes are fixed at init — whenever the ambient theme changes (a data-theme flip or an OS light/dark switch), so it tracks the rest of your UI automatically. It also resizes with its container via a ResizeObserver. Give the container a height; ECharts can't measure a zero-height box.

<Chart> props

| Prop | Type | Default | | --- | --- | --- | | option | EChartsOption — the full ECharts option (series, axes, tooltip, legend, …) | — | | notMerge | boolean — replace the whole option instead of merging on update | true | | loading | boolean — toggle ECharts' built-in loading spinner | false | | renderer | "canvas" \| "svg" | "canvas" | | onInit | (chart: EChartsInstance) => void — called after each (re-)init | — |

Also ships <Sparkline> for compact inline trend charts, and re-exports EChartsOption so you can type option without a direct echarts import.

Links

• silicaui.com — website & docs

• GitHub repo

• Issues

• @wizeworks/silicaui-react — the component layer this package extends