Charts Agent Skill
Recharts/Chart.js data visualization — bar, line, area, pie charts.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: Recharts/Chart.js data visualization — bar, line, area, pie charts.
homepage: https://yepapi.com/skills/charts
metadata:
tags: [charts, data-viz, recharts, visualization]
---
# Charts & Data Visualization
## Rules
- Use Recharts for React projects — composable, responsive, well-typed
- Wrap charts in `<ResponsiveContainer width="100%" height={300}>` — never fixed pixel widths
- Accessible colors: use a color-blind safe palette (don't rely on red/green distinction)
- Axis labels: always label both axes, use readable number formatting (1.2K not 1200)
- Tooltips: show exact values on hover — format with units and locale-aware numbers
- Loading states: skeleton chart shape while data loads
- Choose chart type by data: line (trends over time), bar (comparisons), area (volume), pie (parts of whole — max 5 slices)
- `key` prop on dynamic data — Recharts re-renders correctly when data changes
## Avoid
- 3D charts — they distort perception, always use flat/2D
- Pie charts with more than 5-6 slices — use horizontal bar chart instead
- Charts without axis labels or legends — always provide context
- Fetching data inside chart components — fetch in parent, pass as propsInstall
Why Use the Charts Skill?
Without this skill, your AI guesses at charts patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Charts skill installed. Your AI knows the context and writes code that fits.
"Build a dashboard with interactive bar, line, and pie charts using Recharts"
"Create responsive charts that adapt to dark mode and handle loading/empty states"
"Add a real-time chart component that updates with WebSocket data feeds"
Works Great With
Charts skill — FAQ
It covers Recharts and Chart.js patterns for bar, line, area, and pie charts. Your AI generates chart components with proper data formatting, responsive sizing, and dark mode support.
Run `npx skills add YepAPI/skills --skill charts` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
It primarily covers Recharts for React-based projects. Recharts is composable, declarative, and supports responsive containers. The patterns also apply to Chart.js and Nivo with minor adjustments.