Live example:
app/demo/badge-styling.tsx
in the example app.Reshaping the live-edge value pill
badge rather than a custom React element — they cost
nothing per frame. Pass a BadgeConfig to reshape it:
radius is clamped to the capsule (pillHeight / 2), which stays the maximum;
0 gives sharp corners. textColor mirrors background (set either or both).
The font knobs fall back to the chart font when omitted.
tail: false removes the pointed spike toward the live dot and the space
reserved for it: the pill body sits flush at the gutter edge, right after the
dot gap, and the auto right padding shrinks to match. (The tail only applies to
the default position: "right" badge.)
A badge
fontSize larger than the chart font can crowd the reserved right
gutter (the badge text and y-axis labels share that space and are aligned to
the chart font). If a bigger badge font overflows, pair it with
badge={{ position: "left" }} or yAxis={{ float: true }}, which don’t use
the gutter.