Chart

A thin, fully-featured wrapper over Apache ECharts that auto-themes to the active Silica tokens. ECharts owns all rendering; Silica supplies the palette.

Real use · revenue trend (auto-themed ECharts)

Channel split

Sparklines · inline trend indicators

Using Chart

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class chart, with 0 modifiers:

.chart

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-charts

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

Props

Prop	Type	Required	Description
option	EChartsOption	yes	The ECharts option (series, axes, tooltip, legend, …) — full ECharts API.
notMerge	boolean	no	Replace the whole option instead of merging on update. Default true.
loading	boolean	no	Toggle ECharts' built-in loading spinner.
renderer	"canvas" \| "svg"	no	Renderer backend. Default "canvas".
onInit	(chart: EChartsInstance) => void	no	Called with the instance right after it's created (and after each re-init).

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { Chart, Sparkline } from "@wizeworks/silicaui-charts";
import type { EChartsOption } from "@wizeworks/silicaui-charts";
import { Section, Row } from "../lib/Section";

const REVENUE_OPTION: EChartsOption = {
    tooltip: { trigger: "axis" },
    legend: { data: ["Revenue", "Orders"], top: 0 },
    grid: { left: 4, right: 8, top: 34, bottom: 4, containLabel: true },
    xAxis: {
        type: "category",
        data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
    },
    yAxis: [{ type: "value" }, { type: "value", splitLine: { show: false } }],
    series: [
        {
            name: "Revenue",
            type: "line",
            yAxisIndex: 0,
            smooth: true,
            areaStyle: { opacity: 0.12 },
            data: [8200, 9310, 9020, 11200, 12800, 12010, 14300],
        },
        {
            name: "Orders",
            type: "bar",
            yAxisIndex: 1,
            data: [120, 132, 128, 151, 168, 160, 184],
        },
    ],
};

const CHANNEL_OPTION: EChartsOption = {
    tooltip: { trigger: "item" },
    legend: { bottom: 0 },
    series: [
        {
            name: "Channel",
            type: "pie",
            radius: ["45%", "72%"],
            itemStyle: { borderRadius: 6 },
            label: { show: false },
            data: [
                { value: 4200, name: "Direct" },
                { value: 3100, name: "Organic" },
                { value: 2400, name: "Referral" },
                { value: 1600, name: "Social" },
            ],
        },
    ],
};

export function ChartDemo() {
    return (
        <>
            <Section title="Real use · revenue trend (auto-themed ECharts)">
                <Chart option={REVENUE_OPTION} style={{ maxWidth: 640 }} />
            </Section>

            <Section title="Channel split">
                <Chart option={CHANNEL_OPTION} style={{ maxWidth: 420, height: "18rem" }} />
            </Section>

            <Section title="Sparklines · inline trend indicators">
                <Row>
                    <Sparkline
                        data={[8, 9, 9, 11, 12, 12, 14]}
                        area
                        style={{ width: "8rem", height: "2.5rem" }}
                    />
                    <Sparkline
                        data={[14, 12, 12, 11, 9, 9, 8]}
                        style={{ width: "8rem", height: "2.5rem" }}
                    />
                </Row>
            </Section>
        </>
    );
}

The full API for Chart, on every path, is available through the Silica MCP server.