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

## Left-side Y-axis labels

Both `LiveChart` and `LiveChartSeries` accept `yAxis.side`; it defaults to `"right"`.
Reserve enough room for your widest formatted label with `insets.left`:

```tsx theme={null}
<LiveChart data={data} value={value} yAxis={{ side: "left" }} insets={{ left: 64 }} />
```

Labels are centered in the left gutter. Its width is explicit rather than measured
automatically, so account for your font and formatter. Grid lines still span the
plot. Right-label options (`float`, `labelRightMargin`, `gridEndGap`) do not position
left labels. The live badge and multi-series value labels remain on their existing
side. Left labels render after the left-edge fade so the gutter stays readable.

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

## Nice intervals in display units

Use `intervalScale` when stored values and displayed values differ by a constant multiplier.
The chart keeps every point in its original units, but chooses dynamic grid intervals after
applying the multiplier. Apply the same multiplier in `formatValue`:

```tsx theme={null}
const DISPLAY_SCALE = 987_654_321;

const formatDisplayValue = (value: number) => {
  "worklet";
  return `$${Math.round(value * DISPLAY_SCALE)}`;
};

<LiveChart
  data={data}
  value={value}
  yAxis={{ intervalScale: DISPLAY_SCALE }}
  formatValue={formatDisplayValue}
/>
```

This can turn labels such as `$9,876,543` and `$10,864,198` into round `$10,000,000` and
`$11,000,000` intervals. The chart geometry, markers, reference lines, and scrub values stay in
their original units. The multiplier must be positive and finite; invalid values behave as `1`.
If applying it would overflow or underflow the current live range, interval selection safely falls
back to source units. Fixed-count mode ignores it because `{ count }` tracks the exact visible range
instead of choosing nice intervals.

## 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 }}
/>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.