Random labels: rotation and measured layout

Layout and bars use the reusable barChartPlugin.

The label rotation slider changes the angle without changing the random Y values. The longest displayed label 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.

Horizontal bars swap the chart dimensions, then reduce the height to one quarter. The data stays the same. Category labels stay unrotated on the left. Their measured width determines the space available for the numeric axis.

The two series appear side by side by default. Stack bars 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.

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 ?seed=<seed> URL parameter reproduces the labels and both value series. The 🔗 button copies a URL for the current data, without layout settings. Randomize data chooses a new seed.

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. All labels stay visible; shallow angles can make neighboring labels overlap.

The character limit includes the ellipsis. The legend keeps the full label.