react-native-gifted-charts is an MIT-licensed TypeScript library for React Native that renders bar, line, area, pie, donut, stacked bar, population pyramid, radar, bubble, scatter and candlestick charts, and it is built for React Native and Expo developers who need animated, customisable data visualisation inside the React Native component model.

What it is

react-native-gifted-charts is a charting library published on npm under the name react-native-gifted-charts, written in TypeScript and licensed under MIT. It lives in the React Native and Expo ecosystem, and its own README frames it against the question "Yet another chart library? Why?" with the stated answer "To bring Life to your data". Charts are rendered as React Native components imported from the package, with data passed as arrays of value objects, and behaviour such as axis orientation, fill type and chart variant controlled through props rather than through separate components or configuration files.

The concrete problem it solves is that rendering charts natively in React Native normally means composing drawing primitives yourself. This library replaces that work by building its chart rendering on react-native-svg and offering twelve chart types behind a single import, so the same data array and the same prop-driven API produce a bar chart, a line chart, a pie chart or a candlestick chart. A web counterpart, react-gifted-charts, renders the identical code in ReactJS, and the mathematical and logical utilities that both depend on are factored out into the separate gifted-charts-core package.

Key capabilities

• Chart components imported by name from the package: BarChart, LineChart, PieChart, PopulationPyramid, RadarChart, BubbleChart and CandleStickChart.
• Chart variants selected by prop rather than by component: horizontal for a horizontal bar chart, areaChart for an area chart, donut for a donut chart and scatterChart for a scatter chart.
• Animations on load and on value change added by setting a single prop, implemented with the React Native Animated API and no external animation library.
• 2D and 3D rendering, gradient effects, clickable and scrollable charts, and live data updates.
• Support for combined bar and line charts in one view.
• Pixel-perfect verification performed with react-native-screenshot-test, with the results published as a public screenshot test page.
• Documented props tables per chart family in docs/BarChart/BarChartProps.md, docs/LineChart/LineChartProps.md, docs/PieChart/PieChartProps.md, docs/PopulationPyramid/PopulationPyramid.md, docs/RadarChart/RadarChartProps.md, docs/BubbleChart/BubbleChartProps.md and docs/CandleStickChart/CandleStickChartProps.md.

Who uses it and how

• React Native CLI projects, installed alongside react-native-linear-gradient and react-native-svg as required peer dependencies.
• Expo projects, installed with npx expo install alongside expo-linear-gradient and react-native-svg.
• Teams that need the same chart code on mobile and web, using react-gifted-charts for the ReactJS side without rewriting the chart layer.
• Developers evaluating the library before adopting it, through the demo app published on the Play Store, the demo repository and snack list, and the documentation gallery.
• Contributors, who can work on the project by responding to open issues, since some reported issues are usage questions that can be answered without pushing code.

Getting started

Install with npm install react-native-gifted-charts react-native-linear-gradient react-native-svg for React Native CLI, or npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg for Expo. Both react-native-svg and a linear gradient package are required for the library to work.

How it compares

No list of paid products that this library replaces is provided in the available facts, and no comparable charting tools are named either, so it stands alone in this registry. There is no paid tier or hosted offering described: distribution is through npm under the MIT licence, and functionality is documented through the public documentation site, the props tables and the dev docs.

When to use it — and when not to

Nothing needs to be operated server-side for this library, but adopting it means adding react-native-svg plus either react-native-linear-gradient or expo-linear-gradient to the project, since it does not work without them. Developers who need a chart type outside the twelve listed, or who are not working in React Native or ReactJS, should look elsewhere. The repository shows 100 open issues and 1,369 stars, so issue volume relative to community size is worth weighing before depending on it for a critical surface.

npm install react-native-gifted-charts react-native-linear-gradient react-native-svg

npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg

import { BarChart, LineChart, PieChart, PopulationPyramid, RadarChart, BubbleChart, CandleStickChart } from "react-native-gifted-charts";

// ...
const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]

<BarChart data = {data} />
<LineChart data = {data} />
<PieChart data = {data} />
<PopulationPyramid data = {[{left:10,right:12}, {left:9,right:8}]} />
<RadarChart data = {[50, 80, 90, 70]} />
<BubbleChart data = {[
  {x: 20, y: 4, r: 10},
  {x: 40, y: 6, r: 20},
]} />
<CandleStickChart data = {[
  {open: 82, close: 76, high: 90, low: 60},
  {open: 50, close: 57, high: 71, low: 44},
]} />

// For Horizontal Bar chart, just add the prop horizontal to the <BarChart/> component

<BarChart data = {data} horizontal />

// For Area chart, just add the prop areaChart to the <LineChart/> component

<LineChart data = {data} areaChart />

// For Donut chart, just add the prop donut to the <PieChart/> component

<PieChart data = {data} donut />

// For Scatter chart, just add the prop scatterChart to the <BubbleChart/> component

<BubbleChart
  data = {[
    {x: 20, y: 4, r: 10},
    {x: 40, y: 6, r: 20},
  ]}
  scatterChart
/>