@evilcharts

EvilCharts is an open-source chart UI library built on shadcn/ui and Recharts. It provides handcrafted, visually styled chart components across eight types: area, line, bar, composed, radar, pie, radial, and Sankey charts. The docs site also ships UI utilities including a background component, tooltip, and legend, plus a chart-config system for consistent theming. Free and MIT licensed, distributed via the shadcn registry. Use for: adding Recharts-powered charts with opinionated, on-brand styling to a shadcn/ui project when the default shadcn chart appearance needs more visual polish without writing custom Recharts configuration from scratch.

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://evilcharts.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://evilcharts.com/r/registry.json

bun bunx shadcn@latest add https://evilcharts.com/r/registry.json

fetch registry curl -s https://evilcharts.com/r/registry.json

Components

60 total

chart component

npx shadcn@latest add https://evilcharts.com/r/chart.json

tooltip component

npx shadcn@latest add https://evilcharts.com/r/tooltip.json

legend component

npx shadcn@latest add https://evilcharts.com/r/legend.json

dot component

npx shadcn@latest add https://evilcharts.com/r/dot.json

evil-brush component

npx shadcn@latest add https://evilcharts.com/r/evil-brush.json

background component

npx shadcn@latest add https://evilcharts.com/r/background.json

area-chart component

Area chart component

npx shadcn@latest add https://evilcharts.com/r/area-chart.json

line-chart component

Line chart component

npx shadcn@latest add https://evilcharts.com/r/line-chart.json

bar-chart component

Bar chart component

npx shadcn@latest add https://evilcharts.com/r/bar-chart.json

composed-chart component

Composed chart component combining bar and line charts

npx shadcn@latest add https://evilcharts.com/r/composed-chart.json

pie-chart component

Pie chart component with donut, gradient, and glow effects

npx shadcn@latest add https://evilcharts.com/r/pie-chart.json

radial-chart component

Radial bar chart component with full and semi-circle variants

npx shadcn@latest add https://evilcharts.com/r/radial-chart.json

radar-chart component

Radar chart component with filled and lines variants

npx shadcn@latest add https://evilcharts.com/r/radar-chart.json

sankey-chart component

Sankey chart component for visualizing flow data with nodes and links

npx shadcn@latest add https://evilcharts.com/r/sankey-chart.json

ex-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-area-chart.json

ex-gradient-colors-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-area-chart.json

ex-gradient-colors-bump-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-bump-area-chart.json

ex-loading-state-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-loading-state-area-chart.json

ex-default-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-default-type-area-chart.json

ex-stacked-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-stacked-type-area-chart.json

ex-expanded-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-expanded-type-area-chart.json

ex-bump-curve-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bump-curve-type-area-chart.json

ex-step-curve-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-step-curve-type-area-chart.json

ex-monotoney-curve-type-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-monotoney-curve-type-area-chart.json

ex-solid-stroke-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-solid-stroke-area-chart.json

ex-dashed-stroke-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-dashed-stroke-area-chart.json

ex-animated-dashed-stroke-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-animated-dashed-stroke-area-chart.json

ex-gradient-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-area-variant-area-chart.json

ex-gradient-reverse-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-reverse-area-variant-area-chart.json

ex-solid-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-solid-area-variant-area-chart.json

ex-dotted-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-dotted-area-variant-area-chart.json

ex-lines-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-lines-area-variant-area-chart.json

ex-hatched-area-variant-area-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-hatched-area-variant-area-chart.json

ex-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-line-chart.json

ex-gradient-colors-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-line-chart.json

ex-gradient-colors-bump-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-bump-line-chart.json

ex-loading-state-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-loading-state-line-chart.json

ex-bump-curve-type-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bump-curve-type-line-chart.json

ex-step-curve-type-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-step-curve-type-line-chart.json

ex-monotoney-curve-type-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-monotoney-curve-type-line-chart.json

ex-solid-stroke-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-solid-stroke-line-chart.json

ex-dashed-stroke-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-dashed-stroke-line-chart.json

ex-animated-dashed-stroke-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-animated-dashed-stroke-line-chart.json

ex-glowing-desktop-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-glowing-desktop-line-chart.json

ex-glowing-mobile-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-glowing-mobile-line-chart.json

ex-buffer-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-buffer-line-chart.json

ex-bg-dots-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-dots-line-chart.json

ex-bg-grid-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-grid-line-chart.json

ex-bg-cross-hatch-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-cross-hatch-line-chart.json

ex-bg-diagonal-lines-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-diagonal-lines-line-chart.json

ex-bg-plus-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-plus-line-chart.json

ex-bg-falling-triangles-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-falling-triangles-line-chart.json

ex-bg-4-pointed-star-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-4-pointed-star-line-chart.json

ex-bg-tiny-checkers-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-tiny-checkers-line-chart.json

ex-bg-overlapping-circles-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-overlapping-circles-line-chart.json

ex-bg-wiggle-lines-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-wiggle-lines-line-chart.json

ex-bg-bubbles-line-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bg-bubbles-line-chart.json

ex-buffer-bar-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-buffer-bar-chart.json

ex-bar-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-bar-chart.json

ex-gradient-colors-bar-chart block

npx shadcn@latest add https://evilcharts.com/r/ex-gradient-colors-bar-chart.json