Random labels: rotation and measured layout

Layout and bars use the reusable barChartPlugin.

Geometry
Stacking
Bars orientation
/
60%
/
100%
Axis labels
45°
0px
Off
Ellipsis
Rendering
Totals
Values
Hover
Data
2
Dataset

Drag the chart’s lower-right corner to resize it.

About this demo

The label rotation slider changes the angle without changing the random Y values. The longest label after truncation determines the X axis height. Left/right padding uses each label’s width and position. Measurements stay cached until the labels, font, or pixel ratio changes.

Orientation changes preserve the chart dimensions and data. Horizontal category labels stay unrotated on the left. Their measured width determines the space available for the numeric axis.

Stacking is Off by default, so the series appear side by side. Normal adds their values within each category. Percent shows each series as a share of the positive or negative total. The legend keeps the original values.

Show values draws compact values outside grouped bars and inside stacked segments, with font sizes from 10px to 25px. Value stacks also show positive and negative totals outside their ends. Percent stacks show segment percentages without totals. Labels that do not fit are omitted.

Bar hover selects one bar. Group hover highlights the full category behind the bars, including gaps. The legend shows all visible series for that category.

Randomize data generates 3–15 items with one-to-three-word labels made from adjectives, nouns, and verbs. Y values use random offsets and spreads across different magnitudes. For vertical bars, the Y axis measures its formatted labels to set its width. Grouped and value modes keep ticks at both Y bounds. Horizontal numeric ticks target 100px spacing. Soft zero limits keep the bar baseline visible in both orientations. Percent mode uses bounds of −100%, 0%, or 100%.

The Series slider selects 1–5 component series. Changing the count keeps the seed and rebuilds the chart at its current size. Existing seeded values remain the same. Randomize data chooses a new seed.

The ?seed=<seed> URL parameter reproduces the labels and values. The optional series parameter sets the series count. The 🔗 button copies a URL for the current data and series count, without layout settings.

Group distribution sets the gaps between category groups and at the plot edges. Group width sets each group’s width as a percentage of the plot dimension divided by the category count. Space around adds half a gap at each plot edge.

Bar distribution sets the gaps between bars and at the edges inside each group. Bar width sets each bar’s width as a percentage of the group width divided by the number of visible bars or stacks. At 100%, bars fill the group without gaps. A smaller width makes the distribution modes visible. Stacked series share one bar position. These controls keep the data unchanged.

Gray shows the space outside the plot. The default minimum label spacing of 0px shows all labels. Larger spacing thins labels without changes to bars or ticks. Neighboring labels can still overlap.