Source: https://chartkit.io/about
# About Chart Kit
React Native charts from Berman Digital Ltd, an Ontario, Canada company.
Last updated: September 6, 2026
## Charts for mobile apps
Chart Kit helps developers add charts to React Native apps. Use it for dashboards, reports, category comparisons, progress, and activity data. The public library includes line, area, bar, pie, donut, progress, and contribution heatmap charts. Charts render inside your application, where your application controls the data.
## Public library and Pro
The [public source code](https://github.com/chart-kit/react-native-chart-kit) and the react-native-chart-kit npm package use the MIT license. Chart Kit Pro adds commercially licensed chart workflows, including candlebar, radar, realtime bar, combo charts, and export features. You can install the Pro package from npm. Production use requires the applicable commercial license.
Berman Digital Ltd operates Chart Kit. Read the [developer guide](https://chartkit.io/developers) for installation and documentation access. Use the [contact page](https://chartkit.io/contact) for support and sales. The [privacy policy](https://chartkit.io/privacy) explains website data handling, and the [terms](https://chartkit.io/terms) explain purchases and license scope.
---
Source: https://chartkit.io/contact
# Contact Chart Kit
Contact Berman Digital Ltd for Chart Kit support, sales, and license questions.
Last updated: September 6, 2026
## Technical support
Email [support@chartkit.io](mailto:support@chartkit.io) for Chart Kit support. For a public library bug, use the [GitHub issue tracker](https://github.com/chart-kit/react-native-chart-kit/issues). Include the package version, React Native version, platform, chart type, and a small data sample. Describe the expected result and the actual result. Remove passwords, license details, and private customer data from public reports.
The [troubleshooting guide](https://chartkit.io/docs/react-native/troubleshooting) covers common installation, rendering, and gesture problems. The [developer guide](https://chartkit.io/developers) links to examples, Markdown documentation, and the public documentation API.
## Sales and licensing
Email [sales@chartkit.io](mailto:sales@chartkit.io) for Pro plans, license scope, and Enterprise purchasing questions. Include your team size and the number of production apps so we can identify the relevant plan. Berman Digital Ltd is based in Ontario, Canada. See the [About page](https://chartkit.io/about), [terms](https://chartkit.io/terms), and [privacy policy](https://chartkit.io/privacy) for company and product information.
---
Source: https://chartkit.io/developers
# Chart Kit Developer Guide
Install React Native Chart Kit, test a chart, and read documentation through Markdown, the API, or the CLI.
Last updated: September 6, 2026
## When to use Chart Kit
Use Chart Kit to add line, area, bar, pie, donut, progress, or contribution heatmap charts to a React Native app. It fits mobile dashboards, reports, trends, category comparisons, and activity screens. Use the modern API for new screens. Keep the root import when maintaining a legacy chart. Check the migration guide before changing an existing screen.
Chart Kit renders charts locally in your app. The website provides documentation and live examples. The HTTP API below serves documentation. It does not accept chart data or render chart images.
## Quickstart
```
npm install react-native-chart-kit react-native-svg
```
Import modern components from `react-native-chart-kit/v2`. Follow the [installation guide](https://chartkit.io/docs/react-native/getting-started/installation) for the current React Native requirements and a complete first chart. The [line chart playground](https://chartkit.io/docs/react-native/charts/line) provides an interactive example where you can test chart properties in the browser.
The public package uses the MIT license. Pro workflows use the separate `@chart-kit/pro` package. Read [Pro installation](https://chartkit.io/docs/react-native/charts/pro-installation) and [pricing](https://chartkit.io/docs/react-native/charts/pricing) before you select a commercial feature.
## Authentication and API keys
Public documentation, Markdown files, and the documentation API need no authentication or API key. Installing the public library needs no Chart Kit account. Pro license terms apply to production use of Pro packages. A Pro license is separate from access to the public documentation API.
## Documentation API
Use [GET /api/v1/docs](https://chartkit.io/api/v1/docs) to list the available paths. Use [GET /api/v1/docs/page?path=/docs/react-native/charts/line](https://chartkit.io/api/v1/docs/page?path=/docs/react-native/charts/line) to read one page as Markdown inside JSON. The [OpenAPI 3.1 specification](https://chartkit.io/openapi.json) defines unique operation IDs, parameters, and response schemas for function calling.
```
curl -H 'Accept: application/json' 'https://chartkit.io/api/v1/docs/page?path=/docs/react-native/charts/line'
```
The API supports GET and HEAD. Errors use JSON with `error.code`, `error.message`, and `error.hint`. A missing page returns 404. An invalid path parameter returns 400. An unsupported method returns 405. The API has no account quota. Cloudflare traffic protections can apply. Cache documentation in your client and avoid repeated bulk requests.
## Markdown and agent instructions
Start with [llms.txt](https://chartkit.io/llms.txt) to select a task and a page. Read [agent-instructions.md](https://chartkit.io/agent-instructions.md) for package and licensing rules. Public pages support `Accept: text/markdown` and a `.md` URL. The homepage Markdown URL is [/index.md](https://chartkit.io/index.md). Use [llms-full.txt](https://chartkit.io/llms-full.txt) only when you need the full public content.
```
curl -H 'Accept: text/markdown' https://chartkit.io/docs/react-native/charts/line
```
## Official CLI
The `chart-kit` CLI ships in `react-native-chart-kit` from version 7.0.4. It reads the public documentation API and writes Markdown or JSON to standard output. It makes no changes to your app and needs no API key.
```
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. Run `chart-kit --help` for examples. Failures write a JSON error to standard error and return a nonzero exit code.
## More resources
Read the [documentation index](https://chartkit.io/docs/react-native), [migration guide](https://chartkit.io/docs/react-native/migration/from-v1), [troubleshooting guide](https://chartkit.io/docs/react-native/troubleshooting), and [contributor guide](https://chartkit.io/docs/react-native/getting-started/contributing). Browse the [public source](https://github.com/chart-kit/react-native-chart-kit) or [contact Chart Kit](https://chartkit.io/contact) for support.
---
Source: https://chartkit.io/docs/react-native/charts/accessibility
# Accessibility
Every chart accepts `accessibilityLabel`. If no label is provided, the chart generates a concise screen-reader summary from its data.
For richer app-level fallbacks, export table models with the helper matching the chart type:
```tsx
import {
getBarChartDataTable,
getLineChartDataTable,
getPieChartDataTable,
getProgressChartDataTable,
getContributionGraphDataTable
} from "react-native-chart-kit/v2";
```
These helpers return normalized rows and formatted values that can back a hidden native table, a visible details panel, export flow, or enterprise accessibility report.
Summary helpers are also exported:
- `getLineChartAccessibilitySummary()`
- `getBarChartAccessibilitySummary()`
- `getPieChartAccessibilitySummary()`
- `getProgressChartAccessibilitySummary()`
- `getContributionGraphAccessibilitySummary()`
Use chart-level `formatXLabel`, `formatYLabel`, `formatValue`, or `formatPercentage` with these helpers so the accessibility output matches the visible chart labels.
## Table Fallback Recipe
Use table fallbacks when a chart appears in a production screen where users may need exact values outside the visual chart. The helper output is intentionally data-only, so apps can render it as a visible details panel, a screen-reader-only region, an export source, or an enterprise accessibility report.
```tsx
import { useMemo, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { LineChart, getLineChartDataTable } from "react-native-chart-kit/v2";
const RevenueChartDetails = ({ data, width }) => {
const [expanded, setExpanded] = useState(false);
const table = useMemo(
() =>
getLineChartDataTable({
data,
xKey: "month",
series: [{ yKey: "revenue", label: "Revenue" }],
formatYLabel: (value) => `$${Math.round(value / 1000)}k`
}),
[data]
);
return (
setExpanded((current) => !current)}>
{expanded ? "Hide data table" : "Show data table"}
{expanded ? (
{table.rows.map((row) => (
{row.xLabel}: {row.formattedValues.revenue}
))}
) : null}
);
};
```
The public package focuses on baseline chart summaries and data-table helpers.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/accessibility.md)
[Previous
Themes](https://chartkit.io/docs/react-native/charts/themes/)[Next
Troubleshooting](https://chartkit.io/docs/react-native/troubleshooting/)
---
Source: https://chartkit.io/docs/react-native/charts/area
# Area Chart
`AreaChart` shows a trend with the area beneath the line filled in. Use it when the size of a value matters as much as its movement, such as balances, capacity, pipeline, or volume over time.
## Basic Area
```tsx
import { AreaChart } from "react-native-chart-kit/v2";
const data = [
{ date: "Jan 01", price: 72 },
{ date: "Jan 03", price: 138 },
{ date: "Jan 08", price: 91 },
{ date: "Jan 15", price: 166 },
{ date: "Jan 24", price: 118 },
{ date: "Feb 01", price: 202 }
];
export function PipelineChart() {
return (
);
}
```
## Area Fill
Use `areaFill` to tune fill opacity. You can also pass `area` to `LineChart` when a product uses line and area variants from the same component wrapper.
```tsx
const data = [
{ date: "Jan", price: 42 },
{ date: "Feb", price: 96 },
{ date: "Mar", price: 58 },
{ date: "Apr", price: 132 },
{ date: "May", price: 84 },
{ date: "Jun", price: 158 }
];
;
```
Use `areaFill` on the chart for a shared fill style, or per series when each series needs its own colors or opacity.
## Threshold Area
Threshold coloring clips the rendered path and area fill above or below a y value. Raw points are unchanged.
```tsx
const data = [
{ month: "Jan", attainment: 62 },
{ month: "Feb", attainment: 138 },
{ month: "Mar", attainment: 74 },
{ month: "Apr", attainment: 151 },
{ month: "May", attainment: 89 },
{ month: "Jun", attainment: 122 },
{ month: "Jul", attainment: 55 },
{ month: "Aug", attainment: 164 },
{ month: "Sep", attainment: 96 },
{ month: "Oct", attainment: 145 },
{ month: "Nov", attainment: 78 },
{ month: "Dec", attainment: 172 }
];
;
```
## Dense Area Charts
For long time series, use the same viewport, scrolling, and decimation options as `LineChart`.
```tsx
```
## Props
### AreaChart
`AreaChart` accepts the same props as `LineChart` and renders with area fill enabled by default.
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data for the chart. |
| `xKey` | `keyof TData` | Row key used for the x-axis value. |
| `yKey` | `keyof TData` | Single row key used for y values when `series` or `yKeys` is not provided. |
| `yKeys` | `Array` | Multiple row keys rendered as separate series with default styling. |
| `series` | `LineChartSeries[]` | Full per-series configuration, including labels, colors, stroke, dots, thresholds, and area fill. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `ChartKitThemeMode` or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `scrollable` | `boolean` | Enables a horizontal scroll viewport for long data sets. |
| `visiblePoints` | `number` | Number of points visible in the viewport when `scrollable` is enabled. |
| `initialIndex` | `ChartViewportInitialIndex` | Initial scroll/window position, such as `"start"` or `"end"`. |
| `viewport` | `LineChartViewportConfig` | Controlled visible data window for scroll, pan, zoom, or range selector flows. |
| `onViewportChange` | `(event) => void` | Called when viewport state changes from the main plot or range selector. |
| `viewportInteraction` | `boolean` or `LineChartViewportInteractionConfig` | Enables and configures one-finger pan and pinch zoom for the viewport. |
| `rangeSelector` | `boolean` or `LineChartRangeSelectorConfig` | Adds a mini-chart range selector below the main plot. |
| `decimation` | `false`, `"auto"`, `number`, or `LineChartDecimationConfig` | Controls rendered path simplification for dense series. |
| `curve` | `LineCurve` | Curve interpolation used for line and area paths. |
| `connectNulls` | `boolean` | Connects defined points across `null` or missing y values. |
| `area` | `boolean` | Inherited from `LineChartProps`; `AreaChart` renders with area fill enabled. |
| `areaFill` | `LineChartAreaFillConfig` | Shared area fill opacity, gradient, or color configuration. |
| `showDots` | `boolean` | Shows or hides all point markers. |
| `dots` | `boolean` or `LineChartDotConfig` | Configures default point marker visibility, size, shape, and color. |
| `renderDot` | `(props) => ReactNode` | Custom renderer for ordinary point markers. |
| `selectedIndex` | `number` | Controlled selected data index. |
| `defaultSelectedIndex` | `number` | Initial uncontrolled selected data index. |
| `activeDot` | `boolean` or `LineChartDotConfig` | Configures the marker shown for the selected point. |
| `renderActiveDot` | `(props) => ReactNode` | Custom renderer for the selected point marker. |
| `interaction` | `LineChartInteraction` | Selection/scrub interaction mode and callbacks. |
| `crosshair` | `boolean` or `LineChartCrosshairConfig` | Shows and configures the selected-point crosshair. |
| `renderCrosshair` | `(props) => ReactNode` | Custom renderer for the crosshair. |
| `tooltip` | `boolean` or `LineChartTooltipConfig` | Shows and configures selected-point tooltip content and placement. |
| `renderTooltip` | `(props) => ReactNode` | Custom renderer for selected-point tooltip content. |
| `referenceLines` | `LineChartReferenceLineConfig[]` | Horizontal reference lines drawn across the plot. Reference labels support `labelContainer`. |
| `referenceBands` | `LineChartReferenceBandConfig[]` | Horizontal reference bands drawn behind the series. Reference labels support `labelContainer`. |
| `showHorizontalGridLines` | `boolean` | Shows or hides horizontal grid lines. |
| `showVerticalGridLines` | `boolean` | Shows or hides vertical grid lines. |
| `legend` | `boolean` or `LineChartLegendConfig` | Shows and configures the chart legend. |
| `labelStrategy` | `LineChartLabelStrategy` | Controls x-axis label density and layout. |
| `labelRotation` | `number` | Rotation angle for x-axis labels when using rotated labels. |
| `labelMinGap` | `number` | Minimum gap used by automatic x-axis label skipping. |
| `edgeLabelPolicy` | `LineChartEdgeLabelPolicy` | Controls how first and last x-axis labels are shifted, hidden, or shown. |
| `yDomain` | `NumericDomainInput` | Overrides or constrains the computed y-axis domain. |
| `yAxisLabelWidth` | `LineChartYAxisLabelWidth` | Fixed, automatic, or stable width for y-axis labels. |
| `axisLabelAnimation` | `boolean` or `LineChartAxisLabelAnimationConfig` | Animates y-axis label changes during viewport updates. |
| `formatXLabel` | `(value, index) => string` | Formats x-axis labels and selected x labels. |
| `formatYLabel` | `(value) => string` | Formats y-axis labels, selected values, and tooltip values. |
| `renderer` | `LineChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `id` | `string` | Stable chart id used for internal ids and coordinated selection scope. |
| `debugLayout` | `boolean` | Renders layout debug rectangles in development. |
| `onLayoutDebug` | `(model) => void` | Receives computed layout debug geometry. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/area.md)
[Previous
Line Chart](https://chartkit.io/docs/react-native/charts/line/)[Next
Bar Charts](https://chartkit.io/docs/react-native/charts/bar/)
---
Source: https://chartkit.io/docs/react-native/charts/bar
# Bar Charts
`BarChart` compares values across categories or time buckets. Use it for rankings, monthly totals, grouped series, stacked composition, negative values, and horizontal layouts when category labels need more room.
## Basic Bars
```tsx
import { BarChart } from "react-native-chart-kit/v2";
const data = [
{ month: "Jan", signups: 180 },
{ month: "Feb", signups: 520 },
{ month: "Mar", signups: 260 },
{ month: "Apr", signups: 740 },
{ month: "May", signups: 390 },
{ month: "Jun", signups: 860 }
];
export function SignupsChart() {
return (
);
}
```
## Grouped Bars
Use `series` for multiple bars per x value. The chart shows a bottom legend by default when there is more than one series.
```tsx
const data = [
{ month: "Jan", organic: 28, paid: 62 },
{ month: "Feb", organic: 74, paid: 34 },
{ month: "Mar", organic: 39, paid: 88 },
{ month: "Apr", organic: 96, paid: 41 },
{ month: "May", organic: 54, paid: 103 },
{ month: "Jun", organic: 118, paid: 58 }
];
;
```
Useful grouped-bar props:
- `barWidthRatio`: controls how much of each x band is filled by bars.
- `barGapRatio`: controls spacing between bars inside a group.
- `barRadius`: controls corner radius.
- `legend={false}`: hides the default legend.
## Negative Values
Negative values render below the zero baseline. Keep `yDomain` on its default include-zero behavior unless you intentionally want a cropped baseline.
```tsx
const profit = [
{ month: "Jan", profit: 38 },
{ month: "Feb", profit: -28 },
{ month: "Mar", profit: 64 },
{ month: "Apr", profit: -42 },
{ month: "May", profit: 81 },
{ month: "Jun", profit: -18 }
];
(value < 0 ? `-$${Math.abs(value)}k` : `$${value}k`)}
width={410}
height={250}
/>;
```
## Horizontal Bars
Set `orientation="horizontal"` when category labels are easier to scan down the left axis.
```tsx
const supportVolume = [
{ channel: "Chat", tickets: 95 },
{ channel: "Email", tickets: 37 },
{ channel: "Phone", tickets: 68 },
{ channel: "Social", tickets: 24 },
{ channel: "Community", tickets: 113 }
];
;
```
Horizontal bars support grouped, stacked, 100% stacked, and negative values through the same `mode`, `series`, and `yDomain` props as vertical bars.
## Stacked Bars
Set `mode="stacked"` to stack series by row. Positive and negative stacks are tracked separately from the zero baseline.
```tsx
const data = [
{ month: "Jan", newCustomers: 180, expansion: 60 },
{ month: "Feb", newCustomers: 520, expansion: 210 },
{ month: "Mar", newCustomers: 260, expansion: 120 },
{ month: "Apr", newCustomers: 740, expansion: 330 },
{ month: "May", newCustomers: 390, expansion: 170 },
{ month: "Jun", newCustomers: 860, expansion: 410 }
];
;
```
## 100% Stacked Bars
Set `mode="stacked100"` for percentage composition. The original values are preserved in the bar model while rendered heights are normalized to row totals.
```tsx
const platformShare = [
{ month: "Jan", ios: 62, android: 25, web: 13 },
{ month: "Feb", ios: 38, android: 47, web: 15 },
{ month: "Mar", ios: 55, android: 21, web: 24 },
{ month: "Apr", ios: 29, android: 58, web: 13 },
{ month: "May", ios: 68, android: 19, web: 13 },
{ month: "Jun", ios: 44, android: 31, web: 25 }
];
`${value}%`}
width={410}
height={250}
/>;
```
## Tap Selection And Tooltips
Bar selection is opt-in. Use `interaction="tap"` for the simplest behavior, or pass an object when you need callbacks or outside-press dismissal.
```tsx
const data = [
{ month: "Jan", organic: 28, paid: 62 },
{ month: "Feb", organic: 74, paid: 34 },
{ month: "Mar", organic: 39, paid: 88 },
{ month: "Apr", organic: 96, paid: 41 },
{ month: "May", organic: 54, paid: 103 },
{ month: "Jun", organic: 118, paid: 58 }
];
{
setSelectedChannel(event.seriesLabel);
}
}}
tooltip={{
anchor: "pointer",
placement: "above",
width: 132
}}
defaultSelectedBar={{ dataIndex: 3, seriesKey: "paid" }}
width={410}
height={260}
/>;
```
The public select event includes `dataIndex`, `seriesKey`, `seriesLabel`, `value`, `formattedValue`, `x`, `xLabel`, `color`, `position`, and the original `raw` row.
Tooltip positioning uses `anchor: "bar"` and `placement: "auto"` by default. Use `anchor: "pointer"` with `placement: "above"` when the tooltip should follow the tap position and stay above the finger. Styling follows the chart theme tooltip tokens by default and can be overridden per chart with `backgroundColor`, `borderColor`, `textColor`, `labelColor`, `padding`, `borderRadius`, `fontFamily`, `fontSize`, `labelFontSize`, and shadow props.
## Scrollable Bars
Use `scrollable`, `visiblePoints`, and `initialIndex` for long categorical bar charts. For bars, `visiblePoints` maps to visible bar bands.
```tsx
const weeklySpend = [
{ week: "W1", spend: 18 },
{ week: "W2", spend: 52 },
{ week: "W3", spend: 26 },
{ week: "W4", spend: 74 },
{ week: "W5", spend: 31 },
{ week: "W6", spend: 88 },
{ week: "W7", spend: 43 },
{ week: "W8", spend: 96 },
{ week: "W9", spend: 39 },
{ week: "W10", spend: 108 },
{ week: "W11", spend: 57 },
{ week: "W12", spend: 121 },
{ week: "W13", spend: 44 },
{ week: "W14", spend: 132 },
{ week: "W15", spend: 63 },
{ week: "W16", spend: 118 },
{ week: "W17", spend: 71 },
{ week: "W18", spend: 146 }
];
`$${value}k`}
width={410}
height={250}
/>;
```
The y-axis labels stay pinned while the bars and x-axis labels scroll horizontally.
## Custom Bar Rendering
Use `renderBar` when bars need product-specific styling while keeping the built-in layout, selection, hit testing, labels, sticky axes, and tooltips.
```tsx
import { Rect } from "react-native-svg";
const weeklySpend = [
{ week: "W1", spend: 18 },
{ week: "W2", spend: 52 },
{ week: "W3", spend: 26 },
{ week: "W4", spend: 74 },
{ week: "W5", spend: 31 },
{ week: "W6", spend: 88 },
{ week: "W7", spend: 43 },
{ week: "W8", spend: 96 }
];
(
)}
/>;
```
## Labels and Themes
Useful label and theme props:
- `labelStrategy`: `auto`, `show`, or `hide`.
- `formatXLabel`: formats x-axis labels.
- `formatYLabel`: formats y-axis and value labels.
- `showHorizontalGridLines`: enabled by default.
- `showXAxisLabels` / `showYAxisLabels`: hide axis label groups without removing grid geometry.
- `yTickCount`: controls y-axis tick density.
- `preset`: uses the same cartesian presets as LineChart.
- `theme`: overrides chart colors, plot background, text, typography, and series colors.
## Props
### BarChart
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data for the chart. |
| `xKey` | `keyof TData` | Row key used for category, date, or numeric x values. |
| `yKey` | `keyof TData` | Single row key used for bar values when `series` or `yKeys` is not provided. |
| `yKeys` | `Array` | Multiple row keys rendered as grouped or stacked series with default styling. |
| `series` | `BarChartSeries[]` | Full per-series configuration, including y key, label, key, and color. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `ChartKitThemeMode` or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `scrollable` | `boolean` | Enables a horizontal scroll viewport for long bar sets. |
| `visiblePoints` | `number` | Number of x values visible in the viewport when `scrollable` is enabled. |
| `initialIndex` | `ChartViewportInitialIndex` | Initial scroll position, such as `"start"` or `"end"`. |
| `orientation` | `BarChartOrientation` | Renders vertical or horizontal bars. |
| `mode` | `BarChartMode` | Chooses grouped, stacked, or 100% stacked layout. |
| `yDomain` | `NumericDomainInput` | Overrides or constrains the computed value-axis domain. |
| `barRadius` | `number` | Corner radius applied to rendered bars. |
| `barWidthRatio` | `number` | Portion of each category slot occupied by bars. |
| `barGapRatio` | `number` | Relative gap between grouped bars. |
| `showValuesOnTopOfBars` | `boolean` | Shows formatted value labels at bar ends. |
| `showHorizontalGridLines` | `boolean` | Shows or hides horizontal grid lines. |
| `showXAxisLabels` | `boolean` | Shows or hides x-axis labels. |
| `showYAxisLabels` | `boolean` | Shows or hides y-axis labels. |
| `yTickCount` | `number` | Number of ticks used for value-axis labels and grid lines. |
| `legend` | `boolean` | Shows or hides the bottom legend. |
| `interaction` | `BarChartInteraction` | Tap selection mode and callbacks. |
| `selectedBar` | `BarChartSelectedBar` | Controlled selected bar by data index and series key. |
| `defaultSelectedBar` | `BarChartSelectedBar` | Initial uncontrolled selected bar. |
| `selectionAnimation` | `boolean` or `BarChartSelectionAnimationConfig` | Enables and configures selected-bar animation. |
| `tooltip` | `boolean` or `BarChartTooltipConfig` | Shows and configures selected-bar tooltip content and placement. |
| `renderBar` | `(props) => ReactNode` | Custom renderer for each bar while preserving layout and hit testing. |
| `renderer` | `BarChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `labelStrategy` | `BarChartLabelStrategy` | Controls x-axis label visibility. |
| `formatXLabel` | `(value, index) => string` | Formats x-axis labels and selected x labels. |
| `formatYLabel` | `(value) => string` | Formats y-axis labels, value labels, and tooltip values. |
| `id` | `string` | Stable chart id used for coordinated selection scope. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/bar.md)
[Previous
Area Chart](https://chartkit.io/docs/react-native/charts/area/)[Next
Pie Chart](https://chartkit.io/docs/react-native/charts/pie/)
---
Source: https://chartkit.io/docs/react-native/charts/candlebar
# Candlebar Chart
`CandlebarChart` shows open, high, low, close, and volume data for each interval. Use it for market, trading, and asset-monitoring screens where users need to inspect price movement candle by candle.
This chart is available in Chart Kit Pro. Install it once from [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
## Crosshair Inspector
Use crosshair inspection when the selected candle drives UI outside the chart. Keep the selected index controlled, update it from `interaction.onSelect`, and render the OHLCV readout wherever it fits your screen. The crosshair stays under the user’s finger while a separate candle marker shows which candle is selected. Use a controlled viewport with `onViewportChange` when the mini range selector needs to move or resize the visible interval.
```tsx
import { useState } from "react";
import { Text, View } from "react-native";
import {
resolveCartesianChartThemeConfig,
useChartKitTheme
} from "react-native-chart-kit/v2";
import type { CandlestickChartViewportConfig } from "@chart-kit/pro";
import { CandlebarChart } from "@chart-kit/pro";
const candles = Array.from({ length: 40 }, (_, index) => {
const open = 184 + Math.sin(index * 0.55) * 6 + index * 1.4;
const move = Math.cos(index * 0.75) * 7;
const close = open + move;
const wick = 3 + Math.abs(move) * 0.35;
return {
time: `T${index + 1}`,
open,
high: Math.max(open, close) + wick,
low: Math.min(open, close) - wick,
close,
volume: Math.round(48 + Math.abs(move) * 9 + index * 3)
};
});
const formatValue = (value: number) => value.toFixed(1);
const formatSignedValue = (value: number) =>
`${value >= 0 ? "+" : ""}${formatValue(value)}`;
export function CrosshairInspector() {
const chartTheme = useChartKitTheme();
const [selectedIndex, setSelectedIndex] = useState(24);
const [viewport, setViewport] = useState({
startIndex: 6,
endIndex: 35
});
const selected = candles[selectedIndex] ?? candles[candles.length - 1]!;
const resolvedTheme = resolveCartesianChartThemeConfig({
mode: chartTheme.mode,
preset: chartTheme.preset,
presets: chartTheme.presets,
theme: chartTheme.theme
});
const isUp = selected.close >= selected.open;
const upColor =
resolvedTheme.series[1] ??
(chartTheme.mode === "dark" ? "#22c55e" : "#16a34a");
const downColor =
resolvedTheme.series[3] ??
(chartTheme.mode === "dark" ? "#f59e0b" : "#dc2626");
const directionColor = isUp ? upColor : downColor;
const change = selected.close - selected.open;
const metrics = [
["O", formatValue(selected.open)],
["H", formatValue(selected.high)],
["L", formatValue(selected.low)],
["C", formatValue(selected.close)],
["VOL", String(selected.volume)]
] as const;
return (
{selected.time}
{formatValue(selected.close)}
{formatSignedValue(change)}
{metrics.map(([label, value], index) => (
{label}
{value}
))}
setSelectedIndex(event.dataIndex)
}}
rangeSelector={{
visible: true,
height: 70
}}
viewport={viewport}
onViewportChange={(event) => setViewport(event.viewport)}
selectedIndex={selectedIndex}
selectionPriceLabel
showHorizontalGridLines
showYAxisLabels
tooltip={false}
width={410}
yTickCount={4}
/>
);
}
```
## OHLC and Volume
```tsx
import { CandlebarChart } from "@chart-kit/pro";
const candles = Array.from({ length: 20 }, (_, index) => {
const open = 184 + Math.sin(index * 0.55) * 6 + index * 2.4;
const move = Math.cos(index * 0.75) * 7;
const close = open + move;
const wick = 3 + Math.abs(move) * 0.35;
return {
date: `T${index + 1}`,
open,
high: Math.max(open, close) + wick,
low: Math.min(open, close) - wick,
close,
volume: Math.round(48 + Math.abs(move) * 9 + index * 3)
};
});
export function TradingSession() {
return (
);
}
```
## Realtime Updates
Use realtime updates when the latest interval is still open. Keep the candle array in state, replace the active candle as ticks arrive, and append a new candle when the interval closes.
```tsx
import { useEffect, useMemo, useState } from "react";
import { Text, View } from "react-native";
import {
resolveCartesianChartThemeConfig,
useChartKitTheme
} from "react-native-chart-kit/v2";
import { CandlebarChart } from "@chart-kit/pro";
type Candle = {
slot: number;
time: string;
open: number;
high: number;
low: number;
close: number;
volume: number;
};
const intervalMs = 1000;
const visiblePoints = 24;
const ticksPerCandle = 6;
const seedCandles: Candle[] = Array.from(
{ length: visiblePoints },
(_, index) => {
const open = 180 + Math.sin(index * 0.7) * 5 + index * 0.8;
const move = Math.cos(index * 0.55) * 4;
const close = open + move;
const wick = 2 + Math.abs(move) * 0.4;
return {
slot: index,
time: `T${index + 1}`,
open,
high: Math.max(open, close) + wick,
low: Math.min(open, close) - wick,
close,
volume: Math.round(50 + Math.abs(move) * 9)
};
}
);
const formatValue = (value: number) => value.toFixed(1);
const formatSignedValue = (value: number) =>
`${value >= 0 ? "+" : ""}${formatValue(value)}`;
const appendCandle = (candles: Candle[], sequence: number): Candle[] => {
const previous = candles[candles.length - 1]!;
const open = previous.close;
const move = Math.sin(sequence * 0.8) * 4 + Math.cos(sequence * 0.34) * 2;
const close = open + move;
const wick = 2 + Math.abs(move) * 0.35;
return [
...candles,
{
slot: sequence,
time: `T${sequence + 1}`,
open,
high: Math.max(open, close) + wick,
low: Math.min(open, close) - wick,
close,
volume: Math.round(55 + Math.abs(move) * 10)
}
];
};
const updateOpenCandle = (candle: Candle, liveStep: number): Candle => {
const move = Math.sin(liveStep * 0.9) * 1.4 + Math.cos(liveStep * 0.35);
const close = candle.close + move;
return {
...candle,
close,
high: Math.max(candle.high, close + Math.abs(move) * 0.5),
low: Math.min(candle.low, close - Math.abs(move) * 0.5),
volume: candle.volume + Math.round(2 + Math.abs(move) * 3)
};
};
const createLiveCandles = (liveStep: number): Candle[] => {
const closedCandleCount = Math.floor(liveStep / ticksPerCandle);
let candles = seedCandles.map((candle) => ({ ...candle }));
for (let index = 0; index < closedCandleCount; index += 1) {
candles = appendCandle(candles, visiblePoints + index);
}
const last = candles[candles.length - 1]!;
candles[candles.length - 1] = updateOpenCandle(last, liveStep);
return candles.slice(-visiblePoints);
};
export function RealtimeCandleUpdates() {
const chartTheme = useChartKitTheme();
const [liveStep, setLiveStep] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setLiveStep((current) => current + 1);
}, intervalMs);
return () => clearInterval(intervalId);
}, []);
const candles = useMemo(() => createLiveCandles(liveStep), [liveStep]);
const latest = candles[candles.length - 1]!;
const resolvedTheme = resolveCartesianChartThemeConfig({
mode: chartTheme.mode,
preset: chartTheme.preset,
presets: chartTheme.presets,
theme: chartTheme.theme
});
const isUp = latest.close >= latest.open;
const upColor =
resolvedTheme.series[1] ??
(chartTheme.mode === "dark" ? "#22c55e" : "#16a34a");
const downColor =
resolvedTheme.series[3] ??
(chartTheme.mode === "dark" ? "#f59e0b" : "#dc2626");
const directionColor = isUp ? upColor : downColor;
const change = latest.close - latest.open;
const metrics = [
["O", formatValue(latest.open)],
["H", formatValue(latest.high)],
["L", formatValue(latest.low)],
["C", formatValue(latest.close)],
["VOL", String(latest.volume)]
] as const;
return (
{latest.time}
{formatValue(latest.close)}
{formatSignedValue(change)}
{metrics.map(([label, value], index) => (
{label}
{value}
))}
Live
);
}
```
In production, replace `createLiveCandles()` with your websocket, stream, or polling adapter.
## Product Use Cases
Use Candlebar charts for stocks, crypto, commodities, FX, embedded broker flows, portfolio analytics, and any screen where users need to inspect price movement without leaving the mobile app.
## Props
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row OHLC source data. |
| `dateKey` | `keyof TData` | Row key used for x-axis labels and selected candle labels. |
| `openKey` | `keyof TData` | Row key used for opening values. |
| `highKey` | `keyof TData` | Row key used for high wick values. |
| `lowKey` | `keyof TData` | Row key used for low wick values. |
| `closeKey` | `keyof TData` | Row key used for closing values. |
| `volumeKey` | `keyof TData` | Optional row key used for volume bars. |
| `defaultSelectedIndex` | `number` | Initial selected candle index. |
| `selectedIndex` | `number` | Controlled selected candle index for external inspectors. |
| `interaction` | `object` | Enables tap or crosshair selection and gesture callbacks. |
| `viewport` | `object` | Controlled visible candle range. |
| `onViewportChange` | `(event) => void` | Called when the visible range changes. |
| `rangeSelector` | `boolean` or `object` | Shows and configures the mini range selector. |
| `viewportInteraction` | `boolean` or `object` | Enables pan/zoom viewport gestures. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/candlebar.md)
[Previous
Installation](https://chartkit.io/docs/react-native/charts/pro-installation/)[Next
Radar Chart](https://chartkit.io/docs/react-native/charts/radar/)
---
Source: https://chartkit.io/docs/react-native/charts/combo
# Combo Chart
`ComboChart` combines bars and lines in one chart. Use it for dashboards where a current value, target, forecast, margin, or rate should be inspected together on the same timeline.
This chart is available in Chart Kit Pro. Install it once from [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
## Revenue Operating View
Use a basic combo when the bar series explain the current month and the line series gives the surrounding target or forecast.
```tsx
import { ComboChart } from "@chart-kit/pro";
const money = (value: number) => `$${Math.round(value)}k`;
const data = [
{ month: "Jan", revenue: 420, forecast: 480, margin: 128 },
{ month: "Feb", revenue: 560, forecast: 530, margin: 168 },
{ month: "Mar", revenue: 490, forecast: 610, margin: 151 },
{ month: "Apr", revenue: 720, forecast: 690, margin: 214 },
{ month: "May", revenue: 640, forecast: 760, margin: 193 },
{ month: "Jun", revenue: 880, forecast: 840, margin: 276 },
{ month: "Jul", revenue: 790, forecast: 920, margin: 244 },
{ month: "Aug", revenue: 1040, forecast: 980, margin: 331 }
];
export function RevenueOperations() {
return (
);
}
```
## Shared Tooltip
Use a persistent selected index when the chart should open with a meaningful month already inspected. `interaction="tap"` keeps the shared tooltip aligned with the selected x value.
```tsx
import { ComboChart } from "@chart-kit/pro";
const money = (value: number) => `$${Math.round(value)}k`;
const bookings = [
{ month: "Jan", booked: 118, target: 132 },
{ month: "Feb", booked: 146, target: 140 },
{ month: "Mar", booked: 182, target: 168 },
{ month: "Apr", booked: 208, target: 196 },
{ month: "May", booked: 236, target: 224 },
{ month: "Jun", booked: 274, target: 252 }
];
export function PipelineInspection() {
return (
);
}
```
## Series Toggles
Keep series visibility in product state when the chart is part of broader dashboard controls. The chart keeps the remaining bars and lines aligned to the same x-axis.
```tsx
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
import { ComboChart } from "@chart-kit/pro";
import {
resolveCartesianChartThemeConfig,
useChartKitTheme
} from "react-native-chart-kit/v2";
const money = (value: number) => `$${Math.round(value)}k`;
const percent = (value: number) => `${Math.round(value)}%`;
const channelPlan = [
{ month: "Jan", direct: 44, enterprise: 128, margin: 17 },
{ month: "Feb", direct: 52, enterprise: 154, margin: 19 },
{ month: "Mar", direct: 58, enterprise: 178, margin: 21 },
{ month: "Apr", direct: 66, enterprise: 204, margin: 24 },
{ month: "May", direct: 72, enterprise: 224, margin: 27 },
{ month: "Jun", direct: 80, enterprise: 252, margin: 30 }
];
const toggleItems = [
{ key: "bar-direct", label: "Direct" },
{ key: "bar-enterprise", label: "Enterprise" },
{ key: "line-margin", label: "Margin" }
];
const colorWithAlpha = (color: string, alpha: string) =>
color.startsWith("#") && color.length === 7 ? `${color}${alpha}` : color;
export function ChannelPlan() {
const [visibleSeriesKeys, setVisibleSeriesKeys] = useState(
toggleItems.map((item) => item.key)
);
const chartKitTheme = useChartKitTheme();
const resolvedTheme = resolveCartesianChartThemeConfig({
mode: chartKitTheme.mode,
preset: chartKitTheme.preset,
presets: chartKitTheme.presets,
theme: chartKitTheme.theme
});
const isLight = chartKitTheme.mode === "light";
const toggleSeries = (key: string) => {
setVisibleSeriesKeys((currentKeys) => {
const nextKeys = currentKeys.includes(key)
? currentKeys.filter((item) => item !== key)
: [...currentKeys, key];
return nextKeys.length > 0 ? nextKeys : currentKeys;
});
};
const seriesToggles = toggleItems.map((item, index) => ({
...item,
color: resolvedTheme.series[index] ?? "#2563eb"
}));
return (
{seriesToggles.map((item) => {
const active = visibleSeriesKeys.includes(item.key);
return (
toggleSeries(item.key)}
style={{
alignItems: "center",
display: "flex",
backgroundColor: active
? colorWithAlpha(item.color, isLight ? "10" : "18")
: "transparent",
borderColor: active ? item.color : "transparent",
borderRadius: 999,
borderWidth: 1,
flexDirection: "row",
gap: 5,
height: 28,
justifyContent: "center",
minWidth: 88,
paddingHorizontal: 11
}}
>
{item.label}
);
})}
(value > 40 ? money(value) : percent(value))}
visibleSeriesKeys={visibleSeriesKeys}
width={410}
height={292}
/>
);
}
```
## Negative Domain
Use an explicit y-domain when the bar series can cross zero. The line still shares the same selected x value, so recovery screens can show whether a leading indicator is improving before the bar metric turns positive.
```tsx
import { ComboChart } from "@chart-kit/pro";
const signedMoney = (value: number) =>
value < 0 ? `-$${Math.abs(Math.round(value))}k` : `$${Math.round(value)}k`;
const recovery = [
{ month: "Jan", profit: -22, cashFlow: 8 },
{ month: "Feb", profit: -8, cashFlow: 12 },
{ month: "Mar", profit: 14, cashFlow: 16 },
{ month: "Apr", profit: 32, cashFlow: 20 },
{ month: "May", profit: 48, cashFlow: 24 },
{ month: "Jun", profit: 38, cashFlow: 22 }
];
export function ProfitRecovery() {
return (
);
}
```
## Product Use Cases
Use Combo charts for revenue vs forecast, spend vs acquisition, active users vs conversion, inventory vs sell-through, channel plan controls, and operational dashboards where one metric explains another.
## Props
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data. |
| `xKey` | `keyof TData` | Row key used for x-axis labels. |
| `series` | `ComboChartSeries[]` | Mixed `bar` and `line` series configuration. |
| `series[].key` | `string` | Stable id used by visibility and selection state. |
| `visibleSeriesKeys` | `string[]` | Optional list of series keys to render. |
| `selectedIndex` | `number` | Controlled selected x value. |
| `defaultSelectedIndex` | `number` | Initial selected x value. |
| `interaction` | `"tap"`, `"none"`, or object | Selection mode and callbacks. |
| `tooltip` | `boolean` or object | Shows and configures the shared tooltip. |
| `yDomain` | `object` or tuple | Overrides or constrains the computed y-domain. |
| `formatYLabel` | `(value) => string` | Formats y-axis and tooltip values. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/combo.md)
[Previous
Realtime Bar Chart](https://chartkit.io/docs/react-native/charts/realtime/)[Next
Export APIs](https://chartkit.io/docs/react-native/charts/export/)
---
Source: https://chartkit.io/docs/react-native/charts/contribution-heatmap
# Contribution Heatmaps
`ContributionGraph` and `CalendarHeatmap` show activity intensity across a calendar grid. Use them for usage streaks, daily habits, contribution history, or any date-based metric where consistency over time matters.
```tsx
import { ContributionGraph } from "react-native-chart-kit/v2";
const endDate = "2026-05-03";
const numDays = 154;
const values = Array.from({ length: numDays }, (_, index) => {
const end = new Date(`${endDate}T00:00:00.000Z`);
const date = new Date(
end.valueOf() - (numDays - 1 - index) * 24 * 60 * 60 * 1000
);
const weekday = date.getUTCDay();
const cycle = (index * 7 + weekday * 3) % 17;
const launchWeekBoost = index > 110 && index < 126 ? 8 : 0;
const weekendDip = weekday === 0 || weekday === 6 ? -4 : 0;
return {
date: date.toISOString().slice(0, 10),
count: Math.max(0, cycle + launchWeekBoost + weekendDip)
};
});
;
```
## Custom Color Scale
```tsx
```
Use `onDayPress` to connect cells to native tooltips, bottom sheets, or app-level detail panels.
## Empty Ranges
An empty `values` array still renders the requested date range as zero-count cells. This keeps loading, quiet-period, and newly created workspace states visually stable.
```tsx
```
## Props
### ContributionGraph / CalendarHeatmap
`CalendarHeatmap` is exported as an alias of `ContributionGraph` and accepts the same props.
| Prop | Type | Description |
| --- | --- | --- |
| `values` | `TData[]` | Source contribution rows. |
| `endDate` | `string`, `number`, or `Date` | Last date included in the rendered range. |
| `numDays` | `number` | Number of days to render, counting backward from `endDate`. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `accessor` | `keyof TData` | Row key used for contribution values when not using the default `count`. |
| `cellSize` | `number` | Size of each day cell in pixels. |
| `gutterSize` | `number` | Gap between day cells in pixels. |
| `weekStartsOn` | `number` | First day of the week, where `0` is Sunday and `1` is Monday. |
| `showMonthLabels` | `boolean` | Shows or hides month labels above the heatmap. |
| `showWeekdayLabels` | `boolean` | Shows or hides weekday labels beside the heatmap. |
| `showOutOfRangeDays` | `boolean` | Renders calendar cells outside the requested date range. |
| `theme` | `"light"`, `"dark"`, `"system"`, or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `colors` | `string[]` | Color scale used for non-empty contribution values. |
| `emptyColor` | `string` | Fill color used for zero or missing values. |
| `colorForValue` | `(props) => string` | Custom color resolver for each rendered cell. |
| `getMonthLabel` | `(monthIndex, date) => string` | Custom month label formatter. |
| `getWeekdayLabel` | `(dayIndex) => string` | Custom weekday label formatter. |
| `onDayPress` | `(event) => void` | Called when a day cell is pressed. |
| `renderer` | `ContributionGraphRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/contribution-heatmap.md)
[Previous
Progress Charts](https://chartkit.io/docs/react-native/charts/progress/)[Next
Legacy Charts](https://chartkit.io/docs/react-native/charts/legacy/)
---
Source: https://chartkit.io/docs/react-native/charts/donut
# Donut Chart
`DonutChart` shows proportional slices around a center label. Use it for compact mixes, totals, or status summaries where the middle of the chart can carry a key number or selected category.
## Basic Donut
```tsx
import { DonutChart } from "react-native-chart-kit/v2";
const revenueMix = [
{ plan: "Enterprise", revenue: 680 },
{ plan: "Business", revenue: 420 },
{ plan: "Teams", revenue: 260 },
{ plan: "Starter", revenue: 140 }
];
;
```
## Capabilities
`DonutChart` supports:
- object-row data
- theme and preset colors
- bottom wrapped legend
- percentage labels in the legend
- donut center text
- rich custom center labels
- custom legend item rendering
- slice separators
- tap selection with active-slice highlighting
- zero and invalid slices without broken paths
## Tap Selection
Use `interaction="tap"` for uncontrolled selection, or pass `selectedIndex` with `interaction.onSelect` for controlled product UI.
```tsx
const revenueMix = [
{ plan: "Enterprise", revenue: 680 },
{ plan: "Business", revenue: 420 },
{ plan: "Teams", revenue: 260 },
{ plan: "Starter", revenue: 140 }
];
const [selectedIndex, setSelectedIndex] = useState(0);
setSelectedIndex(event.index)
}}
centerLabel={revenueMix[selectedIndex]?.plan}
activeSlice={{ inactiveOpacity: 0.36, strokeWidth: 4 }}
width={410}
height={260}
/>;
```
## Custom Legend and Center Label
Use `legend.renderItem` when the default compact legend is not enough. `centerLabel` can return React content for multi-line KPI labels.
```tsx
const retentionSegments = [
{ status: "Expanded annual contracts", accounts: 48 },
{ status: "Renewed monthly workspaces", accounts: 32 },
{ status: "At-risk accounts under review", accounts: 14 },
{ status: "Paused or dormant teams", accounts: 6 },
{ status: "Zero usage migrations", accounts: 0 }
];
(
{total}
accounts
)}
sliceSeparator={{ width: 2 }}
legend={{
itemGap: 8,
maxItemWidth: "100%",
reservedHeight: 104,
renderItem: ({ item, theme }) => (
{item.label}
{item.percentageLabel}
)
}}
width={410}
height={320}
/>;
```
## Props
### DonutChart
`DonutChart` accepts the same props as `PieChart` and defaults `innerRadiusRatio` to `0.58`.
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data for the chart. |
| `valueKey` | `keyof TData` | Row key used for slice values. |
| `labelKey` | `keyof TData` | Row key used for slice and legend labels. |
| `colorKey` | `keyof TData` | Row key used for per-slice colors. |
| `colors` | `string[]` | Fallback color palette used when `colorKey` is not provided. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `"light"`, `"dark"`, `"system"`, or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `innerRadius` | `number` | Explicit inner radius in pixels. |
| `innerRadiusRatio` | `number` | Inner radius as a fraction of the computed outer radius. |
| `legend` | `boolean` or `PieChartLegendConfig` | Shows and configures the wrapped legend. |
| `arcLabels` | `boolean` or `PieChartArcLabelsConfig` | Shows and configures external arc labels and connector lines. |
| `sliceSeparator` | `boolean` or `PieChartSliceSeparatorConfig` | Draws separator strokes between slices. |
| `selectedIndex` | `number` | Controlled selected slice index. |
| `defaultSelectedIndex` | `number` | Initial uncontrolled selected slice index. |
| `activeSlice` | `PieChartActiveSliceConfig` | Configures selected-slice stroke, opacity, offset, and scale. |
| `selectionAnimation` | `boolean` or `PieChartSelectionAnimationConfig` | Enables and configures selected-slice animation. |
| `interaction` | `PieChartInteraction` | Tap selection mode and callbacks. |
| `centerLabel` | `string`, `ReactNode`, or `(props) => ReactNode` | Content rendered in the donut center. |
| `renderer` | `PieChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `id` | `string` | Stable chart id used for coordinated selection scope. |
| `testID` | `string` | Test identifier applied to the chart container. |
| `formatValue` | `(value) => string` | Formats raw slice values in labels and accessible output. |
| `formatPercentage` | `(percentage) => string` | Formats percentage labels in legends, arc labels, and accessible output. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/donut.md)
[Previous
Pie Chart](https://chartkit.io/docs/react-native/charts/pie/)[Next
Progress Charts](https://chartkit.io/docs/react-native/charts/progress/)
---
Source: https://chartkit.io/docs/react-native/charts/export
# Export APIs
Chart Kit Pro exports chart images for report screens, share sheets, generated PDFs, email attachments, support evidence, and background jobs. Use PNG when the chart should match the rendered app view. Use SVG when the output should stay small, editable, or server-generated.
This workflow is available in Chart Kit Pro. Install it once from [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
## Use cases
| Use case | Recommended path |
| --- | --- |
| Share from a mobile screen | Capture the mounted chart as PNG, then share it. |
| Save a report card | Capture the exact rendered view as PNG. |
| Generate PDF content | Produce SVG or convert SVG to PNG in your PDF job. |
| Background jobs | Use headless SVG generation from data and options. |
| Support evidence | Export a deterministic chart image with the data snapshot. |
## Mounted PNG snapshot
Use a capture adapter for the rendered React Native view. The example below uses `react-native-view-shot`, but the export controller accepts any adapter with the same shape.
```jsx
import { useMemo, useRef } from "react";
import ViewShot, { captureRef } from "react-native-view-shot";
import { CombinedChart, createChartExportController } from "@chart-kit/pro";
const data = [
{ month: "Jan", revenue: 118, margin: 18 },
{ month: "Feb", revenue: 146, margin: 21 },
{ month: "Mar", revenue: 182, margin: 23 },
{ month: "Apr", revenue: 208, margin: 26 },
{ month: "May", revenue: 236, margin: 28 },
{ month: "Jun", revenue: 274, margin: 31 }
];
const money = (value) => `$${Math.round(value)}k`;
const percent = (value) => `${Math.round(value)}%`;
export function ExportableRevenueChart() {
const chartRef = useRef(null);
const exportController = useMemo(
() =>
createChartExportController({
captureRef: (target, options) =>
captureRef(target, {
format: "png",
quality: options.quality ?? 1,
result: options.result,
width: options.width,
height: options.height
})
}),
[]
);
const savePng = async () => {
const result = await exportController.snapshot({
fileName: "revenue-margin.png",
format: "png",
target: chartRef,
width: 410,
height: 300,
result: "tmpfile"
});
console.log(result.uri);
};
return (
<>
);
}
```
## Share sheet
Capture the chart first, then pass the normalized export result to `shareChartExport` or a reusable controller.
```jsx
import { shareChartExport } from "@chart-kit/pro";
async function shareReportChart(exportController, chartRef) {
const result = await exportController.snapshot({
fileName: "report-chart.png",
format: "png",
target: chartRef,
width: 410,
height: 300,
result: "tmpfile"
});
await shareChartExport({
result,
title: "Revenue and margin",
message: "Revenue and margin chart"
});
}
```
## SVG snapshot
Use SVG when the image should stay text-based and portable. Generate the SVG from the same data and options you pass to `CombinedChart`, then pass that markup to the snapshot API.
```jsx
import { exportChartSnapshot, renderCombinedChartSvg } from "@chart-kit/pro";
async function exportSvg() {
const svg = renderCombinedChartSvg({
data,
xKey: "month",
bars: [{ yKey: "revenue", label: "Revenue" }],
lines: [{ yKey: "margin", label: "Margin", curve: "monotone" }],
formatLeftYLabel: money,
formatRightYLabel: percent,
leftYDomain: [0, "dataMax"],
rightYDomain: [0, 40],
width: 410,
height: 300,
title: "Revenue and margin"
});
const result = await exportChartSnapshot({
fileName: "revenue-trend.svg",
format: "svg",
target: svg,
width: 410,
height: 240
});
console.log(result.svg);
console.log(result.dataUri);
}
```
## Headless generation
Headless export does not capture a mounted React Native view. Use it when a report worker, server route, or background task needs chart output from data and options.
```jsx
import { exportHeadlessChart, renderCombinedChartSvg } from "@chart-kit/pro";
export async function generateReportSvg() {
return exportHeadlessChart({
fileName: "report-chart.svg",
format: "svg",
renderSvg: ({ width, height }) =>
renderCombinedChartSvg({
data,
xKey: "month",
bars: [{ yKey: "revenue", label: "Revenue" }],
lines: [{ yKey: "margin", label: "Margin", curve: "monotone" }],
formatLeftYLabel: money,
formatRightYLabel: percent,
leftYDomain: [0, "dataMax"],
rightYDomain: [0, 40],
width,
height,
title: "Revenue and margin"
}),
width: 410,
height: 300
});
}
```
For headless PNG, pass `format: "png"` plus a `renderPng` adapter that converts SVG markup to PNG in your environment.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/export.md)
[Previous
Combo Chart](https://chartkit.io/docs/react-native/charts/combo/)[Next
Pricing and plans](https://chartkit.io/docs/react-native/charts/pricing/)
---
Source: https://chartkit.io/docs/react-native/charts/legacy
# Legacy Charts
These examples use the legacy-compatible root import:
```tsx
import {
BarChart,
ContributionGraph,
LineChart,
PieChart,
ProgressChart,
StackedBarChart
} from "react-native-chart-kit";
```
Legacy charts do not read `ChartKitProvider` presets. Theme them by passing legacy props such as `chartConfig`, `barColors`, `legendFontColor`, and `backgroundColor`.
## LineChart
```tsx
import { LineChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${opacity})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
;
```
The legacy root `LineChart` preserves v6 point-slot spacing for existing overlays. For custom point content, prefer `renderDotContent`, which supplies the rendered `x` and `y` coordinates, instead of recalculating positions.
## BarChart
```tsx
import { BarChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${opacity})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
;
```
## StackedBarChart
```tsx
import { StackedBarChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${opacity})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
;
```
## PieChart
```tsx
import { PieChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${opacity})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
const data = [
{
name: "Organic",
population: 42,
color: "#2563eb",
legendFontColor: "#334155",
legendFontSize: 12
},
{
name: "Paid",
population: 24,
color: "#0891b2",
legendFontColor: "#334155",
legendFontSize: 12
},
{
name: "Referral",
population: 18,
color: "#7c3aed",
legendFontColor: "#334155",
legendFontSize: 12
}
];
;
```
## ProgressChart
```tsx
import { ProgressChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${opacity})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
;
```
## ContributionGraph
```tsx
import { ContributionGraph } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: (opacity = 1) => `rgba(37, 99, 235, ${Math.max(opacity, 0.28)})`,
labelColor: (opacity = 1) => `rgba(15, 23, 42, ${opacity})`
};
const values = [
{ date: "2026-01-02", count: 1 },
{ date: "2026-01-03", count: 4 },
{ date: "2026-01-04", count: 2 },
{ date: "2026-01-07", count: 6 },
{ date: "2026-01-08", count: 3 },
{ date: "2026-01-12", count: 8 },
{ date: "2026-01-15", count: 2 },
{ date: "2026-01-16", count: 5 },
{ date: "2026-01-17", count: 1 },
{ date: "2026-01-24", count: 10 },
{ date: "2026-01-28", count: 4 },
{ date: "2026-01-31", count: 7 },
{ date: "2026-02-01", count: 2 },
{ date: "2026-02-03", count: 9 },
{ date: "2026-02-04", count: 1 },
{ date: "2026-02-10", count: 5 },
{ date: "2026-02-14", count: 11 },
{ date: "2026-02-15", count: 3 },
{ date: "2026-02-18", count: 6 },
{ date: "2026-02-19", count: 2 },
{ date: "2026-02-23", count: 8 },
{ date: "2026-02-27", count: 4 },
{ date: "2026-03-01", count: 12 },
{ date: "2026-03-02", count: 6 },
{ date: "2026-03-05", count: 3 },
{ date: "2026-03-08", count: 9 },
{ date: "2026-03-13", count: 2 },
{ date: "2026-03-14", count: 7 },
{ date: "2026-03-21", count: 5 },
{ date: "2026-03-25", count: 10 },
{ date: "2026-03-29", count: 1 },
{ date: "2026-03-31", count: 6 }
];
({})}
/>;
```
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/legacy.md)
[Previous
Contribution Heatmaps](https://chartkit.io/docs/react-native/charts/contribution-heatmap/)[Next
Installation](https://chartkit.io/docs/react-native/charts/pro-installation/)
---
Source: https://chartkit.io/docs/react-native/charts/line
# Line Chart
`LineChart` shows how a value changes over time or across ordered categories. Use it for trends, forecasts, performance tracking, and any metric where the shape of change matters.
## Basic Line
```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 },
{ month: "May", revenue: 95 },
{ month: "Jun", revenue: 176 },
{ month: "Jul", revenue: 126 },
{ month: "Aug", revenue: 218 },
{ month: "Sep", revenue: 164 },
{ month: "Oct", revenue: 252 },
{ month: "Nov", revenue: 198 },
{ month: "Dec", revenue: 286 }
];
export function RevenueChart() {
return (
);
}
```
## Multi-Series
Use `series` when each line needs its own label, color, marker, curve, or stroke style.
```tsx
const data = [
{ month: "Jan", actual: 22, forecast: 190 },
{ month: "Feb", actual: 64, forecast: 168 },
{ month: "Mar", actual: 39, forecast: 143 },
{ month: "Apr", actual: 118, forecast: 122 },
{ month: "May", actual: 73, forecast: 101 },
{ month: "Jun", actual: 161, forecast: 84 },
{ month: "Jul", actual: 109, forecast: 66 },
{ month: "Aug", actual: 204, forecast: 48 }
];
;
```
## Styling Lines and Dots
Supported curve values are `linear`, `monotone`, and `step`.
```tsx
const data = [
{ date: "Mon", portfolio: 512, benchmark: 690 },
{ date: "Tue", portfolio: 660, benchmark: 610 },
{ date: "Wed", portfolio: 430, benchmark: 650 },
{ date: "Thu", portfolio: 760, benchmark: 540 },
{ date: "Fri", portfolio: 590, benchmark: 700 },
{ date: "Sat", portfolio: 820, benchmark: 520 },
{ date: "Sun", portfolio: 548, benchmark: 735 }
];
;
```
## Threshold Coloring
Threshold coloring clips the rendered path above or below a y value. Raw points are unchanged.
```tsx
const data = [
{ month: "Jan", attainment: 62 },
{ month: "Feb", attainment: 138 },
{ month: "Mar", attainment: 74 },
{ month: "Apr", attainment: 151 },
{ month: "May", attainment: 89 },
{ month: "Jun", attainment: 122 },
{ month: "Jul", attainment: 55 },
{ month: "Aug", attainment: 164 },
{ month: "Sep", attainment: 96 },
{ month: "Oct", attainment: 145 },
{ month: "Nov", attainment: 78 },
{ month: "Dec", attainment: 172 }
];
;
```
## Tooltips and Selection
Selection state is shared by tooltips, active dots, crosshairs, and external UI through `onSelect`.
```tsx
const data = [
{ date: "Nov 03", portfolio: 512, benchmark: 720 },
{ date: "Nov 04", portfolio: 681, benchmark: 604 },
{ date: "Nov 05", portfolio: 438, benchmark: 698 },
{ date: "Nov 10", portfolio: 794, benchmark: 552 },
{ date: "Nov 11", portfolio: 566, benchmark: 746 },
{ date: "Nov 12", portfolio: 842, benchmark: 580 },
{ date: "Nov 13", portfolio: 618, benchmark: 790 },
{ date: "Nov 14", portfolio: 906, benchmark: 534 }
];
{
setHeaderValue(event.series[0]?.formattedValue);
}
}}
tooltip={{
shared: true,
anchor: "pointer",
placement: "above",
offset: 18,
positionAnimationDuration: 320
}}
crosshair
width={410}
height={260}
/>;
```
Selection modes:
- `none`: no chart selection.
- `tap`: tap to select the nearest x value.
- `scrub`: press and drag to update the nearest x value.
Selection persistence:
- `persist`: keep the last selection after the gesture ends.
- `whileActive`: clear selection on gesture end.
- `none`: emit selection events without keeping internal selected state.
Tooltip positioning:
- `anchor: "point"` positions around the selected data point.
- `anchor: "pointer"` positions around the touch/mouse pointer.
- `placement: "auto" | "above" | "below"` controls vertical placement while preserving edge clamping.
## Custom Crosshair
Use `renderCrosshair` when a product needs branded cursors, axis badges, or a custom inspection overlay.
```tsx
import { G, Line, Text as SvgText } from "react-native-svg";
const data = [
{ month: "Jan", actual: 22, forecast: 190 },
{ month: "Feb", actual: 64, forecast: 168 },
{ month: "Mar", actual: 39, forecast: 143 },
{ month: "Apr", actual: 118, forecast: 122 },
{ month: "May", actual: 73, forecast: 101 },
{ month: "Jun", actual: 161, forecast: 84 },
{ month: "Jul", actual: 109, forecast: 66 },
{ month: "Aug", actual: 204, forecast: 48 }
];
(
{xLabel}: {series[0]?.formattedValue}
)}
width={410}
height={260}
/>;
```
## Scroll, Pan, Zoom, and Range Selector
Use simple horizontal scrolling for long categorical or time-series charts.
```tsx
```
Use a controlled viewport for direct pan, pinch zoom, or a mini-chart range selector.
```tsx
const [viewport, setViewport] = useState({
startIndex: 40,
endIndex: 90
});
setViewport(event.viewport)}
viewportInteraction={{ pan: true, pinchZoom: true, lockParentScroll: true }}
rangeSelector={{ visible: true, interactive: true, height: 68 }}
yAxisLabelWidth="stable"
width={410}
height={340}
/>;
```
`yAxisLabelWidth="stable"` reserves label width from the full dataset, so changing the viewport does not make the plot jump when labels change.
## Reference Overlays
Reference lines and bands are clipped to the plot bounds. Line labels default to automatic vertical placement and try to avoid nearby series geometry. Add `labelContainer` to a reference line or band when a label needs a small background chip over busy data.
```tsx
const data = [
{ month: "Jan", attainment: 62 },
{ month: "Feb", attainment: 138 },
{ month: "Mar", attainment: 74 },
{ month: "Apr", attainment: 151 },
{ month: "May", attainment: 89 },
{ month: "Jun", attainment: 122 },
{ month: "Jul", attainment: 55 },
{ month: "Aug", attainment: 164 },
{ month: "Sep", attainment: 96 },
{ month: "Oct", attainment: 145 },
{ month: "Nov", attainment: 78 },
{ month: "Dec", attainment: 172 }
];
;
```
## Layout Debug
Use `debugLayout` in development when a chart clips labels, legends, or tooltips. It draws the computed layout rectangles over the chart and exposes the same rectangles through `onLayoutDebug`.
Use the overlay to identify which layout box is causing the issue, then tune the related prop:
- X labels collide or overflow: adjust `labelStrategy`, `labelRotation`, `labelMinGap`, or `edgeLabelPolicy`.
- Y labels clip or steal too much plot width: adjust `yAxisLabelWidth` or `formatYLabel`.
- Legend rows crowd the plot: adjust `legend`, hide it, or simplify series labels.
- Tooltip overlaps important data: adjust `tooltip` placement, width, or custom renderer.
```tsx
{
console.log(model.rects);
}}
width={410}
height={240}
/>
```
## Labels and Axes
Useful label props:
- `labelStrategy`: `auto`, `show`, `skip`, `rotate`, `stagger`, or `hide`.
- `edgeLabelPolicy`: `shift`, `hide`, or `show`.
- `formatXLabel`: format dates, categories, or numeric x values.
- `formatYLabel`: format y-axis labels and tooltip values.
- `axisLabelAnimation`: crossfade y-axis label changes during viewport changes.
- `yAxisLabelWidth`: `auto`, `stable`, or a fixed number.
## Decimation
LineChart uses automatic path-only min/max decimation by default. This reduces SVG path complexity for dense charts while preserving source points for selection, tooltips, labels, and custom dots.
```tsx
```
Decimation options:
- `decimation="auto"`: default. Uses roughly two rendered path points per plot pixel, with a minimum of 120.
- `decimation={false}`: disables path decimation.
- `decimation={500}`: caps each rendered path around a fixed point budget.
- `decimation={{ maxPoints: 700 }}`: object form for future strategy options.
## Accessibility
Every LineChart generates a summary if `accessibilityLabel` is not provided. For custom accessibility output, use:
```ts
import {
getLineChartAccessibilitySummary,
getLineChartDataTable
} from "react-native-chart-kit/v2";
```
`getLineChartDataTable()` returns columns and rows suitable for an app-level table fallback or export workflow.
## Props
### LineChart
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data for the chart. |
| `xKey` | `keyof TData` | Row key used for the x-axis value. |
| `yKey` | `keyof TData` | Single row key used for y values when `series` or `yKeys` is not provided. |
| `yKeys` | `Array` | Multiple row keys rendered as separate series with default styling. |
| `series` | `LineChartSeries[]` | Full per-series configuration, including labels, colors, stroke, dots, thresholds, and area fill. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `ChartKitThemeMode` or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `scrollable` | `boolean` | Enables a horizontal scroll viewport for long data sets. |
| `visiblePoints` | `number` | Number of points visible in the viewport when `scrollable` is enabled. |
| `initialIndex` | `ChartViewportInitialIndex` | Initial scroll/window position, such as `"start"` or `"end"`. |
| `viewport` | `LineChartViewportConfig` | Controlled visible data window for scroll, pan, zoom, or range selector flows. |
| `onViewportChange` | `(event) => void` | Called when viewport state changes from the main plot or range selector. |
| `viewportInteraction` | `boolean` or `LineChartViewportInteractionConfig` | Enables and configures one-finger pan and pinch zoom for the viewport. |
| `rangeSelector` | `boolean` or `LineChartRangeSelectorConfig` | Adds a mini-chart range selector below the main plot. |
| `decimation` | `false`, `"auto"`, `number`, or `LineChartDecimationConfig` | Controls rendered path simplification for dense series. |
| `curve` | `LineCurve` | Curve interpolation used for line and area paths. |
| `connectNulls` | `boolean` | Connects defined points across `null` or missing y values. |
| `area` | `boolean` | Renders area fills under the line series. |
| `areaFill` | `LineChartAreaFillConfig` | Shared area fill opacity, gradient, or color configuration. |
| `showDots` | `boolean` | Shows or hides all point markers. |
| `dots` | `boolean` or `LineChartDotConfig` | Configures default point marker visibility, size, shape, and color. |
| `renderDot` | `(props) => ReactNode` | Custom renderer for ordinary point markers. |
| `selectedIndex` | `number` | Controlled selected data index. |
| `defaultSelectedIndex` | `number` | Initial uncontrolled selected data index. |
| `activeDot` | `boolean` or `LineChartDotConfig` | Configures the marker shown for the selected point. |
| `renderActiveDot` | `(props) => ReactNode` | Custom renderer for the selected point marker. |
| `interaction` | `LineChartInteraction` | Selection/scrub interaction mode and callbacks. |
| `crosshair` | `boolean` or `LineChartCrosshairConfig` | Shows and configures the selected-point crosshair. |
| `renderCrosshair` | `(props) => ReactNode` | Custom renderer for the crosshair. |
| `tooltip` | `boolean` or `LineChartTooltipConfig` | Shows and configures selected-point tooltip content and placement. |
| `renderTooltip` | `(props) => ReactNode` | Custom renderer for selected-point tooltip content. |
| `referenceLines` | `LineChartReferenceLineConfig[]` | Horizontal reference lines drawn across the plot. Reference labels support `labelContainer`. |
| `referenceBands` | `LineChartReferenceBandConfig[]` | Horizontal reference bands drawn behind the series. Reference labels support `labelContainer`. |
| `showHorizontalGridLines` | `boolean` | Shows or hides horizontal grid lines. |
| `showVerticalGridLines` | `boolean` | Shows or hides vertical grid lines. |
| `legend` | `boolean` or `LineChartLegendConfig` | Shows and configures the chart legend. |
| `labelStrategy` | `LineChartLabelStrategy` | Controls x-axis label density and layout. |
| `labelRotation` | `number` | Rotation angle for x-axis labels when using rotated labels. |
| `labelMinGap` | `number` | Minimum gap used by automatic x-axis label skipping. |
| `edgeLabelPolicy` | `LineChartEdgeLabelPolicy` | Controls how first and last x-axis labels are shifted, hidden, or shown. |
| `yDomain` | `NumericDomainInput` | Overrides or constrains the computed y-axis domain. |
| `yAxisLabelWidth` | `LineChartYAxisLabelWidth` | Fixed, automatic, or stable width for y-axis labels. |
| `axisLabelAnimation` | `boolean` or `LineChartAxisLabelAnimationConfig` | Animates y-axis label changes during viewport updates. |
| `formatXLabel` | `(value, index) => string` | Formats x-axis labels and selected x labels. |
| `formatYLabel` | `(value) => string` | Formats y-axis labels, selected values, and tooltip values. |
| `renderer` | `LineChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `id` | `string` | Stable chart id used for internal ids and coordinated selection scope. |
| `debugLayout` | `boolean` | Renders layout debug rectangles in development. |
| `onLayoutDebug` | `(model) => void` | Receives computed layout debug geometry. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/line.md)
[Previous
Contributing](https://chartkit.io/docs/react-native/getting-started/contributing/)[Next
Area Chart](https://chartkit.io/docs/react-native/charts/area/)
---
Source: https://chartkit.io/docs/react-native/charts/pie
# Pie Chart
`PieChart` shows how a whole breaks down into proportional slices. Use it for small category mixes where the share of each segment is more important than precise comparison.
## Basic Pie
```tsx
import { PieChart } from "react-native-chart-kit/v2";
const data = [
{ channel: "Organic search", share: 42 },
{ channel: "Paid social", share: 24 },
{ channel: "Referrals", share: 18 },
{ channel: "Partners", share: 10 },
{ channel: "Lifecycle", share: 6 }
];
export function AcquisitionShare() {
return (
);
}
```
## Capabilities
`PieChart` supports:
- object-row data
- theme and preset colors
- bottom wrapped legend
- percentage labels in the legend
- custom legend item rendering
- slice separators
- external arc labels with connector lines
- tap selection with active-slice highlighting
- zero and invalid slices without broken paths
## Slice Separators
Use `sliceSeparator` when neighboring slices need clearer edges. Passing `true` uses the current chart background color; pass an object to tune the line.
```tsx
const acquisitionShare = [
{ channel: "Organic search", share: 42 },
{ channel: "Paid social", share: 24 },
{ channel: "Referrals", share: 18 },
{ channel: "Partners", share: 10 },
{ channel: "Lifecycle", share: 6 }
];
;
```
## Tap Selection
Use `interaction="tap"` for uncontrolled selection, or pass `selectedIndex` with `interaction.onSelect` for controlled product UI.
```tsx
const acquisitionShare = [
{ channel: "Organic search", share: 42 },
{ channel: "Paid social", share: 24 },
{ channel: "Referrals", share: 18 },
{ channel: "Partners", share: 10 },
{ channel: "Lifecycle", share: 6 }
];
const [selectedIndex, setSelectedIndex] = useState(0);
setSelectedIndex(event.index)
}}
activeSlice={{ inactiveOpacity: 0.36, strokeWidth: 4 }}
width={410}
height={260}
/>;
```
## External Arc Labels
Use `arcLabels` when the chart should explain itself without a separate legend. Small slices are filtered by `minPercentage` so long-tail labels do not collide with the primary categories.
```tsx
const acquisitionShare = [
{ channel: "Organic search", share: 42 },
{ channel: "Paid social", share: 24 },
{ channel: "Referrals", share: 18 },
{ channel: "Partners", share: 10 },
{ channel: "Lifecycle", share: 6 }
];
`${label.split(" ")[0]} ${percentageLabel}`
}}
width={410}
height={260}
/>;
```
## Props
### PieChart
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data for the chart. |
| `valueKey` | `keyof TData` | Row key used for slice values. |
| `labelKey` | `keyof TData` | Row key used for slice and legend labels. |
| `colorKey` | `keyof TData` | Row key used for per-slice colors. |
| `colors` | `string[]` | Fallback color palette used when `colorKey` is not provided. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `"light"`, `"dark"`, `"system"`, or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `innerRadius` | `number` | Explicit inner radius in pixels for donut-style rendering. |
| `innerRadiusRatio` | `number` | Inner radius as a fraction of the computed outer radius. |
| `legend` | `boolean` or `PieChartLegendConfig` | Shows and configures the wrapped legend. |
| `arcLabels` | `boolean` or `PieChartArcLabelsConfig` | Shows and configures external arc labels and connector lines. |
| `sliceSeparator` | `boolean` or `PieChartSliceSeparatorConfig` | Draws separator strokes between slices. |
| `selectedIndex` | `number` | Controlled selected slice index. |
| `defaultSelectedIndex` | `number` | Initial uncontrolled selected slice index. |
| `activeSlice` | `PieChartActiveSliceConfig` | Configures selected-slice stroke, opacity, offset, and scale. |
| `selectionAnimation` | `boolean` or `PieChartSelectionAnimationConfig` | Enables and configures selected-slice animation. |
| `interaction` | `PieChartInteraction` | Tap selection mode and callbacks. |
| `centerLabel` | `string`, `ReactNode`, or `(props) => ReactNode` | Content rendered in the chart center. |
| `renderer` | `PieChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `id` | `string` | Stable chart id used for coordinated selection scope. |
| `testID` | `string` | Test identifier applied to the chart container. |
| `formatValue` | `(value) => string` | Formats raw slice values in labels and accessible output. |
| `formatPercentage` | `(percentage) => string` | Formats percentage labels in legends, arc labels, and accessible output. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/pie.md)
[Previous
Bar Charts](https://chartkit.io/docs/react-native/charts/bar/)[Next
Donut Chart](https://chartkit.io/docs/react-native/charts/donut/)
---
Source: https://chartkit.io/docs/react-native/charts/pricing
# Pricing and plans
Use Free for MIT-covered public charts. Use Pro when a commercial app needs Pro chart families, financial workflows, or priority commercial support. Use Enterprise for larger teams, custom terms, or broader distribution rights.
## Pro license tiers
| Plan | Price | Team scope | App scope | Company scope | Support |
| --- | --- | --- | --- | --- | --- |
| Solo | $49 / year | 1 developer | 1 production app | Revenue/funding cap: $250k | Standard email support |
| Startup | $149 / year | Up to 3 developers | 1 production app | Revenue/funding cap: $2M | Standard email support |
| Business | $499 / year | Up to 6 developers | Up to 2 production apps | No revenue/funding cap | Priority email support |
| Enterprise | Custom | 7+ developers or custom scope | Multiple products or app families | Purchasing workflows or custom terms | Named support contact |
Need SDK, white-label, embedded, or customer-distributed use? Contact sales for OEM terms.
## Capability comparison
| Current capability | What it covers | Free MIT | Pro |
| --- | --- | --- | --- |
| Public chart families | Line, area, bar, stacked bar, pie, donut, progress, contribution heatmap. | Included | Included |
| Modern mobile interactions | Line/area selection, bar and pie tap selection, shared selection scope, tooltips, crosshairs where supported. | Included | Included |
| Viewport tools | Line/area scroll, pan/zoom, range selector, decimation; bar scrollable windows; Pro financial chart viewport controls. | Included | Included |
| Themes and custom presets | ChartKitProvider, light/dark/system modes, custom preset registry, renderer injection. | Included | Included |
| Accessibility helpers | Public helpers for line, bar, pie, progress, contribution; Pro helpers for candlestick and combo. | Included | Included |
| Pro chart families | CandlestickChart, CandlebarChart, CombinedChart, ComboChart, RadarChart, and Realtime.BarChart. | Not included | Included |
| Financial chart workflow | OHLCV readouts, crosshair inspector, price scale, session gaps, closures, range selector. | Not included | Included |
| Combo chart workflow | Mixed bar and line series, shared tooltip, visible series keys, negative domains. | Not included | Included |
| Realtime chart workflow | Rolling data windows, append animations, stable selection, and renderer-backed streaming dashboard charts. | Not included | Included |
| Optional Skia renderer | Injected Skia renderer adapter for CombinedChart and CandlestickChart. | Not included | Included |
| PNG/SVG export APIs | Snapshot APIs, share sheet helpers, and adapter-based headless SVG/PNG image generation workflows. | Not included | Included |
| Premium theme templates | Extra named palettes and design templates beyond current custom presets. | Not included | Planned |
| Enterprise accessibility reports | Packaged compliance evidence beyond current summaries and data-table helpers. | Not included | Planned |
`@chart-kit/pro` is publicly installable from npm. Production use requires a valid Chart Kit Pro commercial license.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/pricing.md)
[Previous
Export APIs](https://chartkit.io/docs/react-native/charts/export/)[Next
Themes](https://chartkit.io/docs/react-native/charts/themes/)
---
Source: https://chartkit.io/docs/react-native/charts/pro-installation
# Installation
Pro charts ship as a licensed package that is installed next to the public `react-native-chart-kit` package. Keep the public package installed because Pro charts share the same theme provider, renderer defaults, and React Native SVG peer dependency.
`@chart-kit/pro` is publicly installable from npm. Production use requires a valid Chart Kit Pro license.
## React Native CLI
Terminal window
```sh
npm install react-native-chart-kit @chart-kit/pro react-native-svg
```
For iOS apps, install native pods after installing dependencies:
Terminal window
```sh
cd ios
pod install
```
## Expo
Install the packages and let Expo choose the compatible `react-native-svg` version:
Terminal window
```sh
npm install react-native-chart-kit @chart-kit/pro
npx expo install react-native-svg
```
## Imports
Modern public charts import from `react-native-chart-kit/v2`. Pro chart examples import from `@chart-kit/pro`.
```tsx
import { LineChart } from "react-native-chart-kit/v2";
import { ComboChart } from "@chart-kit/pro";
```
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/pro-installation.md)
[Previous
Legacy Charts](https://chartkit.io/docs/react-native/charts/legacy/)[Next
Candlebar Chart](https://chartkit.io/docs/react-native/charts/candlebar/)
---
Source: https://chartkit.io/docs/react-native/charts/progress
# Progress Charts
`ProgressChart` shows completion as circular rings. Use it for checklists, readiness scores, quotas, and compact progress summaries with one or more tracked values.
## Concentric Rings
```tsx
import { ProgressChart } from "react-native-chart-kit/v2";
const data = [
{ metric: "Build signed", progress: 0.76 },
{ metric: "QA pass", progress: 0 },
{ metric: "Rollout cap", progress: 0.42 }
];
`${Math.round(average * 100)}%`}
/>;
```
## Single Ring
```tsx
import { ProgressRing } from "react-native-chart-kit/v2";
;
```
## Labels And Data Arrays
Use the `labels` and `data` object shape when progress values already come from parallel arrays:
```tsx
```
Values outside `0..1` produce normalization warnings in core and are clamped by geometry so the ring never draws broken arcs.
## Zero And Missing Values
Zero and missing rings keep their background tracks and legend rows. Values above `1` are clamped visually while their source value remains available in the model.
```tsx
```
## Props
### ProgressChart
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `ProgressChartData` | Object-row data or a progress data object with `labels` and `data` arrays. |
| `valueKey` | `keyof TData` | Row key used for ring progress values in object-row data. |
| `labelKey` | `keyof TData` | Row key used for ring labels in object-row data. |
| `colorKey` | `keyof TData` | Row key used for ring colors in object-row data. |
| `labels` | `string[]` | Labels used with data arrays. |
| `colors` | `string[]` | Colors used with data arrays or as fallback ring colors. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `"light"`, `"dark"`, `"system"`, or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `legend` | `boolean` or `ProgressChartLegendConfig` | Shows and configures the legend. |
| `hideLegend` | `boolean` | Legacy-style shortcut for hiding the legend. |
| `centerLabel` | `string` or `(props) => string` | Text rendered in the center of the rings. |
| `strokeWidth` | `number` | Ring stroke width in pixels. |
| `ringGap` | `number` | Gap between concentric rings. |
| `radius` | `number` | Explicit outer ring radius in pixels. |
| `animation` | `boolean` or `ProgressChartAnimationConfig` | Enables and configures ring entrance/update animation. |
| `strokeLinecap` | `ProgressChartStrokeLinecap` | Stroke cap style for progress arcs. |
| `backgroundRingColor` | `string` | Color used for ring tracks behind progress arcs. |
| `renderer` | `ProgressChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
| `formatPercentage` | `(value) => string` | Formats percentages in labels and accessible output. |
### ProgressRing
| Prop | Type | Description |
| --- | --- | --- |
| `value` | `number`, `null`, or `undefined` | Single progress value for the ring, usually between `0` and `1`. |
| `label` | `string` | Label used for the ring and accessible output. |
| `color` | `string` | Progress arc color for the ring. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
| `theme` | `"light"`, `"dark"`, `"system"`, or `CartesianChartTheme` | Theme mode or inline theme tokens for this chart. |
| `preset` | `CartesianChartPresetValue` | Built-in or registered preset name used to seed chart colors and typography. |
| `legend` | `boolean` or `ProgressChartLegendConfig` | Shows and configures the legend. |
| `hideLegend` | `boolean` | Legacy-style shortcut for hiding the legend. |
| `centerLabel` | `string` or `(props) => string` | Text rendered in the ring center. |
| `strokeWidth` | `number` | Ring stroke width in pixels. |
| `ringGap` | `number` | Gap setting inherited from `ProgressChart`; only relevant when the component is wrapped or extended. |
| `radius` | `number` | Explicit ring radius in pixels. |
| `animation` | `boolean` or `ProgressChartAnimationConfig` | Enables and configures ring entrance/update animation. |
| `strokeLinecap` | `ProgressChartStrokeLinecap` | Stroke cap style for the progress arc. |
| `backgroundRingColor` | `string` | Color used for the track behind the progress arc. |
| `renderer` | `ProgressChartRenderer` | Renderer implementation used for SVG-compatible primitives. |
| `accessibilityLabel` | `string` | Overrides the generated accessible chart summary. |
| `testID` | `string` | Test identifier applied to the chart container. |
| `formatPercentage` | `(value) => string` | Formats percentages in labels and accessible output. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/progress.md)
[Previous
Donut Chart](https://chartkit.io/docs/react-native/charts/donut/)[Next
Contribution Heatmaps](https://chartkit.io/docs/react-native/charts/contribution-heatmap/)
---
Source: https://chartkit.io/docs/react-native/charts/radar
# Radar Chart
`RadarChart` compares multiple profiles across the same set of metrics. Use it for product quality, health scores, benchmarks, rubric scoring, and capability comparison.
This chart is available in Chart Kit Pro. Install it once from [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
## Basic Radar
```tsx
import { RadarChart } from "@chart-kit/pro";
const benchmarks = [
{ metric: "Speed", current: 92, target: 78, industry: 54 },
{ metric: "Polish", current: 48, target: 94, industry: 72 },
{ metric: "A11y", current: 96, target: 86, industry: 61 },
{ metric: "Depth", current: 38, target: 88, industry: 76 },
{ metric: "Control", current: 84, target: 64, industry: 91 },
{ metric: "Export", current: 42, target: 82, industry: 58 }
];
export function QualityRadar() {
return (
);
}
```
## Product Use Cases
Use Radar charts for quality rubrics, health checks, skills matrices, competitor benchmarks, feature maturity reports, and product scorecards.
## Props
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Object-row source data. |
| `categoryKey` | `keyof TData` | Row key used for axis labels. |
| `series` | `RadarChartSeries[]` | Values rendered as filled polygons. |
| `maxValue` | `number` | Optional fixed radial scale maximum. |
| `width` | `number` | Outer chart width in pixels. |
| `height` | `number` | Outer chart height in pixels. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/radar.md)
[Previous
Candlebar Chart](https://chartkit.io/docs/react-native/charts/candlebar/)[Next
Realtime Bar Chart](https://chartkit.io/docs/react-native/charts/realtime/)
---
Source: https://chartkit.io/docs/react-native/charts/realtime
# Realtime Bar Chart
`Realtime.BarChart` renders a rolling bar window for live analytics, monitoring, and operational dashboards. It keeps visual slots stable while appended rows slide into view, so selection and tooltip state follow the selected datum instead of a moving array index.
This chart is available in Chart Kit Pro. Install it once from [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
## Active Users Stream
Use `liveKey` for stable row identity and `windowSize` for the visible rolling window. The chart can use the same SVG or Skia renderer selected by `ChartKitProvider`.
```tsx
import { useEffect, useMemo, useState } from "react";
import { Realtime } from "@chart-kit/pro";
const updateMs = 2000;
const getUsersAt = (pointIndex: number) =>
Math.round(
44 +
Math.sin(pointIndex * 0.7) * 16 +
Math.cos(pointIndex * 0.25) * 10 +
(pointIndex % 5) * 3
);
const createRows = (tick: number) =>
Array.from({ length: 30 }, (_, index) => {
const pointIndex = tick + index;
return {
pointIndex,
users: Math.max(8, Math.min(92, getUsersAt(pointIndex)))
};
});
const formatAgeLabel = (minutesAgo: number) =>
minutesAgo === 0 ? "Now" : `${minutesAgo} min ago`;
export function ActiveUsersStream() {
const [tick, setTick] = useState(0);
const rows = useMemo(() => createRows(tick), [tick]);
useEffect(() => {
const intervalId = setInterval(() => {
setTick((currentTick) => currentTick + 1);
}, updateMs);
return () => clearInterval(intervalId);
}, []);
return (
{
const pointIndex =
typeof value === "number"
? value
: value instanceof Date
? Number.NaN
: Number.parseInt(value, 10);
const minutesAgo = Number.isFinite(pointIndex)
? Math.max(0, tick + 29 - pointIndex)
: 0;
return formatAgeLabel(minutesAgo);
}}
showXAxisLabels={false}
showYAxisLabels={false}
tooltip={{ anchor: "bar", placement: "top", width: 108 }}
yDomain={[0, 100]}
width={410}
height={150}
/>
);
}
```
## Selection and tooltips
Use `liveKey` whenever the incoming array is a rolling window. Selection keys are based on that identity, so a selected bar can move left while its tooltip value stays attached to the same row.
Omit `defaultSelectedBar` when the stream should open idle. Add it only when the chart should seed an initial visible tooltip. `interaction="tap"` lets the user move selection without adding controlled state.
`tooltip={{ placement: "top" }}` pins the tooltip to the top of the chart while the x-position follows the selected bar.
## Props
| Prop | Type | Description |
| --- | --- | --- |
| `data` | `TData[]` | Source rows for the current rolling feed. |
| `xKey` | `keyof TData` | Row key used for x values. |
| `yKey` | `keyof TData` | Numeric row key for the bar values. |
| `series` | `BarChartSeries[]` | Optional series config. |
| `liveKey` | `keyof TData | (row, index) => key` | Stable row identity used for appends and selection. |
| `windowSize` | `number` | Number of rows visible in the realtime window. |
| `animation` | `boolean | RealtimeBarChartAnimationConfig` | Realtime slide animation config. |
| `paused` | `boolean` | Stops realtime transitions when true. |
| `tooltip` | `boolean | BarChartTooltipConfig` | Supports normal bar tooltip options plus top placement. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/realtime.md)
[Previous
Radar Chart](https://chartkit.io/docs/react-native/charts/radar/)[Next
Combo Chart](https://chartkit.io/docs/react-native/charts/combo/)
---
Source: https://chartkit.io/docs/react-native/charts/themes
# Themes
Charts inherit app-level theme settings from `ChartKitProvider`, while each chart can still override `theme` or `preset` locally.
```tsx
import { ChartKitProvider, createChartPreset } from "react-native-chart-kit/v2";
const acme = createChartPreset({
light: {
background: "#ffffff",
grid: "#e5edf7",
series: ["#155eef", "#12b76a"]
},
dark: {
background: "#07111f",
plotBackground: "#0b1627",
grid: "#1d3554",
series: ["#60a5fa", "#34d399"]
}
});
const data = [
{ date: "Jan", revenue: 52 },
{ date: "Feb", revenue: 86 },
{ date: "Mar", revenue: 58 },
{ date: "Apr", revenue: 134 },
{ date: "May", revenue: 95 },
{ date: "Jun", revenue: 176 }
];
;
```
## Built-In Presets
These names follow the same broad convention used by mature color systems: abstract palette families from [Radix Colors](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette), utility color families from [Tailwind CSS](https://tailwindcss.com/docs/colors), and role-based color thinking from [Material Design](https://m3.material.io/styles/color/roles).
| Preset | Character | Light series | Dark series |
| --- | --- | --- | --- |
| `default` | Balanced blue/cyan baseline for neutral product UI. | | |
| `spectrum` | Clear blue, green, amber, and violet for high-readability multi-series charts. | | |
| `aurora` | Cool sky, violet, teal, and orange with a polished app feel. | | |
| `verdant` | Fresh green-led palette with rose, sky, and lime accents. | | |
| `cupertino` | Crisp system-style blue, green, orange, and pink. | | |
| `material` | Material-inspired purple primary with teal, error red, and mauve. | | |
| `graphite` | Monochrome grayscale for quiet, editorial, or brand-led surfaces. | | |
| `contrast` | Accessibility-forward high contrast with stronger axis and grid colors. | | |
| `midnight` | Deep slate base with cyan, green, amber, and pink neon accents. | | |
Alpha note: earlier use-case names were removed. Use the palette names above in new code.
Use `theme` for one-off chart overrides and `createChartPreset()` for design-system presets that should be shared across a product.
## Props
### ChartKitProvider
| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Chart subtree that should inherit provider defaults. |
| `mode` | `ChartKitThemeMode` | Theme mode to apply, including `"light"`, `"dark"`, or `"system"`. |
| `preset` | `CartesianChartPresetValue` | Default preset name or preset object used by descendant charts. |
| `presets` | `CartesianChartPresetRegistry` | Custom preset registry available to descendant charts. |
| `renderer` | `LineChartRenderer` | Default SVG-compatible renderer used by descendant chart surfaces. |
| `theme` | `CartesianChartTheme` | Inline theme overrides merged into descendant chart themes. |
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/themes.md)
[Previous
Pricing and plans](https://chartkit.io/docs/react-native/charts/pricing/)[Next
Accessibility](https://chartkit.io/docs/react-native/charts/accessibility/)
---
Source: https://chartkit.io/docs/react-native/getting-started/contributing
# Contributing
This page is for developing React Native Chart Kit itself. If you are installing the library in an app, start with the [Quickstart](https://chartkit.io/docs/react-native/getting-started/installation/).
## Repository Setup
Terminal window
```sh
git clone git@github.com:chart-kit/react-native-chart-kit.git
cd react-native-chart-kit
npm install
```
The repository uses npm workspaces and `package-lock.json`.
App developers install this package:
- `react-native-chart-kit`: the public npm package.
This repository also has internal workspaces:
- `@chart-kit/core`: shared chart logic, types, scales, and data helpers.
- `@chart-kit/svg-renderer`: SVG primitives and renderer helpers used by the React Native charts.
- `@chart-kit/react-native`: the React Native implementation of the modern charts. It is assembled into `react-native-chart-kit/v2`.
- `@chart-kit/site`: the docs site and live chart previews.
## Local Checks
Run the focused check for the area you changed, then run the broader checks before opening a pull request.
Terminal window
```sh
npm run lint
npm run typecheck
npm run test
npm run docs:build
npm run build
```
Useful focused commands:
| Command | Purpose |
| --- | --- |
| `npm run core:typecheck` | Type-check the core workspace. |
| `npm run svg:typecheck` | Type-check the SVG renderer workspace. |
| `npm run rn:typecheck` | Type-check the chart library’s React Native implementation and its tests. |
| `npm run test:unit` | Run unit tests. |
| `npm run test:compat` | Check that old v6-style chart data still normalizes correctly. |
| `npm run example:rn-cli:typecheck` | Type-check the small non-Expo example app against `react-native-chart-kit/v2`. |
| `npm run docs:build` | Verify docs links and type-check documentation examples. |
| `npm run pack:check` | Dry-run the npm packages and confirm required files are included. |
| `npm run surface:check` | Check public exports and make sure free packages do not import Pro or Skia code. |
## Example App
The public repo includes a small React Native CLI example app:
Terminal window
```sh
npm run example:rn-cli:typecheck
```
Use it to check that a plain non-Expo app can import `react-native-chart-kit/v2` and pass valid props to the chart components.
The example app lives in `examples/rn-cli-basic`:
- `App.tsx`: the example screen with a few charts.
- `metro.config.js`: Metro aliases that point package imports back to this repo’s local source files.
## Branch Names
Use lowercase kebab-case branch names in this format:
Terminal window
```sh
/
```
Use these branch types:
- `fix/` for user-visible bug fixes
- `feat/` for new public functionality
- `docs/` for documentation-only changes
- `ci/` for automation and CI changes
- `chore/` for maintenance, release hygiene, and dependency upkeep
- `refactor/` for internal changes that do not intentionally change behavior
- `release/` for version bump and publishing prep
Include an issue number when the branch maps to a specific issue, for example `fix/733-svg-gradient-ids`. Keep each branch scoped to one pull request.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/getting-started/contributing.md)
[Previous
Quickstart](https://chartkit.io/docs/react-native/getting-started/installation/)[Next
Line Chart](https://chartkit.io/docs/react-native/charts/line/)
---
Source: https://chartkit.io/docs/react-native/getting-started/installation
# Quickstart
Start using `react-native-chart-kit` with a basic setup.
## React Native CLI
Terminal window
```sh
npm install react-native-chart-kit react-native-svg
```
For iOS apps, install native pods after installing dependencies:
Terminal window
```sh
cd ios
pod install
```
## Expo
Install the package and the Expo-compatible `react-native-svg` version:
Terminal window
```sh
npm install react-native-chart-kit
npx expo install react-native-svg
```
## First Modern Chart
New screens can import the modern v2 API from the public package subpath.
```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 },
{ month: "May", revenue: 95 },
{ month: "Jun", revenue: 176 }
];
export function RevenueChart() {
return (
);
}
```
The root import remains the legacy-compatible surface for existing screens.
For Pro charts, see [Pro chart installation](https://chartkit.io/docs/react-native/charts/pro-installation/).
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/getting-started/installation.md)
[Next
Contributing](https://chartkit.io/docs/react-native/getting-started/contributing/)
---
Source: https://chartkit.io/docs/react-native
# React Native Chart Kit Documentation
React Native Chart Kit is a library of modern and polished charts for React Native, available through `react-native-chart-kit` NPM package.
## Getting Started
- [Quickstart](https://chartkit.io/docs/react-native/getting-started/installation/)
- [Contributing](https://chartkit.io/docs/react-native/getting-started/contributing/)
## 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/)
- [Contribution heatmap](https://chartkit.io/docs/react-native/charts/contribution-heatmap/)
- [Legacy charts](https://chartkit.io/docs/react-native/charts/legacy/)
## Pro Charts
- [Installation](https://chartkit.io/docs/react-native/charts/pro-installation/)
- [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/)
- [Combo](https://chartkit.io/docs/react-native/charts/combo/)
## Guides
- [Themes](https://chartkit.io/docs/react-native/charts/themes/)
- [Accessibility](https://chartkit.io/docs/react-native/charts/accessibility/)
- [Troubleshooting](https://chartkit.io/docs/react-native/troubleshooting/)
## Migration
- [From v1](https://chartkit.io/docs/react-native/migration/from-v1/)
- [Prop mapping](https://chartkit.io/docs/react-native/migration/prop-mapping/)
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/README.md)
---
Source: https://chartkit.io/docs/react-native/migration/from-v1
# Migrating From v1
The v2 migration strategy is intentionally partial compatibility. Existing apps should be able to keep common chart names and data shapes while new product work uses the modern object-row API.
## Recommended Path
1. Upgrade the package and peer dependencies.
2. Keep existing `LineChart`, `BarChart`, `StackedBarChart`, `PieChart`, `ProgressChart`, and `ContributionGraph` imports working through the compatibility surface.
3. Run the app and fix any documented compatibility warnings.
4. Review the modern API examples before adopting it in apps.
5. Migrate old charts gradually when you need better layout, selection, scrolling, or theming.
## What Should Keep Working
Common v1 data shapes remain the compatibility target:
```tsx
import { LineChart } from "react-native-chart-kit";
`rgba(37, 99, 235, ${opacity})`
}}
/>;
```
The compatibility promise covers the common public API and the legacy `LineChart` point spacing used by public render and callback props. It does not cover undocumented internals, exact SVG node order, or layout bugs that made labels clip.
## Modern API
The modern object-row API is available from the same public package through the `react-native-chart-kit/v2` subpath.
```tsx
import { LineChart } from "react-native-chart-kit/v2";
;
```
## Layout Differences
v2 defaults prioritize correct mobile layout over pixel-perfect legacy spacing:
- Labels reserve space automatically where possible.
- Edge labels shift or hide instead of clipping.
- Tooltips are rendered above chart content and are shifted inside the viewport.
- Scrollable charts use visible data windows instead of requiring manual SVG width hacks.
- `null` values create line gaps by default in modern charts.
These layout differences apply to the modern `/v2` charts. The legacy root `LineChart` keeps the v6 point-slot spacing so existing overlays remain aligned. When adding custom content, prefer the `x` and `y` coordinates supplied by `renderDotContent` and `onDataPointClick` instead of duplicating chart geometry.
Keep migrated charts on the legacy package path when they rely on old spacing during a transition. Do not use legacy spacing patterns for new charts.
## Package Paths
The current repository has one intended public package path:
- `react-native-chart-kit`: legacy-compatible root package for upgrade testing, continuity, and modern chart adoption through the `/v2` subpath.
The `@chart-kit/*` names remain internal workspace aliases only.
## Visual Review
Use the public [`chart-kit/react-native-chart-kit-example`](https://github.com/chart-kit/react-native-chart-kit-example) Expo app for visual review. It installs React Native Chart Kit from npm, so it does not require this repository to live in a sibling folder.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/migration/from-v1.md)
[Previous
Troubleshooting](https://chartkit.io/docs/react-native/troubleshooting/)[Next
Prop Mapping](https://chartkit.io/docs/react-native/migration/prop-mapping/)
---
Source: https://chartkit.io/docs/react-native/migration/prop-mapping
# Prop Mapping
This table summarizes the current migration intent for common v1 props. It is a public-facing version of the internal compatibility matrix, scoped to props most apps actually use.
## Line And Bar Props
| v1 prop | v2 status | Modern replacement |
| --- | --- | --- |
| `data.labels` | Supported in compat | `data` rows plus `xKey` |
| `data.datasets[].data` | Supported in compat | `yKey`, `yKeys`, or `series` |
| `data.legend` | Supported in compat | `legend` plus `series[].label` |
| `width` / `height` | Supported | Same props |
| `chartConfig.color` | Supported in compat | `theme.colors.series` or `series[].color` |
| `chartConfig.labelColor` | Supported in compat | `theme.colors.mutedText` |
| `chartConfig.strokeWidth` | Supported in compat | `strokeWidth` or `series[].strokeWidth` |
| `chartConfig.barPercentage` | Supported in compat | `barWidthRatio` |
| `bezier` | Supported with changed internals | `curve="monotone"` |
| `withDots` | Supported in compat | `showDots` or `series[].dot` |
| `withInnerLines` | Supported in compat | `showHorizontalGridLines` / `showVerticalGridLines` |
| `withOuterLines` | Compatibility only | Modern charts avoid hard plot borders by default |
| `formatXLabel` | Supported | Same prop |
| `formatYLabel` | Supported | Same prop |
| `fromZero` | Supported in compat | `yDomain={{ min: 0, max: "dataMax" }}` |
| `yAxisLabel` | Supported in compat | `formatYLabel` |
| `yAxisSuffix` | Supported in compat | `formatYLabel` |
| `verticalLabelRotation` | Supported in compat | `labelStrategy="rotate"` plus `labelRotation` |
| `horizontalLabelRotation` | Supported in compat | Prefer auto layout or custom label rendering |
## Modern Series Mapping
Before:
```tsx
import { LineChart } from "react-native-chart-kit";
const chartConfig = {
backgroundGradientFrom: "#ffffff",
backgroundGradientTo: "#ffffff",
color: () => "#2563eb"
};
"#2563eb", strokeWidth: 3 },
{ data: [8, 12], color: () => "#94a3b8", strokeWidth: 2 }
],
legend: ["Actual", "Target"]
}}
width={410}
height={220}
chartConfig={chartConfig}
/>;
```
After:
```tsx
```
## Chart Config Mapping
Move reusable styling into `ChartKitProvider` or a custom preset.
```tsx
import { ChartKitProvider, createChartPreset } from "react-native-chart-kit/v2";
const brand = createChartPreset({
light: {
background: "#ffffff",
plotBackground: "#ffffff",
grid: "#e5edf7",
text: "#0f172a",
mutedText: "#64748b",
series: ["#2563eb", "#0891b2", "#7c3aed"]
}
});
;
```
## Props Not Promised
Do not depend on:
- private `AbstractChart` internals
- exact SVG child order
- old clipping and padding bugs
- deep imports from implementation files
The legacy root `LineChart` preserves v6 point-slot spacing for existing overlays. Prefer the `x` and `y` coordinates supplied by `renderDotContent` and `onDataPointClick` when adding or updating custom point content.
If a legacy chart needs an unsupported behavior, keep it on the compatibility surface until there is an explicit modern extension point.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/migration/prop-mapping.md)
[Previous
Migrating From v1](https://chartkit.io/docs/react-native/migration/from-v1/)[Next
llms.txt](https://chartkit.io/llms.txt)
---
Source: https://chartkit.io/docs/react-native/troubleshooting
# Troubleshooting
## Chart Is Blank
Check that the chart has a real width and height. Most examples use fixed numbers because React Native charts cannot infer size from an unconstrained parent.
```tsx
```
If the chart is inside a flex layout, measure the parent with `onLayout` and pass the measured width to the chart.
## Expo Go Says The Demo App Is Incompatible
The Expo demo app lives in the public [`chart-kit/react-native-chart-kit-example`](https://github.com/chart-kit/react-native-chart-kit-example) repository and installs React Native Chart Kit from npm. If Expo Go cannot open that local app, update Expo Go, run `npm install` in the example repo, and start Expo with tunnel mode:
Terminal window
```sh
npm start -- --tunnel
```
## Gestures Do Not Work
Baseline tap, scrub, pan, pinch zoom, and range selector interactions use React Native responder APIs. They do not require `GestureHandlerRootView` or Reanimated.
When a chart lives inside a vertical scroll view, use chart interaction props that lock parent scrolling during the gesture, such as `viewportInteraction={{ pan: true, lockParentScroll: true }}` or range-selector interaction settings.
If an app has its own gesture system, keep chart selection controlled with `selectedIndex`, `viewport`, and `onViewportChange` so parent screens can coordinate dismissal, scrolling, and navigation.
## Labels Clip Or Overlap
Prefer the default `labelStrategy="auto"` before rotating labels manually. For dense charts:
- use `labelStrategy="skip"` for predictable intervals
- use `edgeLabelPolicy="shift"` to keep first and last labels inside the plot
- use `scrollable` and `visiblePoints` for long categorical datasets
- use `yAxisLabelWidth="stable"` when changing the viewport changes y-label length
## Tooltip Is Cut Off
Tooltips are rendered in an overlay above chart content and shifted into the visible viewport. If a custom tooltip clips:
- keep the chart wrapper height equal to the chart `height`
- avoid wrapping the chart in a parent with `overflow: "hidden"` unless intentional
- pass a realistic tooltip `width`
- prefer `positionAnimationDuration` for smooth movement between selected points
## Theme Does Not Apply
Themes flow from `ChartKitProvider`, but per-chart `theme`, `preset`, or explicit series colors win over provider values.
```tsx
```
If a chart keeps old colors after changing the provider, check for hardcoded `series[].color`, `upColor`, `downColor`, `fill`, or local `theme` overrides.
## Visual Snapshot Changed
Use the public [`chart-kit/react-native-chart-kit-example`](https://github.com/chart-kit/react-native-chart-kit-example) app for visual review when a renderer, layout, label, or theme change affects the preview screens. That app uses the npm package rather than a sibling checkout of this repository.
## Compatibility Chart Looks Different From v1
The legacy root import preserves common props, data shapes, and v6 `LineChart` point-slot spacing. It does not preserve old label-clipping bugs, exact SVG node order, or undocumented internals. The modern `/v2` charts intentionally use their own layout behavior.
Use [the v1 migration guide](https://chartkit.io/docs/react-native/migration/from-v1/) and [prop mapping](https://chartkit.io/docs/react-native/migration/prop-mapping/) to decide whether the chart should stay on the compatibility surface or move to the modern API.
## Range selector inside a native gesture detector
Use `react-native-chart-kit` 7.0.3 or later if the range-selector window jumps on Android while an ancestor uses `GestureDetector`. The range selector keeps the root-relative touch movement for each drag, so a changed native event target does not reset its local coordinate.
Keep `viewport` and `onViewportChange` connected as shown in the line chart guide. An ancestor native recognizer can still cancel a child responder. If a custom pinch handler also changes the viewport, coordinate the handlers so they do not write competing viewport updates during a range-selector drag. The `rangeSelector.onGestureStart` and `rangeSelector.onGestureEnd` callbacks can control that application state.
[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/troubleshooting.md)
[Previous
Accessibility](https://chartkit.io/docs/react-native/charts/accessibility/)[Next
Migrating From v1](https://chartkit.io/docs/react-native/migration/from-v1/)
---
Source: https://chartkit.io/
# Beautiful charts for React Native
Line, area, bar, pie, donut, progress, and contribution heatmaps for dashboards, reports, and data-rich mobile apps.
```
npm install react-native-chart-kit react-native-svg
```
Copy command
weekly downloads
140,000+
GitHub stars
3,000+
core license
MIT
chart types
7+
## Charts for every data view
Trends, comparisons, progress, heatmaps, scorecards, dashboards, and trading charts.
[
### Line Chart
](https://chartkit.io/docs/react-native/charts/line/)[
### Area Chart
](https://chartkit.io/docs/react-native/charts/area/)[
### Bar Chart
](https://chartkit.io/docs/react-native/charts/bar/)[
### Stacked Bar Chart
](https://chartkit.io/docs/react-native/charts/bar/#stacked-bars)[
### Pie Chart
](https://chartkit.io/docs/react-native/charts/pie/)[
### Donut Chart
](https://chartkit.io/docs/react-native/charts/donut/)[
### Progress Circle
](https://chartkit.io/docs/react-native/charts/progress/)[
### Contribution Heatmap
](https://chartkit.io/docs/react-native/charts/contribution-heatmap/)[
Pro
### Radar Chart
](https://chartkit.io/docs/react-native/charts/radar/)[
Pro
### Combo Chart
](https://chartkit.io/docs/react-native/charts/combo/)[
Pro
### Candlebar Chart
](https://chartkit.io/docs/react-native/charts/candlebar/)
### More charts
coming soon
[Read docs](https://chartkit.io/docs/react-native/charts/line)
## Beyond static charts
Let users tap, inspect, zoom, pan, and read richer datasets.
### Advanced chart types
Candlebar, combo, radar, and realtime charts for advanced analytics.
### Mobile data inspection
Tap selection, shared tooltips, and crosshairs for exact values.
### Viewport controls
Pan, zoom, scroll, visible ranges, and mini range selectors.
### Dashboard workflows
Mixed bars and lines, series toggles, and negative domains.
### Native renderer path
SVG by default, with an optional Skia renderer path for Pro.
### AI ready
Markdown docs, API schemas, and CLI access for coding agents.
## Pricing
Pick Free, Pro, or Enterprise. Pro pricing changes by developer count, app scope, and company size.
### Free
$0
MIT
MIT React Native charts for apps.
- Line, area, bar, stacked bar
- Pie, donut, progress rings
- Contribution calendar heatmap
- Themes, selection, accessibility helpers
[Read the docs](https://chartkit.io/docs/react-native/getting-started/installation)
### Chart Kit Pro
Startup license
Annual
$149
/ year
For small teams shipping one app.
- Up to 3 developers
- 1 production app
- Revenue/funding cap: $2M
- Standard email support
[Get Startup](https://buy.polar.sh/polar_cl_Lo2DzeNXDXbFkuvPr1ZDVREe9wXs9zsz3FvJF2ZjW9Z?product_id=f2a31f7f-5719-4103-8406-3caad5d14843)
### Enterprise
Custom
Larger teams, purchasing, and custom terms.
- 7+ developers or custom scope
- Multiple products or app families
- Custom terms and invoicing
- Affiliate or multi-team use
[Talk to sales](mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20Enterprise)
[Compare plan capabilities in the docs.](https://chartkit.io/docs/react-native/charts/pricing)
---
Source: https://chartkit.io/privacy
# Privacy policy
Privacy policy for Chart Kit websites, documentation, analytics, payments, support, and Chart Kit Pro license certificate services.
Last updated: July 1, 2026
## Who we are
Berman Digital Ltd, an Ontario, Canada company, operates Chart Kit. This policy explains how we collect, use, disclose, retain, and protect personal information for Chart Kit websites, documentation, checkout flows, support, free packages, paid Chart Kit Pro products, license certificate services, and related communications.
For privacy requests, contact[privacy@chartkit.io](mailto:privacy@chartkit.io). For legal questions, contact [legal@chartkit.io](mailto:legal@chartkit.io).
## Summary
- We use Google Analytics on ChartKit.io.
- We use Cloudflare for hosting, CDN, Workers, D1, R2, queues, email delivery, security, and operational logs.
- We use Polar for checkout, payments, subscriptions, customer records, receipts, refunds, and license-key data.
- We store customer and license certificate records in Cloudflare D1 and store generated license certificate PDFs in Cloudflare R2.
- We do not currently sell personal information, run ads, or run retargeting.
- We do not intentionally disclose personal information for cross-context behavioral advertising.
- We do not currently operate a newsletter, but may add product or marketing emails later with appropriate opt-out controls.
- Chart Kit is not directed to children.
## Information we collect
### Information you provide
- Contact details, such as name, email address, company name, and message contents when you contact support, sales, legal, or privacy addresses.
- Support context, such as screenshots, logs, code snippets, repositories, package versions, device details, or attachments you choose to send.
- Purchase and license details supplied through checkout, order forms, or support follow-up.
- Future email preferences if we add newsletter, product update, or marketing subscriptions.
### Payment and checkout information
Polar handles self-serve checkout and payment processing. We receive or store limited purchase records from Polar that may include customer ID, customer name, customer email, product ID, plan, order ID, subscription ID, benefit grant ID, license key ID, displayed license key, subscription status, term dates, refund status, and related metadata. We do not intentionally store full payment card numbers on Chart Kit systems.
### License certificate information
The current license service processes Polar webhooks and creates local license certificate records. Those records may include customer name, customer email, Polar customer ID, product ID, plan, order ID, subscription ID, benefit grant ID, license key ID, displayed license key, license status, term start, term end, certificate ID, certificate storage key, certificate sent timestamp, source order ID, certificate revision, last email message ID, last Polar event ID, metadata JSON, reconciliation timestamp, created timestamp, and updated timestamp.
The license service also stores Polar webhook delivery state in D1, including event ID, event type, received timestamp, webhook payload JSON, processing status, processed timestamp, error message, and retry count. Generated license certificate PDFs are stored in Cloudflare R2 and may be emailed to the purchaser.
### No current in-app license telemetry
The current implementation does not collect app identifiers, domains, package versions, production runtime events, or in-app license validation telemetry from applications using Chart Kit Pro. If we add license validation or telemetry later, we will update this policy before relying on that new collection.
### Website analytics and logs
ChartKit.io uses Google Analytics, which may collect or receive page views, events, browser and device details, referrers, approximate location derived from IP address, cookie identifiers, and similar usage information. Cloudflare may process request metadata such as IP address, URL, user agent, timestamps, security signals, cache events, and routing details to deliver and secure the website and services.
## How we use information
- Provide, operate, secure, debug, and improve Chart Kit websites, docs, checkout flows, license certificate services, and support.
- Process purchases, subscriptions, renewals, refunds, license certificates, and license status changes.
- Send transactional emails, including license certificates, setup details, receipts-related follow-up, support replies, and service notices.
- Respond to support, sales, privacy, and legal requests.
- Understand website usage, documentation engagement, and product demand.
- Prevent fraud, abuse, security incidents, unauthorized access, and license misuse.
- Maintain business records, enforce agreements, comply with law, and resolve disputes.
- Send future product or marketing communications if we add those channels and you have the required choice or consent.
## Legal bases for EU and UK users
If European or UK data protection law applies, we rely on these legal bases:
- **Contract:** to provide paid products, licenses, checkout support, certificates, documentation, and support you request.
- **Legitimate interests:** to secure, operate, improve, and understand the services, prevent abuse, respond to business inquiries, and maintain records.
- **Legal obligations:** to maintain tax, accounting, compliance, refund, dispute, and legal records.
- **Consent:** where required for optional analytics, cookies, newsletters, or marketing communications.
## How we disclose information
We disclose personal information only as needed for the services, business operations, compliance, and legal protection. Recipients may include:
- **Cloudflare:** hosting, CDN, Workers, D1, R2, Queues, email delivery, security, and operational logging.
- **Polar:** checkout, payments, customer records, subscriptions, tax, receipts, refunds, license keys, and related support.
- **Google Analytics:** website analytics and usage measurement.
- **Communications providers:** email delivery, inbound support mailboxes, and related message processing.
- **Professional advisors:** lawyers, accountants, auditors, insurers, and security advisors where needed.
- **Authorities or legal process:** when required by law or reasonably necessary to protect rights, safety, security, or the integrity of the services.
- **Business transfers:** in connection with a merger, acquisition, financing, restructuring, or sale of assets, subject to appropriate protections.
We do not currently sell personal information, run ads, or run retargeting. We do not intentionally disclose personal information for cross-context behavioral advertising.
## Cookies and analytics choices
Google Analytics and related tags may use cookies or similar technologies when you visit ChartKit.io. You can control cookies through your browser, device, extensions, or network tools. Google also provides information about its privacy practices at[policies.google.com/privacy](https://policies.google.com/privacy).
If we add a consent banner or additional analytics controls, we will use those controls to apply available choices. If you block cookies or analytics scripts, some measurement features may not work, but core documentation should remain available.
If we later configure analytics or other tools for advertising, retargeting, or similar features, we will update this policy and provide legally required choices.
## Retention
We keep information for as long as needed for the purposes described in this policy, unless a longer retention period is required or permitted by law. Current retention practices include:
| Record type | Retention |
| --- | --- |
| Purchase, subscription, refund, and license certificate records | Kept while Chart Kit or the related site/service exists, unless deletion is required by law and compatible with tax, accounting, dispute, and license-record obligations. |
| License service D1 records and Polar webhook event records | Kept while Chart Kit or the related site/service exists, because they support license status, certificate history, refunds, and customer support. |
| Generated license certificate PDFs | Kept while needed to provide certificates, prove license scope, support refunds or disputes, and maintain customer records. |
| Support, sales, legal, and privacy messages | Kept while Chart Kit or the related support system exists, unless deleted earlier after a valid request or operational cleanup. |
| Cloudflare operational logs and Google Analytics data | Kept according to the applicable Cloudflare and Google settings, service limits, and retention controls. |
## International transfers
Berman Digital Ltd is based in Canada. Service providers such as Cloudflare, Polar, Google, and email infrastructure providers may process information in Canada, the United States, Europe, or other countries. Where required, we rely on appropriate legal mechanisms for cross-border transfers.
## Security
We use technical and organizational safeguards designed to protect personal information, including reputable infrastructure providers, access controls, HTTPS, webhook verification, and operational monitoring. No system is perfectly secure. Please do not send payment card numbers, secrets, private keys, production credentials, or sensitive personal information through support unless we specifically request a secure transfer method.
## Your rights and choices
Depending on where you live, you may have rights to access, correct, delete, restrict, object to, or receive a copy of personal information. You may also have the right to withdraw consent, opt out of certain processing, or complain to a data protection authority.
California residents may have rights to know, access, correct, delete, limit certain uses, and opt out of sale or sharing of personal information. We do not currently sell personal information, run ads, or run retargeting. We do not intentionally disclose personal information for cross-context behavioral advertising.
To exercise rights, email[privacy@chartkit.io](mailto:privacy@chartkit.io). We may need to verify your identity and the account, order, email address, or license record connected to the request. Some information may be retained where required or permitted for tax, accounting, security, dispute, license integrity, or legal reasons.
## Children
Chart Kit is intended for developers and businesses. It is not directed to children under 16, and we do not knowingly collect personal information from children under 13. If you believe a child provided personal information to us, contact[privacy@chartkit.io](mailto:privacy@chartkit.io).
## Marketing
We do not currently operate a newsletter or marketing email list. If we add product update or marketing emails, we will provide required consent and unsubscribe controls. Transactional messages, such as license certificates, support replies, purchase-related notices, and security notices, may still be sent when needed to provide the services.
## Third-party links
The website and documentation may link to third-party sites, package registries, repositories, payment pages, and documentation. Their privacy practices are governed by their own policies. For example, Polar's privacy policy is available at[polar.sh/legal/privacy-policy](https://polar.sh/legal/privacy-policy), and Cloudflare's privacy policy is available at[cloudflare.com/privacypolicy](https://www.cloudflare.com/privacypolicy/).
## Changes
We may update this policy from time to time. The updated date above shows when the current version became effective. If we make material changes, we will take reasonable steps to notify users through the website, email, checkout flow, or another appropriate channel.
---
Source: https://chartkit.io/terms
# Terms of service
Terms for Chart Kit websites, documentation, free packages, paid Chart Kit Pro subscriptions, license certificates, and support.
Last updated: July 15, 2026
## Agreement
These terms of service are between you and Berman Digital Ltd, an Ontario, Canada company. They apply to Chart Kit websites, documentation, checkout pages, support, license certificate services, free packages, paid Chart Kit Pro products, and any related services that link to these terms.
By using the services, purchasing a license, or installing a paid Chart Kit Pro package for production use, you agree to these terms. If you use Chart Kit on behalf of a company, you represent that you have authority to bind that company.
Questions about these terms can be sent to[legal@chartkit.io](mailto:legal@chartkit.io). Privacy questions can be sent to[privacy@chartkit.io](mailto:privacy@chartkit.io).
## Products and licenses
The public `react-native-chart-kit` package is licensed under its MIT license. These terms do not reduce the rights granted by that open source license.
Chart Kit Pro, including `@chart-kit/pro` and Pro-only packages, is commercial software. Pro use is governed by the Chart Kit Pro Commercial License included with the Pro package, your applicable Polar order or subscription terms, and any separate written agreement signed by Berman Digital Ltd. If a separate written agreement conflicts with these terms, the written agreement controls for that conflict.
Pro packages may be publicly installable for evaluation. You may install and test Pro packages internally without buying first, but production use, customer-facing use, commercial deployment, or distribution in an application requires an active paid or written Chart Kit Pro license.
## Paid plans
Chart Kit Pro is currently sold as an annual subscription. Plan scope is shown on the pricing page, checkout page, receipt, license certificate, or written order. Current self-serve plans are:
| Plan | Scope | Price |
| --- | --- | --- |
| Solo | 1 developer, 1 production app, revenue or funding cap of $250k. | $49 / year |
| Startup | Up to 3 developers, 1 production app, revenue or funding cap of $2M. | $149 / year |
| Business | Up to 6 developers, up to 2 production apps, no revenue or funding cap. | $499 / year |
| Enterprise | Custom scope for larger teams, multiple products, purchasing workflows, or custom terms. | Custom |
Prices, plan names, features, and limits may change for future purchases or renewals. The checkout page or written order controls the amount due for a purchase. Taxes may be added where required.
## Checkout, renewals, and cancellations
Self-serve checkout is handled by Polar. Polar may collect payment, billing, tax, customer, and subscription information under its own terms and privacy policy.
Unless your order says otherwise, a paid Pro subscription runs for one year from the purchase date, subscription start date, or renewal date. Renewal requires successful payment or separate written authorization. If payment fails, is canceled, is refunded, or the term expires, the Pro license may become inactive, expired, revoked, or otherwise limited.
You are responsible for choosing the correct plan for your developer count, production application count, company size, and distribution model. Contact [sales@chartkit.io](mailto:sales@chartkit.io) before purchase if your use needs Enterprise, OEM, embedded, white-label, affiliate, resale, or customer-distributed rights.
## Refunds
You may request a refund for any reason within 30 days after purchase. Refund requests should be sent to[support@chartkit.io](mailto:support@chartkit.io) or handled through the applicable Polar support flow.
If a refund is issued, you may not keep using Chart Kit Pro under the refunded license. You must stop production use, remove Pro from active development and deployment workflows, and delete copies under your control unless a separate active license or written authorization covers that use. Refunded license keys and certificates may be revoked or marked inactive.
## Use restrictions
You must not:
- use Chart Kit Pro beyond the plan limits or term that apply to your order;
- redistribute, sell, sublicense, publish, rent, lease, or share Pro as a standalone package, library, toolkit, repository, or source distribution;
- make Pro available in a way that lets third parties extract, copy, install, or use it independently of your application;
- use Pro to build a competing charting library, charting toolkit, or charting component framework;
- remove proprietary notices, license notices, or copyright notices;
- interfere with the website, checkout, license certificate service, or support systems;
- attempt to bypass license, access, security, rate-limit, or abuse-prevention controls;
- upload malicious code, secrets, payment data, or unlawful content through support or contact channels.
## Support and updates
Support is provided by email unless your order says otherwise. Solo and Startup currently include standard email support. Business currently includes priority email support. Enterprise support is controlled by the written order or agreement.
Support does not include guaranteed response times, custom feature work, emergency coverage, implementation services, or compatibility with every third-party dependency unless those commitments are stated in writing. Updates, fixes, and package availability may change during the normal development of the product.
## Ownership and feedback
Berman Digital Ltd and its licensors retain all rights in Chart Kit Pro, the Chart Kit websites, documentation, branding, and commercial materials. You retain rights in your applications, data, and content.
If you send suggestions, feature requests, bug reports, or other feedback, Berman Digital Ltd may use that feedback without restriction or obligation to you.
## Third-party services
The services may depend on third-party platforms, including Cloudflare, Polar, Google Analytics, npm, GitHub, React, React Native, and related package ecosystems. Third-party services are governed by their own terms and privacy practices. Berman Digital Ltd is not responsible for third party services that it does not control.
## Warranty disclaimer
To the maximum extent permitted by law, the services, websites, documentation, free packages, paid packages, examples, support, and license certificate services are provided "as is" and "as available". Berman Digital Ltd disclaims all warranties, express, implied, statutory, or otherwise, including warranties of merchantability, fitness for a particular purpose, title, non-infringement, availability, accuracy, and uninterrupted operation.
## Limitation of liability
To the maximum extent permitted by law, Berman Digital Ltd will not be liable for indirect, incidental, special, consequential, exemplary, or punitive damages, or for lost profits, lost revenue, lost data, business interruption, or costs of substitute goods or services, arising out of or related to the services or these terms, even if advised of the possibility of those damages.
To the maximum extent permitted by law, Berman Digital Ltd's total aggregate liability arising out of or related to the services, these terms, or any applicable order will not exceed the amounts you paid to Berman Digital Ltd for the relevant Chart Kit product during the 12 months immediately before the event giving rise to the claim, or USD $100 if no amounts were paid. This section does not limit liability that cannot be limited by law.
## Indemnity
To the extent permitted by law, you agree to defend, indemnify, and hold Berman Digital Ltd harmless from claims, losses, liabilities, damages, costs, and expenses, including reasonable legal fees, arising from your breach of these terms, your misuse of the services, your applications, or your violation of law or third-party rights.
## Termination
You may stop using the services at any time. Berman Digital Ltd may suspend or terminate access to paid services, support, license certificates, downloads, or related systems if you breach these terms, fail to pay, exceed your license scope, create legal or security risk, or misuse the services.
Sections that by their nature should survive termination will survive, including ownership, restrictions, warranty disclaimers, limitation of liability, indemnity, governing law, and payment obligations.
## Governing law
These terms are governed by the laws of Ontario, Canada and the federal laws of Canada that apply there, without regard to conflict of law rules. Unless applicable law requires otherwise, disputes will be brought in the courts located in Ontario, Canada.
## Changes
Berman Digital Ltd may update these terms from time to time. The updated date above shows when the current version became effective. If a change materially affects paid Pro subscriptions, Berman Digital Ltd will take reasonable steps to provide notice through the website, checkout flow, email, or another appropriate channel.