The container trap: a parent with no height
Only the third parent draws bars. Only the second one makes Recharts warn: the first fails silently, which is why this bug takes people a long time to find.
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
width, no height -> bars drawn: 0
The width(0) and height(0) of chart should be greater than 0,
please check the style of container, or the props width(100%) and height(100%),
or add a minWidth(0) or minHeight(undefined) or use aspect(undefined) to control the
height and width.
no width, no height -> bars drawn: 0
width and height -> bars drawn: 3