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

### Animating the line and fill color

`line.color` also accepts a `SharedValue<string>`, and `gradient.colors` a
`SharedValue<string[]>`. The chart hands them to Skia as they are, so the stroke
and the area fill change color on the UI thread with no re-render. Drive both
from one progress value to keep them in step:

```tsx theme={null}
const progress = useSharedValue(0);
const color = useDerivedValue(() =>
  interpolateColor(progress.get(), [0, 1], ["#a1a1aa", "#22c55e"]),
);
const fill = useDerivedValue(() => [
  interpolateColor(progress.get(), [0, 1], ["rgba(161, 161, 170, 0.35)", "rgba(34, 197, 94, 0.35)"]),
  interpolateColor(progress.get(), [0, 1], ["rgba(161, 161, 170, 0)", "rgba(34, 197, 94, 0)"]),
]);

<>
  <LiveChart
    data={data}
    value={value}
    line={{ color }}
    gradient={{ colors: fill }}
    scrub
  />
  <Button
    title="Fade to green"
    onPress={() => progress.set(withTiming(1, { duration: 400 }))}
  />
</>;
```

An animated `line.color` reaches the stroke and the built-in scrub selection
dot. The parts that read the line color at render time — a custom
`selectionDot.component`'s `color`, the segment base color, the area-dot tint,
and the threshold split stroke's rest color — use the palette line color (from
`accentColor`) instead. An animated `gradient.colors` must hold at least 2 stops
at all times, and its `positions` apply as given, so keep their lengths equal.
In the Line & area demo, select **Animated** line and **Default** gradient fill.
Tap **Fade to green**, then drag horizontally across the chart while it fades to
see the selection dot follow the stroke. The demo offers **Default** and **Off**
fill in Animated mode; **Custom** is available with the static line modes.

## Dimming replacement data

Keep the current chart visible while fetching a replacement range, then dim only
the plotted data through a UI-thread shared value. Axes, reference lines, and
scrub controls remain readable.

```tsx theme={null}
const seriesOpacity = useSharedValue(1);

function beginReplacementLoad() {
  seriesOpacity.set(0.5);
}

function finishReplacementLoad() {
  seriesOpacity.set(1);
}

<LiveChart data={data} value={value} seriesOpacity={seriesOpacity} />;
```

`seriesOpacity` affects the line and area fill, candles and volume bars, value
line, badge, and inline value text. While it is below `1`, the live dot and its
pulse ring fade completely out instead of becoming translucent over the stroke;
they fade back in after the series returns to full opacity. Pass the same shared
value to a candle chart—no mode-specific configuration is required. The Line &
area example's **Dim while loading** control demonstrates the transition by
pausing its synthetic feed, freezing the current range, and replacing that range
when loading completes.

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

### Denoising dense paths

Use `line.simplify` when dense samples make the plotted path look busier than the
screen can meaningfully show:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  line={{ simplify: 1 }} // remove deviations of about one screen pixel or less
/>
```

The tolerance is measured after points are projected into the chart, so it stays
visually consistent across values and canvas sizes. The simplifier retains the
line endpoints and peaks or valleys that exceed the tolerance. It only changes
the line and area-fill geometry: the original data still drives Y-range fitting,
the live value, markers, and scrub callbacks. `0` (the default) disables it;
`0.75`–`1.5` is a useful starting range for subtle denoising.

See [Line denoising](/guides/line-denoising) for the raw-vs-simplified example,
tolerance guidance, multi-series overrides, and rendering-cost details.

## 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 crisp contrasting outer **ring**.
Style it via `dot` — the same `DotConfig` that `LiveChartSeries` uses. A soft
static glow is available separately and remains off unless explicitly enabled:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  dot={{
    radius: 4,
    ring: { color: "#0b0b0f", width: 3 },
    glow: { radius: 7, blur: 5, opacity: 0.16 },
  }}
  pulse={false} // glow and pulse are independent
  // dot={{ ring: false }}  // flat dot, no backing ring
  // dot={{ show: false }}  // hide the dot
/>
```

`glow: true` uses restrained defaults (`radius: 7`, `blur: 5`, `opacity: 0.18`,
dot fill color). A config object can tune every value or supply its own color.
The glow is a static Skia layer and starts no frame callback; `pulse` remains the
separate expanding-ring animation.

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

## Shared curve calculations

Line and area-fill paths share the curve calculations for each visible segment.
Threshold bands use the same curve when geometry changes. Updating only a
threshold retains the existing line and area paths. Gaps keep separate contours,
so fills do not bridge missing intervals. No configuration change is needed.


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