name: react-charts
description: Use when building data visualisation components with Recharts. Covers bar
charts, line charts, area charts, and responsive containers.
React Charts with Recharts
When to Use
Creating dashboard chart components
Adding data visualisation to React apps
Customising Recharts themes and tooltips
Instructions
Always wrap charts in ResponsiveContainer
Use the project's colour palette from Tailwind config
Add meaningful tooltips with custom formatters
Handle empty data states gracefully
Memoize chart data transformations with useMemo
Converted and distributed by TomeVault
Context snippets also available to append to your CLAUDE.md, GEMINI.md, and copilot-instructions.md — download at TomeVault
1---2name: olijboyd-fiddlybiscuitybits-react-charts3description: ---4---5---6 name: react-charts7 description: Use when building data visualisation components with Recharts. Covers bar8 charts, line charts, area charts, and responsive containers.9 ---1011 # React Charts with Recharts1213 ## When to Use14 - Creating dashboard chart components15 - Adding data visualisation to React apps16 - Customising Recharts themes and tooltips1718 ## Instructions19 1. Always wrap charts in ResponsiveContainer20 2. Use the project's colour palette from Tailwind config21 3. Add meaningful tooltips with custom formatters22 4. Handle empty data states gracefully23 5. Memoize chart data transformations with useMemo2425---26> Converted and distributed by [TomeVault](https://tomevault.io/claim/olijboyd)27> Context snippets also available to append to your CLAUDE.md, GEMINI.md, and copilot-instructions.md — [download at TomeVault](https://tomevault.io/claim/olijboyd)28<!-- tomevault:4.0:skill_md:2026-04-07 -->
Run npx skillmds@latest add tomevault-io/olijboyd-fiddlybiscuitybits-react-charts in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
--- It is listed under Web & Frontend on SkillMD.
SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io