Labels that stay inside the chart
Each line is one decision. The last label would have run 85 px past the right edge if it always went to the right of its point. Labels on a noisy line still touch the line: the halo keeps them readable.
Annotations are the narrator of a chart: a few words, placed beside the mark they talk about, that tell the eye where to look. The order of the steps (setting up, building, the reveal) decides whether the reader follows, and honest framing decides whether they should.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write fits(textBox, chartWidth, chartHeight) that returns true only when the box is entirely inside the chart. Test it with boxes that overflow right, overflow left, overflow the top, and fit exactly.
Draft the annotation for the busiest day (18 July, 4,380 rides). It must state the number and not claim a cause. Say why you left out "because of the sunshine".
Explain it without notes
Why compute an annotation's position from the data row instead of hard-coding pixels?
What goes wrong when a label is placed next to a point near the right edge, and how do you prevent it?
Name the four moves of the story structure used for Lina's page, and say what each does.
Why is "the outage cost us 3,173 rides" a risky sentence, and what do you write instead?
Preview
Console
Nothing logged yet.Expected console output
1 Jan: 1,193 rides | side: right | lines: 1 | moved down: 0 px | naive overflow: 0 px | inside: true
18 Jul: the busies | side: right | lines: 2 | moved down: 0 px | naive overflow: 0 px | inside: true
Summer peak week | side: right | lines: 1 | moved down: 14 px | naive overflow: 0 px | inside: true
14 Aug: 439 rides. | side: right | lines: 2 | moved down: 0 px | naive overflow: 0 px | inside: true
31 Dec: 910 rides | side: left | lines: 1 | moved down: 0 px | naive overflow: 85 px | inside: true