Data visualization components for React Native and React Native Web. Part of the Platform Blocks 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

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

import { AreaChart } from '@platform-blocks/charts';

export function RevenueChart({ data }) {
  return (
    <AreaChart
      width={320}
      height={220}
      data={data}
      xKey="month"
      yKey="value"
    />
  );
}

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 | | useNearestPoint | Find the closest data point for tooltips | | usePanZoom | Pan and zoom gesture handling | | useStreamingData | Handle real-time data feeds | | useTooltipAggregator | Multi-series tooltip aggregation |

Shared tooltip provider

When you need multiple charts to share a single tooltip, wrap them in ChartsProvider and set useOwnInteractionProvider={false} on each chart:

import { ChartsProvider, BarChart, LineChart } from '@platform-blocks/charts';

export function Dashboard() {
  return (
    <ChartsProvider>
      <BarChart useOwnInteractionProvider={false} /* ... */ />
      <LineChart useOwnInteractionProvider={false} /* ... */ />
    </ChartsProvider>
  );
}

Documentation

Full documentation, interactive examples, and API reference are available at platform-blocks.com.

• Getting started
• Interactive examples
• Charts
• llms.txt — Full API reference for LLMs and AI assistants

Contributing

See the contributing guide for setup instructions.

License

MIT © Josh Stovall