> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge styling

> Reshape the live-edge value pill — radius, colors, border, font, and offset.

<Note>
  **Live example:**
  [`app/demo/badge-styling.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/badge-styling.tsx)
  in the example app.
</Note>

<Frame caption="Reshaping the live-edge value pill">
  <video autoPlay loop muted playsInline controls poster="/media/badge-styling.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/badge-styling.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=0e190a5e2b76635120edde080ffaa03c" data-path="media/badge-styling.mp4" />
</Frame>

The value badge at the live edge is drawn in Skia, so its shape and style are
**config knobs on `badge`** rather than a custom React element — they cost
nothing per frame. Pass a `BadgeConfig` to reshape it:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  badge={{
    radius: 6, // square off the capsule into a rounded rect (0 = sharp corners)
    borderColor: "#ffffff",
    borderWidth: 1,
    textColor: "#0f172a",
    fontSize: 13,
    fontWeight: "700",
    offsetX: -2, // nudge off the live-dot / y-axis anchor
    offsetY: 0,
  }}
/>
```

`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`](/guides/theming#fonts) when omitted.

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