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

# Axes & grid

> Tune the grid lines, hide or space the axes, float edge labels, and adjust the plot insets.

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

<Frame caption="Grid lines, axis spacing, and edge labels">
  <video autoPlay loop muted playsInline controls poster="/media/axes-and-grid.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/axes-and-grid.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=6024a290f5cc9605b4b0c91a3dd2be88" data-path="media/axes-and-grid.mp4" />
</Frame>

## Grid & axes

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  yAxis={{ minGap: 36 }}
  xAxis={{ minGap: 60 }}
  gridStyle={{ color: "#1f2937", intervals: [1, 3], opacity: 0.8 }}
/>
```

Pass `yAxis={false}` or `xAxis={false}` to hide an axis. `gridStyle.intervals` of `[]` renders
solid grid lines.

## Fixed Y-axis price count

By default the Y axis picks a dynamic number of "nice"-value grid lines from `minGap`. Pass
`yAxis={{ count }}` to instead show a **fixed** number of prices, spaced evenly down the plot —
top label = current high, bottom = current low. The count stays constant as data streams in;
the values track the live range each frame (they aren't rounded to nice numbers).

```tsx theme={null}
<LiveChart data={data} value={value} yAxis={{ count: 5 }} />
```

`minGap` still acts as a floor: if `count` labels won't fit at least `minGap` px apart, the count
drops to what fits. The count is clamped to at most 15.

## Right-anchored price label column

Set `labelRightMargin` to place every Y-axis label at the same left X in a column whose right edge
is measured from the canvas edge. Add `gridEndGap` to keep a fixed gap between the grid-line end
and that column:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  yAxis={{ labelRightMargin: 8, gridEndGap: 6 }}
/>
```

Without `labelRightMargin`, labels keep their default centered-gutter placement and `gridEndGap`
has no effect. When combined with `yAxis.float`, `labelRightMargin` overrides the floating axis's
default edge margin.

Plain horizontal `referenceLines` stop at the same X as the grid, keeping the gap consistent.
`fullWidth` reference lines and value/time bands keep their existing extents.

## Axis edge labels

`topLabel` and `bottomLabel` float a value at the top / bottom edge of the plot — the
Robinhood-style high/low readout. Pass `true` for the batteries-included label: the chart shows
its current top (`topLabel`) and bottom (`bottomLabel`) Y-axis bound, formatted with the chart's
`formatValue` and updated each frame on the UI thread.

```tsx theme={null}
<LiveChart data={data} value={value} topLabel bottomLabel />
```

Both default off. Pass an [`AxisLabelConfig`](/api-reference/types#axislabelconfig) to tune the
built-in label — `format`, `color`, `position` (`"left"` | `"right"`, default `"right"`), and the
text `fontSize` / `fontWeight` / `fontFamily`:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  topLabel={{ color: "#22d3ee", position: "left", fontSize: 14, fontWeight: "600" }}
  bottomLabel={{ format: (v) => `$${v.toFixed(2)}` }}
/>
```

For full control, the `render` escape hatch floats any element at the edge (it overrides the
built-in value):

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  topLabel={{ render: () => <Text style={styles.highLabel}>High</Text> }}
/>
```

<Note>
  To pin the label to the **actual high / low data point** instead of the edge — `position: "extrema"`
  / `"extrema-edge"` — see [Extrema labels](/guides/extrema-labels).
</Note>

## Spacing

Adjust the drawing area with `insets` (`top`, `right`, `bottom`, `left`) and soften the left edge
with `leftEdgeFade`.

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  insets={{ top: 12, bottom: 28, left: 12 }}
  leftEdgeFade={{ width: 40 }}
/>
```