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.
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.