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

# Line & area

> Customize the single-series line chart: gradient, badge, value line, dot, and live value.

`LiveChart` renders a single line series by default. History comes from a
`SharedValue<LiveChartPoint[]>` and the live tip from a `SharedValue<number>`.

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

<Frame caption="Line & area">
  <video autoPlay loop muted playsInline controls poster="/media/line-and-area.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/line-and-area.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=5824908df2bd6e00998913819d4f631e" data-path="media/line-and-area.mp4" />
</Frame>

```tsx theme={null}
<LiveChart data={data} value={value} accentColor="#22c55e" />
```

## Line styling

Override the stroke with the `line` prop, and the area fill with `gradient`:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  line={{ width: 2, color: "#22c55e" }}
  gradient={{ topOpacity: 0.35, bottomOpacity: 0 }}
/>
```

Pass `gradient={false}` to remove the area fill entirely.

### Dotted area fill

For a textured fill, `areaDots` paints a screen-fixed dot lattice clipped to the
area **beneath the line** (the line scrolls over the dots; nothing is drawn above
it). It composes with `gradient`, or use it alone with `gradient={false}`:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  line={{ width: 2, color: "#F7931A" }}
  areaDots={{ spacing: 12, size: 1.6 }} // color defaults to a faint line tint
  gradient={false}
/>
```

Tune `spacing` (lattice pitch), `size` (dot diameter), `color`, and `opacity`.
Like `gradient`, it's a line-mode feature (inert in candle mode).

<Note>
  **Live example:**
  [`app/showcase/kraken.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/showcase/kraken.tsx)
  pairs the dotted area fill with a thin line, Y-axis labels, and a dashed scrub
  crosshair.
</Note>

### Curve & edges

By default the line is a smooth monotone cubic with rounded joins and caps. For an
angular, hard-edged look — think the Robinhood tokenized-stock style — switch the
interpolation to `linear` and sharpen the corners:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  line={{
    width: 1.4,
    curve: "linear", // straight segments instead of the smooth spline
    join: "miter",   // sharp, angular peaks (no corner rounding)
    cap: "butt",     // flat line ends
  }}
/>
```

`curve` (`"monotone"` | `"linear"`), `join` (`"round"` | `"miter"` | `"bevel"`),
and `cap` (`"round"` | `"butt"` | `"square"`) are independent — e.g. keep the
smooth curve but flatten the ends with `cap: "butt"`. `curve: "linear"` applies to
the area fill as well, so the gradient follows the same straight segments.

<Note>
  **Live example:**
  [`app/showcase/robinhood.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/showcase/robinhood.tsx)
  pairs all three for a fully hard-edged line.
</Note>

## Badge, dot, and value line

By default the chart draws a value badge at the tip, a pulsing live dot, and (optionally) a
dashed value line across the plot.

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  badge={{ variant: "default", position: "right" }}
  pulse={{ interval: 2400, maxRadius: 20 }}
  valueLine={{ intervals: [4, 4] }}
/>
```

The live dot is a color-filled circle with a contrasting outer **ring** (halo). Style it via
`dot` — the same `DotConfig` that `LiveChartSeries` uses:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  dot={{ radius: 4, ring: { color: "#0b0b0f", width: 3 } }}
  // dot={{ ring: false }}  // flat dot, no halo
  // dot={{ show: false }}  // hide the dot
/>
```

<Note>
  Most boolean-ish props accept `true` (defaults), `false` (off), or a config object — for
  example `badge`, `pulse`, `valueLine`, `gradient`, `scrub`, and `yAxis`.
</Note>

## Live value overlay

Render the current value as large text in the top-left, optionally tinted by momentum:

```tsx theme={null}
<LiveChart data={data} value={value} showValue valueMomentumColor />
```

## Formatting

Customize axis, badge, and tooltip text with `formatValue` and `formatTime`:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  formatValue={(v) => `$${v.toFixed(2)}`}
  formatTime={(t) => new Date(t * 1000).toLocaleTimeString()}
/>
```

See the full prop list in the [`LiveChart` reference](/api-reference/livechart).