@platform-blocks/charts
[](https://github.com/platform-blocks/platform-blocks/blob/HEAD/LICENSE)
[](https://www.npmjs.com/package/@platform-blocks/charts)
[](https://discord.gg/kbHjwzgXbc)
Data visualization components for React Native and React Native Web. Part of the [Platform Blocks](https://platform-blocks.com/) ecosystem.
## Features
- **25 chart types** — Bar, Line, Area, Pie, Scatter, Radar, Heatmap, Candlestick, Funnel, Donut, Gauge, Sparkline, and more
- **Animated** — Smooth transitions powered by `react-native-reanimated`
- **Interactive** — Built-in tooltips, popovers, pan & zoom, and streaming data support
- **Accessible** — Screen reader support via the `ChartAccessibility` layer
- **Themeable** — Full theming via `ChartThemeContext`
- **Cross-platform** — Works on iOS, Android, and Web
- **Tree-shakeable** — ESM and CJS builds with no side effects
## Installation
```bash
npm install @platform-blocks/charts
```
### Peer dependencies
Ensure the following are installed in your project:
| Package | Version |
| --- | --- |
| `react` | `>=18.0.0 <20.0.0` |
| `react-native` | `>=0.73.0` |
| `react-native-reanimated` | `>=3.4.0` |
| `react-native-svg` | `>=13.0.0` |
| `react-dom` *(optional — web only)* | `>=18.0.0 <20.0.0` |
## Quick start
```tsx
import { AreaChart } from '@platform-blocks/charts';
export function RevenueChart({ data }) {
return (
);
}
```
## Available charts
| Chart | Component |
| --- | --- |
| Area | `AreaChart` |
| Bar | `BarChart` |
| Bubble | `BubbleChart` |
| Candlestick | `CandlestickChart` |
| Combo | `ComboChart` |
| Donut | `DonutChart` |
| Funnel | `FunnelChart` |
| Gauge | `GaugeChart` |
| Grouped Bar | `GroupedBarChart` |
| Heatmap | `HeatmapChart` |
| Histogram | `HistogramChart` |
| Line | `LineChart` |
| Marimekko | `MarimekkoChart` |
| Network | `NetworkChart` |
| Pareto | `ParetoChart` |
| Pie | `PieChart` |
| Radar | `RadarChart` |
| Radial Bar | `RadialBarChart` |
| Ridge | `RidgeChart` |
| Sankey | `SankeyChart` |
| Scatter | `ScatterChart` |
| Sparkline | `SparklineChart` |
| Stacked Area | `StackedAreaChart` |
| Stacked Bar | `StackedBarChart` |
| Violin | `ViolinChart` |
## Hooks
| Hook | Description |
| --- | --- |
| `useChartAnimation` | Animation timing and transitions |
| `useChartData` | Data management and updates |
| `useDataDecimation` | Optimize rendering of large datasets |
| `useDomains` | Calculate value ranges |
| `useChartPointer` | Normalized pointer events + hit-testing for interaction |
| `usePanZoom` | Pan and zoom gesture handling |
| `useStreamingData` | Handle real-time data feeds |
## Shared tooltip provider
When you need multiple charts to share a single tooltip, wrap them in `ChartsProvider` and set `useOwnInteractionProvider={false}` on each chart:
```tsx
import { ChartsProvider, BarChart, LineChart } from '@platform-blocks/charts';
export function Dashboard() {
return (
);
}
```
## Documentation
Full documentation, interactive examples, and API reference are available at [platform-blocks.com](https://platform-blocks.com).
- [Getting started](https://platform-blocks.com/getting-started)
- [Charts](https://platform-blocks.com/charts)
- [llms.txt](https://platform-blocks.com/llms.txt) — Full API reference for LLMs and AI assistants
## Contributing
See the [contributing guide](https://github.com/platform-blocks/platform-blocks/blob/main/CONTRIBUTING.md) for setup instructions.
## License
[MIT](https://github.com/platform-blocks/platform-blocks/blob/main/LICENSE) © [Josh Stovall](https://github.com/joshstovall)