Themes

Charts inherit app-level theme settings from ChartKitProvider, while each chart can still override theme or preset locally.

import { ChartKitProvider, createChartPreset } from "react-native-chart-kit/v2";

const acme = createChartPreset({
  light: {
    background: "#ffffff",
    grid: "#e5edf7",
    series: ["#155eef", "#12b76a"]
  },
  dark: {
    background: "#07111f",
    plotBackground: "#0b1627",
    grid: "#1d3554",
    series: ["#60a5fa", "#34d399"]
  }
});

const data = [
  { date: "Jan", revenue: 52 },
  { date: "Feb", revenue: 86 },
  { date: "Mar", revenue: 58 },
  { date: "Apr", revenue: 134 },
  { date: "May", revenue: 95 },
  { date: "Jun", revenue: 176 }
];

<ChartKitProvider mode="system" preset="acme" presets={{ acme }}>
  <LineChart data={data} xKey="date" yKey="revenue" width={410} height={240} />
</ChartKitProvider>;

Built-In Presets

These names follow the same broad convention used by mature color systems: abstract palette families from Radix Colors, utility color families from Tailwind CSS, and role-based color thinking from Material Design.

Preset	Character	Light series	Dark series
default	Balanced blue/cyan baseline for neutral product UI.
spectrum	Clear blue, green, amber, and violet for high-readability multi-series charts.
aurora	Cool sky, violet, teal, and orange with a polished app feel.
verdant	Fresh green-led palette with rose, sky, and lime accents.
cupertino	Crisp system-style blue, green, orange, and pink.
material	Material-inspired purple primary with teal, error red, and mauve.
graphite	Monochrome grayscale for quiet, editorial, or brand-led surfaces.
contrast	Accessibility-forward high contrast with stronger axis and grid colors.
midnight	Deep slate base with cyan, green, amber, and pink neon accents.

Alpha note: earlier use-case names were removed. Use the palette names above in new code.

Use theme for one-off chart overrides and createChartPreset() for design-system presets that should be shared across a product.

Props

ChartKitProvider

Prop	Type	Description
children	ReactNode	Chart subtree that should inherit provider defaults.
mode	ChartKitThemeMode	Theme mode to apply, including "light", "dark", or "system".
preset	CartesianChartPresetValue	Default preset name or preset object used by descendant charts.
presets	CartesianChartPresetRegistry	Custom preset registry available to descendant charts.
renderer	LineChartRenderer	Default SVG-compatible renderer used by descendant chart surfaces.
theme	CartesianChartTheme	Inline theme overrides merged into descendant chart themes.