Scaled or redrawn: the same bars in a 600 and a 300 pixel box
In the picture, the first two rows (600 pixels wide) look the same: twelve bars with twelve month names. The third row is the scaled copy at 300 pixels: the same twelve bars at half size, with month names too small to read. The fourth is the redrawn copy at 300: the same bars with Jan, Apr, Jul and Oct in full-size text.
A chart can scale (one drawing, stretched by its viewBox) or redraw (a new drawing at the real width). Scaling is free but shrinks the text. Redrawing keeps text readable and lets you choose fewer ticks and shorter labels, at the cost of watching the box with a ResizeObserver, and of not redrawing on every pixel.
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 onWidthClass(element, callback) that calls callback(cls) only when the size class changes (small, medium, large), using ResizeObserver and the sizeClass function.
The stations bar chart has fixed 20 pixel rows. At 300 pixels wide, which part of it breaks first, and what would you change in drawStationsBar?
Explain it without notes
When is scaling with the viewBox enough, and when should a chart redraw?
Why use a ResizeObserver instead of window.resize?
How does onResize avoid a redraw on every frame of a drag?
Console
(nothing was printed)Expected console output
box 600 px | scaled: label 12.0 px, 12 labels | redrawn: label 12.0 px, 12 labels
box 300 px | scaled: label 6.0 px, 12 labels | redrawn: label 12.0 px, 4 labels