ActiveCharts/data viz2,869
@evilcharts
Charts/data viz · MIT · data updated 2026-09-05
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.
accessibilityanimationbackgroundsblockschartscmsdashboardglassmorphismhooksiconsloadersmobileoverlaystheming
Install
npx shadcn@latest add https://evilcharts.com/r/registry.jsonHealth
StatusActive
Last commit1 week ago
LicenseMIT
Open issues1
ArchivedNo
Stars2,869
Components (279)
recharts-chartrecharts-tooltiprecharts-legendrecharts-dotrecharts-brushrecharts-backgroundecharts-chartecharts-tooltipecharts-legendecharts-dotecharts-brushecharts-area-chartecharts-line-chartecharts-bar-chartecharts-composed-chartecharts-radar-chartecharts-pie-chartecharts-radial-chartecharts-sankey-chartrecharts-area-chartrecharts-line-chartrecharts-bar-chartrecharts-composed-chartrecharts-pie-chartrecharts-radial-chartrecharts-radar-chartrecharts-sankey-chartex-hover-highlight-echarts-area-chartex-echarts-area-chartex-svg-renderer-echarts-area-chartex-brush-echarts-area-chartex-buffer-echarts-area-chartex-hover-reveal-echarts-area-chartex-animated-dashed-stroke-echarts-area-chartex-bump-curve-type-echarts-area-chartex-dashed-stroke-echarts-area-chartex-default-type-echarts-area-chartex-dotted-area-variant-echarts-area-chartex-expanded-type-echarts-area-chartex-gradient-area-variant-echarts-area-chartex-gradient-colors-echarts-area-chartex-gradient-colors-bump-echarts-area-chartex-gradient-reverse-area-variant-echarts-area-chartex-hatched-area-variant-echarts-area-chartex-lines-area-variant-echarts-area-chartex-loading-state-echarts-area-chartex-monotoney-curve-type-echarts-area-chartex-solid-area-variant-echarts-area-chartex-solid-stroke-echarts-area-chartex-stacked-type-echarts-area-chartex-step-curve-type-echarts-area-chartex-echarts-line-chartex-svg-renderer-echarts-line-chartex-gradient-colors-echarts-line-chartex-gradient-colors-bump-echarts-line-chartex-loading-state-echarts-line-chartex-bump-curve-type-echarts-line-chartex-step-curve-type-echarts-line-chartex-monotoney-curve-type-echarts-line-chartex-solid-stroke-echarts-line-chart
Components: recharts-chart, recharts-tooltip, recharts-legend, recharts-dot, recharts-brush, recharts-background, echarts-chart, echarts-tooltip, echarts-legend, echarts-dot, echarts-brush, echarts-area-chart, echarts-line-chart, echarts-bar-chart, echarts-composed-chart, echarts-radar-chart, echarts-pie-chart, echarts-radial-chart, echarts-sankey-chart, recharts-area-chart, recharts-line-chart, recharts-bar-chart, recharts-composed-chart, recharts-pie-chart, recharts-radial-chart, recharts-radar-chart, recharts-sankey-chart, ex-hover-highlight-echarts-area-chart, ex-echarts-area-chart, ex-svg-renderer-echarts-area-chart, ex-brush-echarts-area-chart, ex-buffer-echarts-area-chart, ex-hover-reveal-echarts-area-chart, ex-animated-dashed-stroke-echarts-area-chart, ex-bump-curve-type-echarts-area-chart, ex-dashed-stroke-echarts-area-chart, ex-default-type-echarts-area-chart, ex-dotted-area-variant-echarts-area-chart, ex-expanded-type-echarts-area-chart, ex-gradient-area-variant-echarts-area-chart, ex-gradient-colors-echarts-area-chart, ex-gradient-colors-bump-echarts-area-chart, ex-gradient-reverse-area-variant-echarts-area-chart, ex-hatched-area-variant-echarts-area-chart, ex-lines-area-variant-echarts-area-chart, ex-loading-state-echarts-area-chart, ex-monotoney-curve-type-echarts-area-chart, ex-solid-area-variant-echarts-area-chart, ex-solid-stroke-echarts-area-chart, ex-stacked-type-echarts-area-chart, ex-step-curve-type-echarts-area-chart, ex-echarts-line-chart, ex-svg-renderer-echarts-line-chart, ex-gradient-colors-echarts-line-chart, ex-gradient-colors-bump-echarts-line-chart, ex-loading-state-echarts-line-chart, ex-bump-curve-type-echarts-line-chart, ex-step-curve-type-echarts-line-chart, ex-monotoney-curve-type-echarts-line-chart, ex-solid-stroke-echarts-line-chart, ex-dashed-stroke-echarts-line-chart, ex-animated-dashed-stroke-echarts-line-chart, ex-glowing-desktop-echarts-line-chart, ex-glowing-mobile-echarts-line-chart, ex-buffer-echarts-line-chart, ex-hover-reveal-echarts-line-chart, ex-dot-default-echarts-line-chart, ex-dot-border-echarts-line-chart, ex-dot-colored-border-echarts-line-chart, ex-dot-ping-echarts-line-chart, ex-legend-square-echarts-line-chart, ex-legend-circle-echarts-line-chart, ex-legend-circle-outline-echarts-line-chart, ex-legend-rounded-square-echarts-line-chart, ex-legend-rounded-square-outline-echarts-line-chart, ex-legend-vertical-bar-echarts-line-chart, ex-legend-horizontal-bar-echarts-line-chart, ex-echarts-bar-chart, ex-svg-renderer-echarts-bar-chart, ex-buffer-echarts-bar-chart, ex-gradient-colors-echarts-bar-chart, ex-loading-state-echarts-bar-chart, ex-default-variant-echarts-bar-chart, ex-expandable-variant-echarts-bar-chart, ex-max-highlight-echarts-bar-chart, ex-blocks-variant-echarts-bar-chart, ex-hatched-variant-echarts-bar-chart, ex-duotone-variant-echarts-bar-chart, ex-duotone-reverse-variant-echarts-bar-chart, ex-gradient-variant-echarts-bar-chart, ex-stripped-variant-echarts-bar-chart, ex-stacked-type-echarts-bar-chart, ex-percent-type-echarts-bar-chart, ex-horizontal-layout-echarts-bar-chart, ex-hover-highlight-echarts-bar-chart, ex-glowing-desktop-echarts-bar-chart, ex-glowing-mobile-echarts-bar-chart, ex-tooltip-default-echarts-bar-chart, ex-tooltip-frosted-glass-echarts-bar-chart, ex-chart-config-default-echarts-bar-chart, ex-chart-config-icons-echarts-bar-chart, ex-echarts-composed-chart, ex-svg-renderer-echarts-composed-chart, ex-gradient-colors-echarts-composed-chart, ex-loading-state-echarts-composed-chart, ex-hatched-variant-echarts-composed-chart, ex-duotone-variant-echarts-composed-chart, ex-gradient-variant-echarts-composed-chart, ex-stripped-variant-echarts-composed-chart, ex-dashed-stroke-echarts-composed-chart, ex-animated-dashed-stroke-echarts-composed-chart, ex-bump-curve-echarts-composed-chart, ex-dots-echarts-composed-chart, ex-hover-highlight-echarts-composed-chart, ex-glowing-echarts-composed-chart, ex-echarts-radar-chart, ex-svg-renderer-echarts-radar-chart, ex-lines-variant-echarts-radar-chart, ex-circle-grid-echarts-radar-chart, ex-gradient-colors-echarts-radar-chart, ex-loading-state-echarts-radar-chart, ex-echarts-pie-chart, ex-svg-renderer-echarts-pie-chart, ex-gradient-colors-echarts-pie-chart, ex-donut-echarts-pie-chart, ex-padded-echarts-pie-chart, ex-overlapping-padded-echarts-pie-chart, ex-labels-echarts-pie-chart, ex-loading-state-echarts-pie-chart, ex-outside-labels-echarts-pie-chart, ex-echarts-radial-chart, ex-svg-renderer-echarts-radial-chart, ex-semi-variant-echarts-radial-chart, ex-gradient-colors-echarts-radial-chart, ex-loading-state-echarts-radial-chart, ex-echarts-sankey-chart, ex-svg-renderer-echarts-sankey-chart, ex-gradient-colors-echarts-sankey-chart, ex-loading-state-echarts-sankey-chart, ex-solid-link-variant-echarts-sankey-chart, ex-source-link-variant-echarts-sankey-chart, ex-labeled-nodes-echarts-sankey-chart, ex-outside-labels-echarts-sankey-chart, ex-solid-labeled-nodes-echarts-sankey-chart, ex-area-chart, ex-brush-area-chart, ex-gradient-colors-area-chart, ex-gradient-colors-bump-area-chart, ex-loading-state-area-chart, ex-default-type-area-chart, ex-stacked-type-area-chart, ex-expanded-type-area-chart, ex-bump-curve-type-area-chart, ex-step-curve-type-area-chart, ex-monotoney-curve-type-area-chart, ex-solid-stroke-area-chart, ex-dashed-stroke-area-chart, ex-animated-dashed-stroke-area-chart, ex-gradient-area-variant-area-chart, ex-gradient-reverse-area-variant-area-chart, ex-solid-area-variant-area-chart, ex-dotted-area-variant-area-chart, ex-lines-area-variant-area-chart, ex-hatched-area-variant-area-chart, ex-line-chart, ex-dot-default-line-chart, ex-dot-border-line-chart, ex-dot-colored-border-line-chart, ex-gradient-colors-line-chart, ex-gradient-colors-bump-line-chart, ex-loading-state-line-chart, ex-bump-curve-type-line-chart, ex-step-curve-type-line-chart, ex-monotoney-curve-type-line-chart, ex-solid-stroke-line-chart, ex-dashed-stroke-line-chart, ex-animated-dashed-stroke-line-chart, ex-glowing-desktop-line-chart, ex-glowing-mobile-line-chart, ex-buffer-line-chart, ex-bg-dots-line-chart, ex-bg-grid-line-chart, ex-bg-cross-hatch-line-chart, ex-bg-diagonal-lines-line-chart, ex-bg-plus-line-chart, ex-bg-falling-triangles-line-chart, ex-bg-4-pointed-star-line-chart, ex-bg-tiny-checkers-line-chart, ex-bg-overlapping-circles-line-chart, ex-bg-wiggle-lines-line-chart, ex-bg-bubbles-line-chart, ex-buffer-bar-chart, ex-bar-chart, ex-gradient-colors-bar-chart, ex-loading-state-bar-chart, ex-default-variant-bar-chart, ex-hatched-variant-bar-chart, ex-duotone-variant-bar-chart, ex-duotone-reverse-variant-bar-chart, ex-gradient-variant-bar-chart, ex-stripped-variant-bar-chart, ex-stacked-type-bar-chart, ex-percent-type-bar-chart, ex-horizontal-layout-bar-chart, ex-hover-highlight-bar-chart, ex-glowing-desktop-bar-chart, ex-glowing-mobile-bar-chart, ex-composed-chart, ex-gradient-colors-composed-chart, ex-loading-state-composed-chart, ex-hatched-variant-composed-chart, ex-duotone-variant-composed-chart, ex-gradient-variant-composed-chart, ex-stripped-variant-composed-chart, ex-dashed-stroke-composed-chart, ex-animated-dashed-stroke-composed-chart, ex-bump-curve-composed-chart, ex-dots-composed-chart, ex-hover-highlight-composed-chart, ex-glowing-composed-chart, ex-pie-chart, ex-gradient-colors-pie-chart, ex-donut-pie-chart, ex-padded-pie-chart, ex-overlapping-padded-pie-chart, ex-labels-pie-chart, ex-loading-state-pie-chart, ex-glowing-pie-chart, ex-radial-chart, ex-semi-variant-radial-chart, ex-gradient-colors-radial-chart, ex-loading-state-radial-chart, ex-radar-chart, ex-lines-variant-radar-chart, ex-circle-grid-radar-chart, ex-gradient-colors-radar-chart, ex-loading-state-radar-chart, ex-glowing-radar-chart, ex-sankey-chart, ex-gradient-colors-sankey-chart, ex-loading-state-sankey-chart, ex-solid-link-variant-sankey-chart, ex-source-link-variant-sankey-chart, ex-labeled-nodes-sankey-chart, ex-outside-labels-sankey-chart, ex-solid-labeled-nodes-sankey-chart, ex-tooltip-default-bar-chart, ex-tooltip-frosted-glass-bar-chart, ex-legend-square-line-chart, ex-legend-circle-line-chart, ex-legend-circle-outline-line-chart, ex-legend-rounded-square-line-chart, ex-legend-rounded-square-outline-line-chart, ex-legend-vertical-bar-line-chart, ex-legend-horizontal-bar-line-chart, ex-chart-config-default-bar-chart, ex-chart-config-icons-bar-chart, monospace-bar-chart, hover-trace-bar-chart, grid-bar-chart, isometric-bar-chart, latency-echarts-area-chart, portfolio-echarts-area-chart, benchmark-echarts-area-chart, audience-echarts-area-chart, market-share-echarts-pie-chart, progress-rings-echarts-pie-chart, budget-echarts-radial-chart, ride-echarts-radial-chart, cache-tiers-echarts-radial-chart, revenue-mix-echarts-pie-chart, reliability-score-echarts-pie-chart, payouts-echarts-line-chart, shipments-echarts-line-chart, grid-echarts-bar-chart, monospace-echarts-bar-chart, peak-echarts-bar-chart, allocation-echarts-sankey-chart, pipeline-echarts-sankey-chartPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@evilcharts · recharts-chart
npx shadcn@latest add https://evilcharts.com/r/recharts-chart.jsonView source