Skip to main content
100%

Wrapping Long Labels

✓ Published0🌍 Public
GGerardoFurtado
Last edited Aug 27, 2018
Created on Aug 27, 2018

This example shows a horizontal bar chart of satirical survey responses from The Onion, with long category labels wrapped onto multiple lines using a custom `wrap` function. The code uses D3 v3 with SVG rendering, ordinal `x` and linear `y` scales, and `d3.svg.axis` for axes. The `wrap` function splits label text on spaces and appends `tspan` elements, measuring each line with `getComputedTextLength()` to fit within the bar width. The chart dynamically adjusts the bottom margin based on the number of wrapped lines, while bar colors change on hover.

AI-generated description

This example, using satirical data from The Onion, demonstrates how to wrap long axis labels to fit on multiple lines.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7555321'>Wrapping Long Labels</a>

gpl-3.0 Licensed

Similar vizzes