Theming

Live example: app/demo/theming.tsx (colors, gradient, fonts) in the example app.

Light/dark themes and an accent-driven palette

Theme & accent

The palette is derived from two props: a theme ("light" or "dark", default "dark") and an accentColor (default #3323E6). Setting just these gets you a cohesive look.

<LiveChart data={data} value={value} theme="light" accentColor="#8b5cf6" />

Palette overrides

For precise control, override individual resolved-palette keys with palette. Only the keys you set are replaced — everything else stays derived from accentColor + theme.

<LiveChart
  data={data}
  value={value}
  palette={{
    line: "#22c55e",
    candleUp: "#16a34a",
    candleDown: "#dc2626",
    gridLine: "#1f2937",
    tooltipBg: "#0f172a",
  }}
/>

Common keys include line, fillTop / fillBottom, gridLine / gridLabel, dotUp / dotDown / dotFlat, candleUp / candleDown / wickUp / wickDown, crosshairLine, and tooltipBg / tooltipText. See the types reference for the full LiveChartPalette.

Gradient fill

The area under the line is filled with a gradient. By default it’s derived from the accent color (gradient.topOpacity / gradient.bottomOpacity). For full control, pass explicit colors (top → bottom, at least two stops):

<LiveChart
  data={data}
  value={value}
  gradient={{ colors: ["rgba(51,35,230,0.45)", "rgba(168,85,247,0.25)", "rgba(168,85,247,0)"] }}
/>

Omitting colors falls back to the accent-derived top/bottom opacity. Custom colors are single-series only — multi-series lines have no area fill. See the GradientConfig reference for positions and the opacity fields.

Sizing and motion tokens

Where palette controls color, metrics controls shape (badge geometry, candle bounds) and feel (fade and lerp speeds) — the same override model, namespaced. Only the keys you set are replaced; everything else keeps the built-in default.

<LiveChart
  data={data}
  value={value}
  metrics={{
    badge: { padX: 14, tailLength: 8 }, // roomier value pill
    candle: { maxBodyPx: 24 }, // thinner candles
    grid: { fadeInSpeed: 0.3 }, // snappier grid fade-in
    motion: { badgeColorSpeed: 0.2 }, // faster badge color transitions
  }}
/>

The five namespaces:

Namespace	Controls
`badge`	Value-pill geometry: `padX`, `padY`, `tailLength`, `marginEdge`, `dotGap`, `tailSpread`.
`candle`	Candle geometry: `minBodyPx`, `maxBodyPx`, `bodyWidthRatio`.
`grid`	Grid + axis-label fade: `fadeInSpeed`, `fadeOutSpeed`.
`motion`	Lerp speeds: `badgeColorSpeed`, `adaptiveSpeedBoost` (extra catch-up on top of `smoothing`).
`emptyState`	No-data layout: `labelOpacity`, `gapPad`, `gapFadeWidth`.

metrics is available on both LiveChart and LiveChartSeries. See the types reference for the full LiveChartMetrics shape and every default.

Fonts

Chart text (axes, badges, tooltips) uses the font prop. Point it at a system family, or load a custom typeface from a Metro asset:

<LiveChart
  data={data}
  value={value}
  font={{
    fontFamily: "Menlo",
    fontSize: 11,
    typeface: require("./assets/GoogleSansCode-Regular.ttf"),
  }}
/>

For multiple weights, register a Skia font manager (useFonts) and pass it as font.fontManager.

Shaping the live-edge value pill, the grid and axes, or the high / low edge labels has moved to its own guide — see Badge styling, Axes & grid, and Extrema labels.

Getting started

Chart types

Interaction

Annotations & overlays

Dynamic styling & effects

Styling & theming

Live data & engine

Theme & accent

Palette overrides

Gradient fill

Sizing and motion tokens

Fonts

​Theme & accent

​Palette overrides

​Gradient fill

​Sizing and motion tokens

​Fonts

Theme & accent

Palette overrides

Gradient fill

Sizing and motion tokens

Fonts