365 days: gaps, dots and an empty state
Days 69 to 71 have no reading. In the first chart the line breaks there (2 pieces). In the second connectNulls draws across the gap, and the 362 dots (365 minus 3 missing days) are 362 extra SVG circles the first chart does not have.
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
gap kept, dot={false}: line pieces: 2, dots: 0
gap joined, with dots: line pieces: 1, dots: 362
empty data: No rides to show yet.