Skip to main content
Live example: app/demo/badge-alignment.tsx in the example app under Styling & theming → Badge alignment.

Centered and column-aligned prices, digit-width transitions, and layout fallbacks

The demo compares the default centered badge with textAlign: "yAxisColumn". Choose 99.95∗∗,∗∗99.95**, **100.00, or Repeat transition to inspect the column as its widest label gains or loses a digit. The time window is fixed so the same prices and controls give a repeatable comparison.
The value starts at the labels’ shared left edge; a value wider than the column ends at its right edge. The pill keeps its shape. Padding can limit the alignment, and a value that cannot fit with padding stays centered. The right inset above fits this demo’s 11 px font and prices near $100; size it for your own widest price. Try Roomy to make the difference between centering and column alignment more visible. In Layout checks, Tight demonstrates the padding limit while keeping the whole value readable. Gutter presets grow with Larger font; the wider badge value ends at the column’s right edge, while the axis column is still measured with the chart font. Floating, Left, Default (no column), and Left of dot keep the centered behavior. Tail changes the available pill width, and Offset −12 moves the whole badge, including its value. For the complete positioning rules, see Axes & grid → Badge value in the column and BadgeConfig.