About
A themeable Apache ECharts wrapper that draws a chart from a plain option object, auto-colors it from your design tokens and theme changes, formats numbers/dates in the current locale, keeps the legend and zoom slider clear of the axes, and supports keyboard navigation. Ported to React from zweiundeins/starbase's `<sb-echarts>` web component (MIT), itself ported from Libretto's `<tco-chart>`.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ECharts to your project and fits it to your theme.
Code
How ECharts is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import EChart from "@/components/ui/echarts";
export default function EChartPieDemo() {
return (
<div
className="w-full h-full flex items-center justify-center p-6"
style={{ background: "var(--background)" }}
>
<div className="w-full max-w-md" style={{ height: "300px" }}>
<EChart
option={{
tooltip: { trigger: "item" },
series: [
{
type: "pie",
radius: ["45%", "70%"],
data: [
{ name: "Hydrogen", value: 74 },
{ name: "Helium", value: 24 },
{ name: "Everything else", value: 2 },
],
},
],
}}
/>
</div>
</div>
);
}
More by zweiundeins
View all
Theme Switch
11
Busy
7
Count Up
1
Sparkline
Drawer
Starfield
Odometer
Meter