React Native Chart Kit

The react-native-chart-kit/v2 package is designed for modern Chart Kit usage in plain React Native CLI applications (non-Expo). When setting up a project using this version, ensure you have the following peer dependencies installed:

• react
• react-native
• react-native-svg

Commonly used components include LineChart, BarChart, and ProgressRing.

React Native Chart Kit provides several built-in chart types for mobile dashboards and reports:

• Line
• Area
• Bar
• Pie
• Donut
• Progress
• Contribution Heatmap

Note: Advanced charts like Candlebar, Radar, Realtime Bar, and Combo charts are part of Chart Kit Pro and require a license.

Candlebar charts are designed for visualizing price movement and volume. Common use cases include:

• Stocks
• Crypto
• Commodities
• FX (Foreign Exchange)
• Embedded broker flows
• Portfolio analytics

Advanced visualization options are available through Pro Charts, which require a separate installation process:

• Candlebar Chart
• Radar Chart
• Realtime Bar Chart
• Combo Chart

The RadarChart component (available in Chart Kit Pro) compares multiple profiles across the same set of metrics. It is suitable for visualizing product quality, health scores, benchmarks, rubric scoring, and capability comparisons.

To use it, you must install the Pro package following the Installation guide.

Legacy charts are available through the standard root import from react-native-chart-kit. Note that these legacy components do not consume ChartKitProvider presets. To style them, you must pass props directly such as chartConfig, barColors, legendFontColor, and backgroundColor.

import {
  BarChart,
  ContributionGraph,
  LineChart,
  PieChart,
  ProgressChart,
  StackedBarChart
} from "react-native-chart-kit";

You can enable slice selection using the interaction prop. For uncontrolled selection, set interaction={{ mode: "tap" }}. For controlled selection, pass selectedIndex and use the onSelect callback within the interaction object to update your state.

const revenueMix = [
  { plan: "Enterprise", revenue: 680 },
  { plan: "Business", revenue: 420 },
  { plan: "Teams", revenue: 260 },
  { plan: "Starter", revenue: 140 }
];

const [selectedIndex, setSelectedIndex] = useState(0);

<DonutChart
  data={revenueMix}
  valueKey="revenue"
  labelKey="plan"
  selectedIndex={selectedIndex}
  interaction={{
    mode: "tap",
    onSelect: (event) => setSelectedIndex(event.index)
  }}
  centerLabel={revenueMix[selectedIndex]?.plan}
  activeSlice={{ inactiveOpacity: 0.36, strokeWidth: 4 }}
  width={410}
  height={260}
/>;

Choose a chart based on your data visualization goal:

Standard Charts:

• Trend over time: LineChart
• Filled trend: AreaChart
• Comparison by category: BarChart
• Parts of whole: DonutChart (preferred) or PieChart
• Completion/rings: ProgressChart or ProgressRing
• Calendar activity: ContributionGraph or CalendarHeatmap

Pro Charts (Commercial):

• Revenue plus margin, bars plus line, dual axes: CombinedChart
• Stocks/OHLC/timeframe inspection: CandlestickChart or CandlebarChart
• Live updating bars: RealtimeBarChart
• Multi-axis category comparison: RadarChart
• PNG/SVG/share workflow: Pro export helpers

To use the v2 features, install both react-native-chart-kit and react-native-svg. When importing components, ensure you use the /v2 entry point to access the updated API.

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

import {
  BarChart,
  ChartKitProvider,
  DonutChart,
  LineChart
} from "react-native-chart-kit/v2";

The Realtime.BarChart component is designed for live analytics and monitoring dashboards. It renders a rolling bar window where visual slots remain stable while new data points slide into view. This ensures that selection and tooltip states follow the specific data point (via liveKey) rather than a moving array index.

Note: This component is part of Chart Kit Pro. You must install it via the Pro Installation guide.

import { Realtime } from "@chart-kit/pro";

<Realtime.BarChart
  data={rows}
  xKey="pointIndex"
  yKey="users"
  liveKey="pointIndex"
  windowSize={30}
  animation={{ duration: 2000, mode: "slide" }}
  // ... other props
/>