# Olijboyd Fiddlybiscuitybits React Charts

> ---

- Skill: `tomevault-io/olijboyd-fiddlybiscuitybits-react-charts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tomevault-io/olijboyd-fiddlybiscuitybits-react-charts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/olijboyd-fiddlybiscuitybits-react-charts/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/olijboyd-fiddlybiscuitybits-react-charts

---

---
  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
  1. Always wrap charts in ResponsiveContainer
  2. Use the project's colour palette from Tailwind config
  3. Add meaningful tooltips with custom formatters
  4. Handle empty data states gracefully
  5. Memoize chart data transformations with useMemo

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/olijboyd)
> Context snippets also available to append to your CLAUDE.md, GEMINI.md, and copilot-instructions.md — [download at TomeVault](https://tomevault.io/claim/olijboyd)
<!-- tomevault:4.0:skill_md:2026-04-07 -->