chart-kit/react-native-chart-kit

README

React Native Chart Kit

Beautiful charts for React Native. Line, area, bar, pie, donut, progress, and contribution heatmaps for dashboards, reports, and data-rich mobile apps.

Website · Docs · Quickstart · Examples · Pro

Install

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

Expo:

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

First Chart

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}
    />
  );
}

The root import stays available for legacy screens. New screens should use react-native-chart-kit/v2.

What You Get

Modern public charts: line, area, bar, pie, donut, progress, and contribution heatmap.
Mobile interactions: tap selection, shared tooltips, and crosshairs.
Shared themes and SVG renderer defaults.
Migration help for existing apps: from v1 and prop mapping.

Pro Charts

Chart Kit Pro adds licensed chart workflows for product dashboards:

Candlebar, radar, realtime bar, and combo charts.
PNG and SVG export APIs for reports, sharing, and background rendering.
Install Pro or compare pricing.

Links

Documentation CLI and agent access

Read the public documentation from a terminal:

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

Use chart-kit docs to list pages or add --json for structured output. The CLI ships from version 7.0.4. No API key is required. Charts render locally in your application; the HTTP API serves documentation.

See the developer guide, agent instructions, and OpenAPI specification.