chart-kit/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.

TypeScript

3,115

455 commits

updated Sep 6, 2026

See the code

README

React Native Chart Kit

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.

npm downloads license

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

Pro Charts

Chart Kit Pro adds licensed chart workflows for product dashboards:

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.

android
chart
charting
charts
data-visualization
graph
graphs
ios
line-charts
mobile
mobile-charts
react
react-native
react-native-svg
typescript

chart-kit/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.

TypeScript

3,115

455 commits

updated Sep 6, 2026

See the code

README

React Native Chart Kit

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.

npm downloads license

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

Pro Charts

Chart Kit Pro adds licensed chart workflows for product dashboards:

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.

android
chart
charting
charts
data-visualization
graph
graphs
ios
line-charts
mobile
mobile-charts
react
react-native
react-native-svg
typescript

Project health

Latest release

7.0.4 · Sep 6, 2026

Releases this year

8

Significant stargazers

Max T.

1,270 followers · starred Feb 2021

Mike Hardy

1,271 followers · starred Jun 2021

Jesse Katsumata

441 followers · starred Aug 2020

M. Mert Yildiran

274 followers · starred Apr 2025