recharts
A guide for implementing composable, responsive data charts in React apps.
Install
mkdir -p .claude/skills/recharts && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12806" && unzip -o skill.zip -d .claude/skills/recharts && rm skill.zipInstalls to .claude/skills/recharts
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance optimization, and accessibility.Key capabilities
- →Install Recharts library
- →Create line charts with `LineChart` and `Line` components
- →Build area charts using `AreaChart` and `Area` components
- →Construct bar charts with `BarChart` and `Bar` components
- →Generate pie charts using `PieChart` and `Pie` components
- →Develop composed charts by mixing chart types
How it works
This skill uses the Recharts library to build React charts by composing specialized components like `LineChart`, `XAxis`, and `Tooltip`, with data provided as an array of objects.
Inputs & outputs
When to use recharts
- →Create line chart
- →Build bar graph
- →Implement dashboard visualization
About recharts
Facilitates the creation of line, bar, pie, and composed charts. Manages component composition, responsive design, and data mapping.
Build composable, responsive React charts with Recharts library. Use when creating data visualizations including line charts, area charts, bar charts, pie charts, scatter plots, and composed charts. Handles chart customization, responsive sizing, tooltips, legends, axes configuration, performance op
When not to use it
- →When `ResponsiveContainer` has no parent with defined dimensions
- →When height is a percentage in `ResponsiveContainer`
- →When data is not an array of objects
Prerequisites
Limitations
- →Chart not rendering if `ResponsiveContainer` has no parent with defined dimensions
- →Tooltip not showing if `Tooltip` component is not included
- →Axis labels overlapping if not configured with `angle` or `interval`
How it compares
This workflow use a declarative React component-based approach for data visualization, allowing for composable and responsive charts, which differs from imperative chart drawing libraries.
Compared to similar skills
recharts side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| recharts (this skill) | 0 | 7mo | Review | Beginner |
| magicpath | 0 | 4mo | Review | Intermediate |
| react-email | 5 | 4mo | Review | Intermediate |
| web-development | 5 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by ihmorol
View all by ihmorol →You might also like
magicpath
tanglg
Search, preview, inspect, and install MagicPath UI components with the magicpath-ai CLI. Use when the user mentions MagicPath, wants to browse or search MagicPath components, preview one, or add one to their project. Also use when the user wants to create a new MagicPath project (workspace for desig
react-email
resend
Use when creating HTML email templates with React components - welcome emails, password resets, notifications, order confirmations, newsletters, or transactional emails.
web-development
TencentCloudBase
Web frontend project development rules. Use this skill when developing web frontend pages, deploying static hosting, and integrating CloudBase Web SDK.
infographic-structure-creator
antvis
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and registration.
webf-quickstart
openwebf
Get started with WebF development - setup WebF Go, create a React/Vue/Svelte project with Vite, and load your first app. Use when starting a new WebF project, onboarding new developers, or setting up development environment.
fullstack-guardian
Jeffallan
Use when implementing features across frontend and backend, building APIs with UI, or creating end-to-end data flows. Invoke for feature implementation, API development, UI building, cross-stack work.