Recharts

andy-spike/skills/skills/recharts

by andy-spike2737eadc3b88390775e71b4e0e4c5e1571607409No license1 starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 6 months ago

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.

Instructions onlySoftware DevelopmentData & Analytics
AI-generated overview

Guides building responsive React charts with the Recharts library, covering chart types, customization, performance and accessibility.

What it does
This skill provides reference instructions for creating data visualizations with Recharts, a React charting library built on D3. It documents chart types such as line, area, bar, pie, scatter, radar and composed charts, along with axes, tooltips, legends, responsive sizing, interactions, performance optimization and accessibility. It also points to bundled reference files for API details, examples and best practices. It produces chart code and configuration guidance rather than data analysis.
When to use it
Use it when implementing charts or data visualizations in a React application with Recharts. It fits tasks involving chart customization, responsive layout, tooltips, legends, axis configuration, performance tuning or accessibility. It is not intended for statistical analysis of datasets or for non-React charting libraries.
Requirements
Requires a React project with the recharts package installed via npm. No scripts are shipped; the skill is instructions plus three reference markdown files.

Recharts

React charting library built on top of D3 for composable, declarative data visualization.

Quick Start

1. Install Recharts

bash
npm install recharts

2. Basic Chart Structure

All Recharts charts follow the same pattern:

jsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const data = [  { name: 'Jan', sales: 4000, profit: 2400 },  { name: 'Feb', sales: 3000, profit: 1398 },  { name: 'Mar', sales: 2000, profit: 9800 },];
<ResponsiveContainer width="100%" height={300}>  <LineChart data={data}>    <CartesianGrid strokeDasharray="3 3" />    <XAxis dataKey="name" />    <YAxis />    <Tooltip />    <Legend />    <Line type="monotone" dataKey="sales" stroke="#8884d8" />    <Line type="monotone" dataKey="profit" stroke="#82ca9d" />  </LineChart></ResponsiveContainer>

Core Concepts

Data Format

Recharts expects data as an array of objects. Each object represents a data point:

javascript
const data = [  { month: 'Jan', revenue: 4000, expenses: 2400 },  { month: 'Feb', revenue: 3000, expenses: 1398 },];

Use dataKey props to map object properties to chart components:

  • dataKey="revenue" - maps to the revenue property
  • dataKey={(entry) => entry.revenue - entry.expenses} - function for computed values

Component Composition

Charts are built by nesting specialized components:

Sizing: Use the responsive prop (v3.3+), ResponsiveContainer wrapper, or set width/height directly

Chart types (choose one):

  • LineChart - Line and area visualizations
  • BarChart - Bar and column charts
  • AreaChart - Stacked and filled area charts
  • PieChart - Pie and donut charts
  • ScatterChart - Scatter plots and bubble charts
  • ComposedChart - Mixed chart types
  • RadarChart - Radar/spider charts
  • RadialBarChart - Circular bar charts

Common child components:

  • XAxis / YAxis - Axis configuration
  • CartesianGrid - Grid lines
  • Tooltip - Hover information
  • Legend - Series identification
  • Line / Bar / Area / Pie - Data series visualization

Chart Patterns by Type

Line Charts

jsx
<LineChart data={data}>  <XAxis dataKey="name" />  <YAxis />  <CartesianGrid strokeDasharray="3 3" />  <Tooltip />  <Legend />  <Line type="monotone" dataKey="value" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} /></LineChart>

Key props:

  • type: "monotone" (smooth), "linear", "step", "natural"
  • stroke: line color
  • strokeWidth: line thickness
  • dot: point styling (set to false to hide)
  • activeDot: hovered point styling
  • connectNulls: true to connect gaps

Area Charts

jsx
<AreaChart data={data}>  <defs>    <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>    </linearGradient>  </defs>  <XAxis dataKey="name" />  <YAxis />  <CartesianGrid strokeDasharray="3 3" />  <Tooltip />  <Area type="monotone" dataKey="value" stroke="#8884d8" fillOpacity={1} fill="url(#colorValue)" /></AreaChart>

Stacked areas:

jsx
<Area type="monotone" dataKey="sales" stackId="1" stroke="#8884d8" fill="#8884d8" /><Area type="monotone" dataKey="profit" stackId="1" stroke="#82ca9d" fill="#82ca9d" />

Bar Charts

jsx
<BarChart data={data}>  <XAxis dataKey="name" />  <YAxis />  <CartesianGrid strokeDasharray="3 3" />  <Tooltip />  <Legend />  <Bar dataKey="sales" fill="#8884d8" radius={[4, 4, 0, 0]} />  <Bar dataKey="profit" fill="#82ca9d" radius={[4, 4, 0, 0]} /></BarChart>

Key props:

  • fill: bar color
  • radius: rounded corners [topLeft, topRight, bottomRight, bottomLeft] or single number for all corners
  • barSize: fixed bar width
  • stackId: group bars into stacks
  • shape: custom bar shape (function or element)

Stacked bars:

jsx
<Bar dataKey="sales" stackId="a" fill="#8884d8" /><Bar dataKey="profit" stackId="a" fill="#82ca9d" />

Rounded stacked bars (use BarStack to round the whole stack):

jsx
import { BarStack } from 'recharts';
<BarChart data={data}>  <BarStack stackId="a" radius={[4, 4, 0, 0]}>    <Bar dataKey="sales" fill="#8884d8" />    <Bar dataKey="profit" fill="#82ca9d" />  </BarStack></BarChart>

Pie Charts

jsx
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
<PieChart>  <Pie    data={data}    dataKey="value"    nameKey="name"    cx="50%"    cy="50%"    innerRadius={60}    outerRadius={80}    paddingAngle={5}    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}  />  <Tooltip />  <Legend /></PieChart>

Key props:

  • innerRadius: creates donut chart when > 0
  • outerRadius: pie size
  • paddingAngle: gap between slices
  • startAngle / endAngle: partial pie (default: 0 to 360)
  • label: shows values on slices
  • shape: custom render for each slice (replaces deprecated Cell component)

Scatter Charts

jsx
<ScatterChart>  <XAxis type="number" dataKey="x" name="X Axis" />  <YAxis type="number" dataKey="y" name="Y Axis" />  <CartesianGrid />  <Tooltip cursor={{ strokeDasharray: '3 3' }} />  <Scatter name="Series A" data={data} fill="#8884d8" /></ScatterChart>

Composed Charts

Mix multiple chart types:

jsx
<ComposedChart data={data}>  <XAxis dataKey="name" />  <YAxis />  <CartesianGrid stroke="#f5f5f5" />  <Tooltip />  <Legend />  <Area type="monotone" dataKey="total" fill="#8884d8" stroke="#8884d8" />  <Bar dataKey="sales" barSize={20} fill="#413ea0" />  <Line type="monotone" dataKey="profit" stroke="#ff7300" /></ComposedChart>

Responsive Sizing

Option 1: responsive prop (Recharts 3.3+, recommended)

Set responsive on the chart itself. Uses standard CSS sizing rules:

jsx
<LineChart data={data} width="100%" height={300} responsive>  {/* chart components */}</LineChart>

Works with flexbox and CSS grid layouts. Also supports CSS style props:

jsx
<LineChart data={data} responsive style={{ maxWidth: 800, width: '100%', aspectRatio: '16/9' }}>  {/* chart components */}</LineChart>

Option 2: ResponsiveContainer (older versions)

For Recharts < 3.3, wrap chart in ResponsiveContainer:

jsx
<ResponsiveContainer width="100%" height={300}>  <LineChart data={data}>    {/* chart components */}  </LineChart></ResponsiveContainer>

Critical: ResponsiveContainer must have a parent with defined dimensions. Height must be a number, not a percentage.

Static sizing

Set width and height directly as pixels or percentages:

jsx
<LineChart data={data} width={600} height={300}>  {/* chart components */}</LineChart>

Axes Configuration

XAxis / YAxis Props

jsx
<XAxis   dataKey="name"           // property to display  type="category"          // "category" or "number"  domain={[0, 'dataMax']}    // axis range  tick={{ fill: '#666' }}    // tick styling  tickFormatter={(value) => `$${value}`}  // format labels  angle={-45}               // rotate labels  textAnchor="end"         // text alignment  height={60}              // extra space for labels/>

Axis Types

  • Category axis (default for X): Treats values as discrete labels
  • Number axis (default for Y): Treats values as continuous scale

Custom Domains

Control axis range:

jsx
// Fixed range<YAxis domain={[0, 100]} />
// Auto with padding<YAxis domain={[0, 'auto']} />
// Data-based with overflow allowed<YAxis domain={[0, 'dataMax + 100']} allowDataOverflow />
// Logarithmic scale<YAxis type="number" scale="log" domain={['auto', 'auto']} />

Customization

Custom Tooltip

jsx
const CustomTooltip = ({ active, payload, label }) => {  if (active && payload && payload.length) {    return (      <div className="custom-tooltip">        <p className="label">{`${label}`}</p>        <p className="intro">{`Sales: ${payload[0].value}`}</p>        <p className="desc">Additional info...</p>      </div>    );  }  return null;};
<Tooltip content={<CustomTooltip />} />

Custom Legend

jsx
const CustomLegend = ({ payload }) => (  <ul>    {payload.map((entry, index) => (      <li key={`item-${index}`} style={{ color: entry.color }}>        {entry.value}      </li>    ))}  </ul>);
<Legend content={<CustomLegend />} />

Custom Shapes

Custom bar shape:

jsx
const CustomBar = (props) => {  const { x, y, width, height, fill } = props;  return <path d={`M${x},${y} ...`} fill={fill} />;};
<Bar shape={<CustomBar />} dataKey="sales" />// OR<Bar shape={(props) => <CustomBar {...props} />} dataKey="sales" />

Custom Labels

jsx
<Line   dataKey="sales"   label={{ position: 'top', fill: '#666', fontSize: 12 }}/>
// Custom label component<Line   dataKey="sales"   label={<CustomLabel />}/>

Styling

Chart styles:

jsx
<LineChart style={{ backgroundColor: '#f5f5f5' }}>

Axis styling:

jsx
<XAxis   axisLine={{ stroke: '#666' }}  tickLine={{ stroke: '#666' }}  tick={{ fill: '#666', fontSize: 12 }}/>

Grid styling:

jsx
<CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

Interactions

Active Elements and Interaction Control

The Tooltip component controls active element highlighting. Do not use activeIndex prop (removed in v3).

Tooltip interaction props:

  • defaultIndex: Sets initial highlighted item on render
  • active: If true, tooltip remains active after interaction ends
  • trigger: "hover" (default) or "click" for click-based interaction
  • content: Custom content or () => null to hide tooltip text while keeping highlight
  • cursor: Visual cursor in plot area, set to false to hide
jsx
{/* Click-based interaction with hidden tooltip text */}<Tooltip trigger="click" content={() => null} cursor={false} />
{/* Default highlighted item on render */}<Tooltip defaultIndex={2} />

Click Events

jsx
<LineChart onClick={(e) => console.log(e)}>  <Bar     dataKey="sales"     onClick={(data, index) => console.log('Bar clicked:', data)}  /></LineChart>

Synchronized Charts

Link multiple charts with syncId:

jsx
<LineChart data={data1} syncId="anyId">  {/* components */}</LineChart>
<LineChart data={data2} syncId="anyId">  {/* components - tooltips synchronize */}</LineChart>

Brush for Zooming

jsx
<LineChart data={data}>  {/* other components */}  <Brush dataKey="name" height={30} stroke="#8884d8" /></LineChart>

Performance Optimization

1. Stable References

Use useMemo and useCallback for props:

jsx
// BAD - new function on every render<Line dataKey={(entry) => entry.sales * 2} />
// GOOD - stable referenceconst dataKey = useCallback((entry) => entry.sales * 2, []);<Line dataKey={dataKey} />

2. Memoize Components

jsx
const MemoizedChart = React.memo(({ data }) => (  <LineChart data={data}>    {/* components */}  </LineChart>));

3. Isolate Changing Components

Separate frequently updating components:

jsx
const Chart = () => {  const [hoveredData, setHoveredData] = useState(null);    return (    <LineChart>      {/* Static components */}      <Line dataKey="sales" />            {/* Dynamic overlay */}      <ReferenceLine x={hoveredData?.x} stroke="red" />    </LineChart>  );};

4. Debounce Events

jsx
import { useDebouncedCallback } from 'use-debounce';
const handleMouseMove = useDebouncedCallback((e) => {  setPosition(e.activeLabel);}, 10);
<LineChart onMouseMove={handleMouseMove}>

5. Reduce Data Points

For large datasets, consider aggregation:

jsx
// Bin data before renderingconst binnedData = useMemo(() => {  return d3.bin().value(d => d.x)(rawData);}, [rawData]);

Accessibility

Recharts includes built-in accessibility support:

jsx
<LineChart accessibilityLayer={true}>  <Line dataKey="sales" name="Monthly Sales" /></LineChart>

Accessibility is enabled by default. The chart is keyboard navigable and screen reader compatible.

ARIA props:

jsx
<LineChart role="img" aria-label="Sales chart showing monthly revenue">

Common Patterns

Multiple Data Series

jsx
<LineChart data={data}>  <XAxis dataKey="month" />  <YAxis />  <Tooltip />  <Legend />  <Line type="monotone" dataKey="productA" name="Product A" stroke="#8884d8" />  <Line type="monotone" dataKey="productB" name="Product B" stroke="#82ca9d" />  <Line type="monotone" dataKey="productC" name="Product C" stroke="#ffc658" /></LineChart>

Horizontal Bar Chart

jsx
<BarChart layout="vertical" data={data}>  <XAxis type="number" />  <YAxis type="category" dataKey="name" />  <Bar dataKey="value" /></BarChart>

Donut Chart

jsx
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
<PieChart>  <Pie    data={data}    innerRadius={60}    outerRadius={80}    paddingAngle={5}    dataKey="value"    shape={(props) => <Sector {...props} fill={COLORS[props.index % COLORS.length]} />}  /></PieChart>

Note: Cell component is deprecated and will be removed in Recharts 4.0. Use the shape prop on Bar, Pie, Scatter, etc. instead.

Reference Lines/Areas

jsx
<LineChart data={data}>  {/* ... */}  <ReferenceLine y={5000} label="Target" stroke="red" strokeDasharray="3 3" />  <ReferenceArea x1="Jan" x2="Mar" fill="#8884d8" fillOpacity={0.1} /></LineChart>

Error Bars

jsx
<ScatterChart>  <Scatter data={data}>    <ErrorBar dataKey="errorX" width={4} strokeWidth={2} />    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} direction="y" />  </Scatter></ScatterChart>

Integration Patterns

With State Management

jsx
const SalesChart = () => {  const [timeRange, setTimeRange] = useState('month');  const data = useSelector(state => selectSalesData(state, timeRange));    return (    <ResponsiveContainer>      <LineChart data={data}>        {/* components */}      </LineChart>    </ResponsiveContainer>  );};

With Real-time Data

jsx
const RealtimeChart = () => {  const [data, setData] = useState([]);    useEffect(() => {    const interval = setInterval(() => {      setData(prev => [...prev.slice(-20), newDataPoint]);    }, 1000);    return () => clearInterval(interval);  }, []);    return (    <LineChart data={data}>      <XAxis dataKey="time" />      <YAxis domain={['auto', 'auto']} />      <Line type="monotone" dataKey="value" isAnimationActive={false} />    </LineChart>  );};

Z-Index and Layering (v3.4+)

Components render in a default order (grid < axes < chart elements < tooltip/legend). Override with zIndex prop:

jsx
<Line dataKey="sales" zIndex={10} />  // Render on top

For components without direct zIndex support, wrap in ZIndexLayer:

jsx
import { ZIndexLayer } from 'recharts';
<ZIndexLayer zIndex={5}>  <CustomAnnotation /></ZIndexLayer>

Coordinate Systems

Recharts has three coordinate systems:

  1. Domain coordinates - Data values (e.g., x="March", y=5000). Used by ReferenceLine, ReferenceDot, ReferenceArea. Automatically converted to pixels.
  2. Pixel coordinates - Positions relative to chart viewBox. Used for custom SVG shapes. Access via usePlotArea(), useOffset(), useChartWidth() hooks.
  3. Mouse event coordinates - Browser viewport coordinates. Convert with getRelativeCoordinate(event, element).

Converting between systems:

  • Data to pixels: useXAxisScale(), useYAxisScale()
  • Pixels to data: useXAxisInverseScale(), useYAxisInverseScale()

Troubleshooting

Chart Not Rendering

  • Ensure ResponsiveContainer has a parent with defined dimensions
  • Check that height is a number (not percentage in ResponsiveContainer)
  • Verify data is an array of objects

Tooltip Not Showing

  • Ensure Tooltip component is included
  • Check that dataKey values exist in data objects

Axis Labels Overlapping

  • Rotate labels: <XAxis angle={-45} textAnchor="end" height={80} />
  • Use interval: <XAxis interval={0} /> (0 = show all, 'preserveStartEnd' = auto)

Animation Issues

  • Disable: <Line isAnimationActive={false} />
  • Reduce duration: <Line animationDuration={500} />

Resources

References

  • API Reference [blocked] - Complete component props and API details
  • Examples [blocked] - Common chart patterns and code snippets
  • Best Practices [blocked] - Performance and design guidelines

External Resources

Source and attribution

Source:andy-spike/skillsinskills/rechartsat commit2737ead

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More in Software Development

Playground

anthropics

Featured

Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.

Software Development37Kupdated today

M5 Onboard

anthropics

Featured

Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.

Software Development37Kupdated today

Cardputer Buddy

anthropics

Featured

Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.

Software Development37Kupdated today

Web Design Guidelines

vercel-labs

Featured

Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.

Software Development32Kupdated 5 weeks ago

Vercel React Native Skills

vercel-labs

Featured

React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.

Software Development32Kupdated 5 weeks ago

Vercel React Best Practices

vercel-labs

Featured

Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.

Software Development32Kupdated 5 weeks ago