EvilCharts

A shadcn-compatible chart component registry built on Recharts and Framer Motion, distributed as source code you copy into your project — not an npm package. Eight chart types and six UI primitives are installed individually via npx shadcn add @evilcharts/<name>, so you own the code and can customise every pixel.

Showcase

Area Chart

Bar Chart

Line Chart

Pie Chart

Radar Chart

Radial Chart

Sankey Chart

Composed Chart

Features

Chart types

EvilAreaChart — area chart with six areaVariant fill styles: gradient, gradient-reverse, solid, dotted, lines, hatched.
EvilBarChart — bar chart with six barVariant styles (default, hatched, duotone, duotone-reverse, gradient, stripped) and vertical or horizontal orientation.
EvilLineChart — line chart with backgroundVariant support and a built-in EvilBrush range selector via showBrush.
EvilPieChart — pie and donut chart with donut, padded, overlapping, and with-labels variants.
EvilRadarChart — radar/spider chart with filled, lines, and circle-grid grid styles.
EvilRadialChart — radial bar chart with full and semi-circle arc modes for gauge layouts.
EvilSankeyChart — Sankey flow diagram with configurable link rendering and node labels.
EvilComposedChart — multi-series chart combining bar, line, and area in a single canvas.

UI primitives

ChartContainer — root wrapper that injects scoped CSS custom properties (--color-<key>-<index>) so multiple charts on the same page never bleed colors.
ChartTooltip — hover tooltip with default and frosted-glass variants plus a tooltipRoundness control.
ChartLegend — legend with seven legendVariant marker shapes: square, circle, circle-outline, rounded-square, rounded-square-outline, vertical-bar, horizontal-bar.
ChartDot — configurable dot marker for individual data points.
EvilBrush — brush/range-selector primitive for interactive time-series zooming.
Background — decorative SVG layer with eleven backgroundVariant patterns: dots, grid, cross-hatch, diagonal-lines, plus, falling-triangles, 4-pointed-star, tiny-checkers, overlapping-circles, wiggle-lines, bubbles.

Blocks (pre-composed layouts)

Monospace Bar Chart — fixed-width bar layout styled for monospace aesthetic, with header and stats row.
Hover Trace Bar Chart — bar chart with a hover-activated trace highlight overlay.
Grid Bar Chart — bar chart with grid-aligned layout and animated growth.

Configuration

chartConfig object maps each data key to a label, per-key colors arrays (separate light and dark palettes), and an optional Lucide icon rendered in tooltips and legends.
Theme-aware color resolution: switching between light and dark mode automatically swaps the right palette via the generated CSS custom properties.
Framer Motion mount animations on area fills, bar growth, and pie sector reveal.

Live examples

EvilAreaChart demos — interactive variants
EvilBarChart demos — interactive variants
EvilLineChart demos — interactive variants
EvilPieChart demos — interactive variants
EvilRadarChart demos — interactive variants
EvilRadialChart demos — interactive variants
EvilSankeyChart demos — interactive variants
EvilComposedChart demos — interactive variants
Bar chart blocks — pre-composed block variants

Documentation

Full documentation at evilcharts.com/docs, built with Fumadocs. Covers installation, the chartConfig API, per-component prop reference, and an interactive variant playground for every chart type.

Quick start

# 1. Install Recharts (required peer dependency)
npx shadcn add recharts

# 2. Initialize shadcn/ui (skip if already set up)
npx shadcn@latest init

# 3. Add any chart component
npx shadcn add @evilcharts/area-chart
npx shadcn add @evilcharts/bar-chart
npx shadcn add @evilcharts/line-chart
# …and so on for each chart type

legions-developerevilcharts