A bar chart of monthly rides with a custom tooltip and shape
Hover a bar to see the custom tooltip, or press Tab and then the arrow keys. isAnimationActive={false} keeps this example still. The shape function receives the row's fields (rides) next to the geometry (x, y, width, height).
Recharts draws a chart from React components: a chart, its axes, a grid, a tooltip, a legend and one component per series. It is quick to start, and has a few traps: a container with no height, many points, gaps and the default accessibility.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a StationsBar with Recharts for rows { name, rides }, horizontal (layout="vertical"), sorted busiest first, that shows a sentence for an empty list.
The chart in your app draws nothing. List, in order, the three things you check first.
Explain it without notes
Why does a Recharts chart sometimes draw nothing, with no error in the console, and what are two fixes?
How would you highlight one bar in Recharts 3 without the deprecated Cell?
A Line over 365 days is slow to hover. What do you change first?
What does Recharts do for accessibility by default, and what must you still add?
Preview
Console
Nothing logged yet.Expected console output
bars: 12 | y ticks: 5 | legend items: 1
orange bars: 1
chart svg: role = application | tabindex = 0 | title = Rides per month in 2025