fancy-echarts

Charts are where humans and agents read data together — the dashboard is the shared surface, so it has to be authorable in seconds and inhabitable by an agent without DOM scraping. Apache ECharts is the most capable open charting engine on the web, but wiring it into React raw means hand-rolling init/setOption/dispose lifecycles, resize observers, and theme handling on every chart, and bundling the whole engine whether you use it or not. fancy-echarts closes that gap with one terse, typed <EChart> component — controlled via a single option prop and bridgeable, so embedded agents drive charts through the chart_* MCP bridge in agent-integrations rather than guessing at the canvas. The chart becomes a proper Human+ surface: terse for authors, stable for agents.

The exported surface stays deliberately small. <EChart> is the workhorse — it accepts the full ECharts option object unchanged, so anything in the ECharts option reference works verbatim, plus React-friendly props for theme, renderer, autoResize, and an onEvents map for click/mouseover/contextmenu handlers. <EChart3D> renders globe, surface, and scatter3D/bar3D series, lazily loading the 3D engine before first paint, and <EChartGraphic> exposes the graphic API for custom drawing. The useECharts hook hands you chartRef and the raw instance for bespoke integrations. Registration is explicit for tree-shaking: registerAll() wires every series at once, while registerCharts([BarChart, LineChart, GridComponent, ...]) pulls in only what you render. Four built-in themes ship on top of automatic prefers-color-scheme dark mode. Critically, echarts (and optional echarts-gl for 3D) are peer dependencies — the wrapper bundles zero charting engine, so you control the exact ECharts version and pay for it once.

Install with npm install @particle-academy/fancy-echarts (the echarts peer installs automatically on npm 7+ / yarn 3+). Call registerAll() once per bundle entry, then the smallest render is a bar chart: <EChart option={{ xAxis: { type: 'category', data: ['Mon','Tue','Wed'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [120, 200, 150] }] }} />. A line chart is the same shape with series: [{ type: 'line', smooth: true, data: [12, 24, 18] }], and a donut needs no axes — series: [{ type: 'pie', radius: ['50%','70%'], data: [{ value: 40, name: 'A' }, { value: 60, name: 'B' }] }]. For 3D, swap to <EChart3D option={{ globe: { baseColor: '#1a3b5c', viewControl: { autoRotate: true } } }} />, or drop to raw shapes with <EChartGraphic elements={[{ type: 'circle', shape: { cx: 100, cy: 100, r: 50 }, style: { fill: '#5470c6' } }]} />. Toggling theme is a prop swap (theme="dark-preset"), and you can browse every chart type to lift an option straight into <EChart>.