Overview

Evil Charts is an open-source collection of animated chart components for React and Next.js, built with shadcn/ui by Gurbinder, a design engineer at Axiom. The project aims to replace generic default charts with opinionated, design-first visuals handcrafted with SVG and Motion.

Every chart ships on two engines behind the same compound API: Recharts for SVG output that is themeable with CSS variables, and Apache ECharts for Canvas rendering of dense data. Each chart is installed through the shadcn registry as @evilcharts/recharts-<chart> or @evilcharts/echarts-<chart>, so a project only ships the engine it picks.

Features

Chart types: Area, line, bar, composed (bars plus lines), radar, pie, radial and Sankey charts, plus bar chart blocks.
Compound API: Charts are built from parts such as <Grid />, <XAxis />, <Legend />, <Tooltip />, <Bar /> and <Line />.
Two engines: Switching between Recharts and ECharts is a component rename rather than a rewrite.
Interactive selection: An isClickable prop on bars, lines and legends, with an onSelectionChange callback.
Styling options: Gradient and glow variants, dashed strokes, background patterns, dot styles and per-theme colors in the chart config.
Chart UI parts: Background, brush, dots, legend and tooltip components.
Agent resources: An llms.txt index, a full docs snapshot and an agent skill file.