Skip to content

Commit e6eca35

Browse files
committed
Add GitHub README
1 parent 13ceb41 commit e6eca35

1 file changed

Lines changed: 108 additions & 0 deletions

File tree

README.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<div align="center">
2+
<a href="https://chartkit.io/">
3+
<img src="https://chartkit.io/images/logo.svg" alt="React Native Chart Kit" width="72" />
4+
</a>
5+
6+
<h1>React Native Chart Kit</h1>
7+
8+
<p>
9+
Beautiful charts for React Native. SVG by default, interaction-ready, and
10+
built for modern app screens.
11+
</p>
12+
13+
<p>
14+
<a href="https://www.npmjs.com/package/react-native-chart-kit"><img alt="npm" src="https://img.shields.io/npm/v/react-native-chart-kit?style=flat-square" /></a>
15+
<a href="https://www.npmjs.com/package/react-native-chart-kit"><img alt="downloads" src="https://img.shields.io/npm/dm/react-native-chart-kit?style=flat-square" /></a>
16+
<a href="./LICENSE"><img alt="license" src="https://img.shields.io/npm/l/react-native-chart-kit?style=flat-square" /></a>
17+
</p>
18+
19+
<p>
20+
<a href="https://chartkit.io/">Website</a>
21+
·
22+
<a href="https://chartkit.io/docs/react-native/">Docs</a>
23+
·
24+
<a href="https://chartkit.io/docs/react-native/getting-started/installation/">Quickstart</a>
25+
·
26+
<a href="https://chartkit.io/docs/react-native/charts/pricing/">Pro</a>
27+
</p>
28+
</div>
29+
30+
## Install
31+
32+
```sh
33+
npm install react-native-chart-kit react-native-svg
34+
```
35+
36+
Expo:
37+
38+
```sh
39+
npm install react-native-chart-kit
40+
npx expo install react-native-svg
41+
```
42+
43+
## First Chart
44+
45+
```tsx
46+
import { LineChart } from "react-native-chart-kit/v2";
47+
48+
const data = [
49+
{ month: "Jan", revenue: 52 },
50+
{ month: "Feb", revenue: 86 },
51+
{ month: "Mar", revenue: 58 },
52+
{ month: "Apr", revenue: 134 }
53+
];
54+
55+
export function RevenueChart() {
56+
return (
57+
<LineChart
58+
data={data}
59+
xKey="month"
60+
yKey="revenue"
61+
width={410}
62+
height={240}
63+
/>
64+
);
65+
}
66+
```
67+
68+
The root import stays available for legacy screens. New screens should use
69+
`react-native-chart-kit/v2`.
70+
71+
## What You Get
72+
73+
- Modern public charts:
74+
[line](https://chartkit.io/docs/react-native/charts/line/),
75+
[area](https://chartkit.io/docs/react-native/charts/area/),
76+
[bar](https://chartkit.io/docs/react-native/charts/bar/),
77+
[pie](https://chartkit.io/docs/react-native/charts/pie/),
78+
[donut](https://chartkit.io/docs/react-native/charts/donut/),
79+
[progress](https://chartkit.io/docs/react-native/charts/progress/), and
80+
[contribution heatmap](https://chartkit.io/docs/react-native/charts/contribution-heatmap/).
81+
- Mobile interactions:
82+
[tap selection, shared tooltips, and crosshairs](https://chartkit.io/docs/react-native/charts/line/#tooltips-and-selection).
83+
- Shared
84+
[themes](https://chartkit.io/docs/react-native/charts/themes/) and SVG
85+
renderer defaults.
86+
- Migration help for existing apps:
87+
[from v1](https://chartkit.io/docs/react-native/migration/from-v1/) and
88+
[prop mapping](https://chartkit.io/docs/react-native/migration/prop-mapping/).
89+
90+
## Pro Charts
91+
92+
Chart Kit Pro adds licensed chart workflows for product dashboards:
93+
94+
- [Candlebar](https://chartkit.io/docs/react-native/charts/candlebar/),
95+
[radar](https://chartkit.io/docs/react-native/charts/radar/),
96+
[realtime bar](https://chartkit.io/docs/react-native/charts/realtime/), and
97+
[combo charts](https://chartkit.io/docs/react-native/charts/combo/).
98+
- [PNG and SVG export APIs](https://chartkit.io/docs/react-native/charts/export/)
99+
for reports, sharing, and background rendering.
100+
- [Install Pro](https://chartkit.io/docs/react-native/charts/pro-installation/) or
101+
compare [pricing](https://chartkit.io/docs/react-native/charts/pricing/).
102+
103+
## Links
104+
105+
- [Full documentation](https://chartkit.io/docs/react-native/)
106+
- [Troubleshooting](https://chartkit.io/docs/react-native/troubleshooting/)
107+
- [Contributing](https://chartkit.io/docs/react-native/getting-started/contributing/)
108+
- [llms.txt](https://chartkit.io/llms.txt)

0 commit comments

Comments
 (0)