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 ```sh npm install react-native-chart-kit react-native-svg ``` Expo: ```sh npm install react-native-chart-kit npx expo install react-native-svg ``` ## First Chart ```tsx 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 ( ); } ``` The root import stays available for legacy screens. New screens should use `react-native-chart-kit/v2`. ## What You Get - Modern public charts: [line](https://chartkit.io/docs/react-native/charts/line/), [area](https://chartkit.io/docs/react-native/charts/area/), [bar](https://chartkit.io/docs/react-native/charts/bar/), [pie](https://chartkit.io/docs/react-native/charts/pie/), [donut](https://chartkit.io/docs/react-native/charts/donut/), [progress](https://chartkit.io/docs/react-native/charts/progress/), and [contribution heatmap](https://chartkit.io/docs/react-native/charts/contribution-heatmap/). - Mobile interactions: [tap selection, shared tooltips, and crosshairs](https://chartkit.io/docs/react-native/charts/line/#tooltips-and-selection). - Shared [themes](https://chartkit.io/docs/react-native/charts/themes/) and SVG renderer defaults. - Migration help for existing apps: [from v1](https://chartkit.io/docs/react-native/migration/from-v1/) and [prop mapping](https://chartkit.io/docs/react-native/migration/prop-mapping/). ## Pro Charts Chart Kit Pro adds licensed chart workflows for product dashboards: - [Candlebar](https://chartkit.io/docs/react-native/charts/candlebar/), [radar](https://chartkit.io/docs/react-native/charts/radar/), [realtime bar](https://chartkit.io/docs/react-native/charts/realtime/), and [combo charts](https://chartkit.io/docs/react-native/charts/combo/). - [PNG and SVG export APIs](https://chartkit.io/docs/react-native/charts/export/) for reports, sharing, and background rendering. - [Install Pro](https://chartkit.io/docs/react-native/charts/pro-installation/) or compare [pricing](https://chartkit.io/docs/react-native/charts/pricing/). ## Links - [Full documentation](https://chartkit.io/docs/react-native/) - [Examples and demo app](https://github.com/chart-kit/react-native-chart-kit-example) - [Troubleshooting](https://chartkit.io/docs/react-native/troubleshooting/) - [Contributing](https://chartkit.io/docs/react-native/getting-started/contributing/) - [llms.txt](https://chartkit.io/llms.txt) ### Documentation CLI and agent access Read the public documentation from a terminal: ```sh 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](https://chartkit.io/developers), [agent instructions](https://chartkit.io/llms.txt), and [OpenAPI specification](https://chartkit.io/openapi.json).