react-native-chart-kit is an MIT-licensed TypeScript charting library for React Native that renders line, area, bar, pie, donut, progress, and contribution heatmap charts as SVG, built for mobile developers shipping dashboards, reports, and data-rich apps.

What it is

React Native Chart Kit is a charting library for React Native, written in TypeScript and published under the MIT licence. It provides a set of chart components — line, area, bar, pie, donut, progress, and contribution heatmap — that render through react-native-svg, with shared themes and shared SVG renderer defaults so charts stay consistent across a screen. The package ships a documented v2 entry point at react-native-chart-kit/v2, while the root import remains available for legacy screens.

The concrete problem it solves is that React Native provides no built-in chart primitives, so teams building dashboards and reports either hand-roll SVG drawing code or pull in web-oriented charting libraries that do not map cleanly onto native views and touch gestures. Chart Kit replaces that hand-rolled drawing layer with importable components and configuration, and it treats touch as a first-class concern through tap selection, shared tooltips, and crosshairs. It also ships migration material for apps already on v1, including a from-v1 guide and a prop mapping reference, so existing screens can be ported rather than rewritten.

Key capabilities

• Renders seven public chart types: line, area, bar, pie, donut, progress, and contribution heatmap.
• Exposes a v2 entry point via react-native-chart-kit/v2, with the root import retained for legacy screens.
• Supports mobile interactions including tap selection, shared tooltips, and crosshairs.
• Applies shared themes and SVG renderer defaults across charts.
• Documents migration from v1 plus a prop mapping reference for porting existing charts.
• Ships a documentation CLI: npx --package=react-native-chart-kit chart-kit docs /docs/react-native/charts/line, with --json for structured output, available from version 7.0.4 and requiring no API key.
• Publishes machine-readable documentation artifacts, including llms.txt and an OpenAPI specification for the documentation HTTP API.

Who uses it and how

• Mobile product teams embedding revenue, usage, or engagement charts into React Native dashboards.
• Reporting screens inside apps that need pie, donut, or progress charts without a web view.
• Apps displaying contribution-style heatmaps for activity or streak data.
• Teams migrating existing v1 chart screens using the from-v1 guide and prop mapping reference.
• Agent and tooling workflows that read documentation through the chart-kit docs command or llms.txt.

Getting started

Install with npm install react-native-chart-kit react-native-svg, or in Expo with npm install react-native-chart-kit followed by npx expo install react-native-svg. New screens should import from react-native-chart-kit/v2.

How it compares

No comparable charting library is named in the facts for this entry, so React Native Chart Kit stands alone in this registry at present. Its only stated relationship is a dependency on react-native-svg, alongside its own separately licensed Pro tier rather than a rival package.

When to use it — and when not to

Adoption means adding react-native-svg as a dependency and maintaining a native build, so a team owns that native dependency chain because charts render locally inside the application. Chart types such as candlebar, radar, realtime bar, and combo, along with the PNG and SVG export APIs, sit behind the licensed Pro tier, so teams that need those without paying should look elsewhere. The documentation CLI requires version 7.0.4 or later, which is worth checking before wiring it into an automated docs pipeline.

npm install react-native-chart-kit react-native-svg

npm install react-native-chart-kit
npx expo install react-native-svg

import { LineChart } from "react-native-chart-kit/v2";

const data = [
  { month: "Jan", revenue: 52 },
  { month: "Feb", revenue: 86 },
  { month: "Mar", revenue: 58 },
  { month: "Apr", revenue: 134 }
];

export function RevenueChart() {
  return (
    <LineChart
      data={data}
      xKey="month"
      yKey="revenue"
      width={410}
      height={240}
    />
  );
}

npx --package=react-native-chart-kit chart-kit docs /docs/react-native/charts/line