The CSS font-size property sets the size of rendered text. In responsive SVG charts, text scales with the graphic, so labels that look clear on desktop can become tiny on phones. section 9.2.1
Use the property with a responsive sizing strategy:
- Create a linear scale that maps screen or SVG width to font size, and clamp it so values stay within the chosen range. section 9.2.1 section 10.2.1
- Apply the calculated value to chart text through D3’s style() method, then recalculate it when the window emits a resize event. section 9.2.1
- Keep text at least 12 px, using larger sizes for primary content and smaller sizes only for secondary information. section 10.2.1 section 10.3
Responsive chart labels
A line chart can map widths from 600 to 1,000 pixels to font sizes from 26 to 16 pixels, apply the result to #line-chart text, and update windowWidth before redrawing on resize. section 9.2.1
const fontSizeScale = d3.scaleLinear() .domain([600, 1000]) .range([26, 16]) .clamp(true);
Inspect the clamped D3 linear scale used to calculate a responsive font-size value. section 9.2.1
