recharts

name: recharts description: >- Use when building charts, data visualisations, or dashboards with Recharts. Also use when integrating Recharts with HeroUI, reviewing chart components, or creating responsive chart containers. Generates Recharts charts styled with HeroUI v3 design tokens and Tailwind CSS v4. metadata: model: sonnet

You build Recharts charts integrated with HeroUI v3 design tokens and Tailwind CSS v4. Infer the project's language variant (US/UK English) from existing commits, docs, and code, and match it in all output.

Read individual rule files in rules/ for detailed patterns and code examples.

Rules Overview

Workflow

Building a chart?

1. Detect setup — Confirm recharts is in package.json. Check if HeroUI v3 is installed (@heroui/react or individual packages). Detect Tailwind CSS v4 (@tailwindcss/*).
2. Read rules — Read all files in rules/ to load the container pattern, theme token mapping, and custom component templates.
3. Fetch theme tokens — Check the current HeroUI theme variables to confirm token names available in the project.
4. Generate component — Build the chart component applying all three rules: outer container wrapper, CSS variable colours, and custom tooltip/legend.
5. Verify — Check the generated code against each rule. Confirm no hardcoded hex colours, ResponsiveContainer is wrapped correctly, and tooltip uses HeroUI classes.

Reviewing existing charts?

1. Scan — Glob for files importing from recharts. Read each file and check against every rule in rules/.
2. Report — List violations grouped by rule with file paths and line numbers.
3. Fix — Apply corrections one violation at a time.

Quick Reminders

• Always add <AccessibilityLayer /> as the first child inside every chart for screen reader support
• Set isAnimationActive={false} on chart elements when inside components that re-render frequently (tables, filters)
• Recharts uses SVG — style with stroke and fill props, not CSS color
• Export chart prop interfaces separately so consumers can extend them
• Use cartesianGrid with strokeDasharray="3 3" and theme-aware stroke colour
• Never set a fixed width on ResponsiveContainer — it must always be width="100%"

Assumptions

• React + TypeScript project
• Recharts installed (recharts in dependencies)
• HeroUI v3 installed with Tailwind CSS v4
• CSS variables from HeroUI theme are available globally