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" }} />;

Documentation

API Reference

• Core Concepts
• API Summary
• Configuration

License

MIT