How big is 12-unit text at three widths, and do the digits line up?
The scaling numbers are exact: pixels per unit is container width ÷ 400. The default digits in the left column may or may not line up, depending on the font installed on your computer, which is the point: tabular-nums makes the result the same everywhere the font supports it. The cut label's exact text depends on the font, so the example prints facts about it, not the text.
Chart text is part of the data. Pick sizes that stay readable when the SVG scales, line numbers up with tabular digits, write titles that state the finding, and place annotations so they never sit on the data or run off the edge.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write fitTitle(textNode, title, maxWidth) that returns the title unchanged if it fits and otherwise cuts words from the end and adds …. Test with a 200-unit and a 600-unit width.
Add a second annotation for the second-lowest day. What happens if it is close to the first one, and how would you avoid two labels on top of each other?
Explain it without notes
Why does text in a scaled SVG get small on a phone, and what is the fix?
What does font-variant-numeric: tabular-nums do, and when does it have no effect?
What makes a chart title a "finding"? Give the Lumen example.
Preview
Console
Nothing logged yet.Expected console output
container 200 px -> a 12-unit label is drawn 6.0 px tall
container 400 px -> a 12-unit label is drawn 12.0 px tall
container 800 px -> a 12-unit label is drawn 24.0 px tall
tabular-nums: 1111 and 8888 the same width: true
fits 90 units: true | was shortened: true | ends with an ellipsis: true
a short label stays whole: true