@amad3v/solid-echarts - v1.0.2
Overview
solid-echarts is a thin, idiomatic SolidJS wrapper around Apache ECharts 6. It exposes:
- A declarative
<SolidEChart />component with reactive props and init-time options - A context-based provider for shared configuration across multiple charts
- Primitive functions (
createChart,createChartEffect,createAction) for building custom chart integrations - Typed action factories and a
useChart()hook for imperative access
Core use cases:
- Drop-in reactive charts driven by SolidJS signals
- Shared dashboards with synchronised zoom, tooltip, and theme
- Streaming or imperatively-updated charts that bypass the reactive layer
- Custom layouts where chart logic is decoupled from the component tree
Installation
Install the library:
pnpm add @amad3v/solid-echarts echarts
or with npm:
npm install @amad3v/solid-echarts echarts
or with yarn:
yarn add @amad3v/solid-echarts echarts
Setup
Call seSetup once at application root before any <SolidEChart /> renders.
It registers the needed ECharts extensions (charts, components, renderers).
import {
seSetup,
BarChart,
LineChart,
GridComponent,
TooltipComponent,
CanvasRenderer,
} from "solid-echarts";
seSetup([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
Only registered extensions are included in your bundle. ECharts is fully tree-shakable through this call.
seSetup is idempotent: calling it multiple times with already-registered extensions is a no-op.
Quick Start
const option = () => ({
xAxis: { type: "category", data: ["A", "B", "C"] },
yAxis: { type: "value" },
series: [{ type: "bar", data: [1, 2, 3] }],
});
<SolidEChart option={option} style={{ width: "100%", height: "320px" }} />;