Introduction

Wait... it's not another chart library. I couldn't find chart components with smooth animations and dynamic data, so I built my own — with Recharts, Apache ECharts and Shadcn.

EvilCharts is built by Gurbinder (Design Engineer @ Axiom.co). I see ugly, generic charts everywhere, and no one in the community is building a beautiful chart library.

There are tons of chart libraries, but none are beautiful. They allow customization, yet everyone just ships the defaults from the docs.

So I'm building a beautiful chart component site — open source, open code, all yours...

"Evil" doesn't mean malicious. It means:

• Unapologetically opinionated UI choices
• Design-first, animated, unique designs
• Handcrafted with SVGs and Motion to stand out

Every chart here ships twice — once on Recharts, once on Apache ECharts — behind the same compound API. Same parts, same config object, same gradients, patterns and reveal animations. Switching engines is a rename, not a rewrite:

<EvilAreaChart data={data} config={config}>   {/* Recharts */}
<EChartsAreaChart data={data} config={config}> {/* ECharts  */}

You install one engine per chart — @evilcharts/recharts-area-chart or @evilcharts/echarts-area-chart, never both — so you only ever ship the one you picked.

Recharts

SVG, and all of it is in the DOM. Recharts renders through React to SVG, so every gradient, pattern, dot and glow is a real element.

• Themeable without JavaScript. Series colors compile to per-chart CSS variables, so light and dark swap with a class — no re-render, no flash.
• Inspectable. Open devtools and the whole chart is right there, stylable with the CSS you already use.
• Composable. Charts are built from parts, not props. Drop in a <Grid />, a <Legend />, or a second <Area />.

Reach for it by default: product dashboards, marketing pages, anything where the chart is design surface first and data volume second.

ECharts

Canvas, built for scale. The ECharts provider draws the same components onto a single canvas, so the point count stops being a DOM problem.

• Dense data stays smooth. Thousands of points are pixels, not thousands of nodes.
• Built for live data. Frequent updates and zooming don't fight the browser's layout engine.
• Same look. The variants, glows and entrance animations are ported, not approximated — canvas gradients and pattern tiles doing what the SVG defs do.

Reach for it when the data outgrows the DOM: long time series, high-frequency updates, dashboards that keep drawing while people interact with them.

Which one?

Start with Recharts. Move a chart to ECharts when that specific chart gets heavy — it's a per-chart choice, not a project-wide one, so a single dashboard can mix both.

Install one from the sidebar — Recharts or ECharts — and the labels, colors and icons are the same object either way: see Chart Config.