Design · A design system your AI builder follows on every screen. · a tool
The open-source project evilcharts, by legions-developer
“EvilCharts is an open-source chart UI website built with shadcn and Recharts, beautifully designed and handcrafted.” — the project's own words, on GitHub
Paste this into the AI that runs on your computer. It does the install, checks it works, and tells you what to type first. If anything fails, paste the error back to it.
Install evilcharts (https://github.com/legions-developer/evilcharts) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Claude Code, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `npx shadcn@latest add @evilcharts/recharts-area-chart` (or bar-chart, line-chart, pie-chart) inside an existing project that already has shadcn/ui and Recharts — it installs into that project rather than being cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into my existing React or Next.js project, not into ~/tools: first run npm install recharts, then npx shadcn@latest init if shadcn/ui is not already set up in the project (skip it if it is).
Add one chart at a time with npx shadcn@latest add @evilcharts/recharts-{chart-name}, where {chart-name} is area-chart, bar-chart, line-chart, pie-chart, radar-chart, radial-chart, composed-chart or sankey-chart; it installs the files and dependencies itself.
Every chart takes a chartConfig object whose keys must match the keys in my data rows exactly — a chart that renders empty usually means a config key does not match a data key.
The docs also offer an ECharts version of each chart for very dense or live data; the Recharts version is the default, and you install one engine per chart, never both.
Smoke test: start my project's dev server and open the page with the new chart; it should animate in and show a tooltip on hover.
The component docs for agents are at https://evilcharts.com/llms.txt if you need a chart's exact usage.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Put one real number on a page.
If anything fails, show me the exact error and fix it before going on.Install evilcharts (https://github.com/legions-developer/evilcharts) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Kimi, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `npx shadcn@latest add @evilcharts/recharts-area-chart` (or bar-chart, line-chart, pie-chart) inside an existing project that already has shadcn/ui and Recharts — it installs into that project rather than being cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into my existing React or Next.js project, not into ~/tools: first run npm install recharts, then npx shadcn@latest init if shadcn/ui is not already set up in the project (skip it if it is).
Add one chart at a time with npx shadcn@latest add @evilcharts/recharts-{chart-name}, where {chart-name} is area-chart, bar-chart, line-chart, pie-chart, radar-chart, radial-chart, composed-chart or sankey-chart; it installs the files and dependencies itself.
Every chart takes a chartConfig object whose keys must match the keys in my data rows exactly — a chart that renders empty usually means a config key does not match a data key.
The docs also offer an ECharts version of each chart for very dense or live data; the Recharts version is the default, and you install one engine per chart, never both.
Smoke test: start my project's dev server and open the page with the new chart; it should animate in and show a tooltip on hover.
The component docs for agents are at https://evilcharts.com/llms.txt if you need a chart's exact usage.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Put one real number on a page.
If anything fails, show me the exact error and fix it before going on.Install evilcharts (https://github.com/legions-developer/evilcharts) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Gemini CLI, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `npx shadcn@latest add @evilcharts/recharts-area-chart` (or bar-chart, line-chart, pie-chart) inside an existing project that already has shadcn/ui and Recharts — it installs into that project rather than being cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into my existing React or Next.js project, not into ~/tools: first run npm install recharts, then npx shadcn@latest init if shadcn/ui is not already set up in the project (skip it if it is).
Add one chart at a time with npx shadcn@latest add @evilcharts/recharts-{chart-name}, where {chart-name} is area-chart, bar-chart, line-chart, pie-chart, radar-chart, radial-chart, composed-chart or sankey-chart; it installs the files and dependencies itself.
Every chart takes a chartConfig object whose keys must match the keys in my data rows exactly — a chart that renders empty usually means a config key does not match a data key.
The docs also offer an ECharts version of each chart for very dense or live data; the Recharts version is the default, and you install one engine per chart, never both.
Smoke test: start my project's dev server and open the page with the new chart; it should animate in and show a tooltip on hover.
The component docs for agents are at https://evilcharts.com/llms.txt if you need a chart's exact usage.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Put one real number on a page.
If anything fails, show me the exact error and fix it before going on.Install evilcharts (https://github.com/legions-developer/evilcharts) on this computer and get it working for me. I am not a developer; explain each step in one line as you go and never skip one. You are Codex, running on my machine.
1. Check what this machine already has (git, Python or Node as the project needs, Docker if the README says so). Tell me anything missing and install it, asking me before anything that needs my password.
2. Run `npx shadcn@latest add @evilcharts/recharts-area-chart` (or bar-chart, line-chart, pie-chart) inside an existing project that already has shadcn/ui and Recharts — it installs into that project rather than being cloned.
3. Configure it. If it needs an API key or a login, stop and ask me for it; never guess one and never store it anywhere except where the README says.
Tool-specific notes: This installs into my existing React or Next.js project, not into ~/tools: first run npm install recharts, then npx shadcn@latest init if shadcn/ui is not already set up in the project (skip it if it is).
Add one chart at a time with npx shadcn@latest add @evilcharts/recharts-{chart-name}, where {chart-name} is area-chart, bar-chart, line-chart, pie-chart, radar-chart, radial-chart, composed-chart or sankey-chart; it installs the files and dependencies itself.
Every chart takes a chartConfig object whose keys must match the keys in my data rows exactly — a chart that renders empty usually means a config key does not match a data key.
The docs also offer an ECharts version of each chart for very dense or live data; the Recharts version is the default, and you install one engine per chart, never both.
Smoke test: start my project's dev server and open the page with the new chart; it should animate in and show a tooltip on hover.
The component docs for agents are at https://evilcharts.com/llms.txt if you need a chart's exact usage.
4. Run the smallest test the README gives, and show me the output.
5. When it works, tell me what to type first, in one line, for this job: Put one real number on a page.
If anything fails, show me the exact error and fix it before going on.Ask your AI to add a single area or bar chart to a screen you already have and feed it real rows from your product, not the sample data, so you see at once whether the look fits.
Have your AI fill in the chart config so each line or bar has a plain label and a colour for light and dark mode, then flip the theme and check both read well.
Hover the chart and compare three tooltip values against the source data by hand; a chart is decoration until the numbers underneath it are right.
legions-developer/evilcharts on GitHub, under the MIT licence. 2,893 stars, checked 11 September 2026. Last change 29 August 2026. We did not write it; we checked it, and wrote this page so you can use it.
8bitcn/ui gives your AI a full set of retro, pixel-styled screen pieces to drop into a product it is already building: buttons, forms, dialogs, tables, even health bars and XP bars.
m3e-canvas gives you a place to sketch out what your product's screens should look like before your AI starts writing code.
shadcn/ui gives your AI a real component library to build your product's interface from, instead of inventing buttons and forms from scratch every time.
If you're launching or growing a brand across Asia and the West, a call is where we work out whether it's a fit.