# rn-chart
URL: /docs/native/docyrus/chart

Comprehensive charting library with 13 chart types, VChart adapter, touch interactions, and animations.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-chart
```

**Dependencies:**
- [react-native-svg](https://www.npmjs.com/package/react-native-svg)

## Usage

```tsx
import { DocyLineChart } from '@/components/docyrus-native/chart';

const data = {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  series: [
    { name: 'Revenue', data: [30, 40, 35, 50, 49] },
    { name: 'Expenses', data: [20, 25, 30, 28, 32] }
  ]
};

```

## Chart Types

### Line Chart

```tsx
import { DocyLineChart } from '@/components/docyrus-native/chart';

```

### Bar Chart

```tsx
import { DocyBarChart } from '@/components/docyrus-native/chart';

```

### Pie Chart

```tsx
import { DocyPieChart } from '@/components/docyrus-native/chart';

```

### Area Chart

```tsx
import { DocyAreaChart } from '@/components/docyrus-native/chart';

```

### Scatter Chart

```tsx
import { DocyScatterChart } from '@/components/docyrus-native/chart';

```

### Radar Chart

```tsx
import { DocyRadarChart } from '@/components/docyrus-native/chart';

```

### Gauge Chart

```tsx
import { DocyGaugeChart } from '@/components/docyrus-native/chart';

```

### Funnel Chart

```tsx
import { DocyFunnelChart } from '@/components/docyrus-native/chart';

```

### Heatmap Chart

```tsx
import { DocyHeatmapChart } from '@/components/docyrus-native/chart';

```

### Treemap Chart

```tsx
import { DocyTreemapChart } from '@/components/docyrus-native/chart';

```

### Candlestick Chart

```tsx
import { DocyCandlestickChart } from '@/components/docyrus-native/chart';

```

### Sparkline Chart

```tsx
import { DocySparklineChart } from '@/components/docyrus-native/chart';

```

### Combo Chart (Bar + Line)

```tsx
import { DocyComboChart } from '@/components/docyrus-native/chart';

```

## VChart Adapter

The `DocyVChart` component accepts VChart-compatible spec format and renders the appropriate chart.

```tsx
import { DocyVChart } from '@/components/docyrus-native/chart';

```

## API Reference — Base Props

All chart components share these base props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `width` | `number` | screen width | Chart width in pixels |
| `height` | `number` | `300` | Chart height in pixels |
| `title` | `string` | — | Chart title text |
| `description` | `string` | — | Chart description text |
| `loading` | `boolean` | `false` | Show loading state |
| `error` | `string` | — | Error message to display |
| `className` | `string` | — | Additional CSS classes |
| `config` | `ChartConfig` | — | Axis, grid, legend, tooltip configuration |
| `animated` | `boolean` | `false` | Enable entry animations |
| `animationDuration` | `number` | `500` | Animation duration in milliseconds |
| `animationDelay` | `number` | `0` | Animation delay in milliseconds |

## API Reference — Touch Props

Charts with touch support (Line, Area, Combo) accept:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `showCrosshair` | `boolean` | `false` | Show crosshair line on touch |
| `showTooltip` | `boolean` | `false` | Show tooltip on touch |
| `tooltipComponent` | `(data: TooltipData) => ReactNode` | — | Custom tooltip renderer |
| `onTouch` | `(point: TooltipData \| null) => void` | — | Touch event callback |

## API Reference — Chart Config

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `padding` | `{ top, right, bottom, left }` | `{ 20, 20, 50, 50 }` | Chart SVG internal padding |
| `xAxis` | `ChartAxis` | — | X axis configuration |
| `yAxis` | `ChartAxis` | — | Y axis configuration |
| `grid` | `ChartGrid` | — | Grid line configuration |
| `legend` | `ChartLegend` | — | Legend position and alignment |
| `tooltip` | `ChartTooltip` | — | Tooltip formatting |

## Components

| Component | Description |
|-----------|-------------|
| `DocyLineChart` | Line chart with smooth curves, area fill, crosshair |
| `DocyBarChart` | Vertical/horizontal bar chart with stacking |
| `DocyPieChart` | Pie/donut chart with labels |
| `DocyAreaChart` | Stacked area chart with smooth curves |
| `DocyScatterChart` | Scatter plot with grid |
| `DocyRadarChart` | Radar/spider chart |
| `DocyGaugeChart` | Semicircular gauge with value display |
| `DocyFunnelChart` | Funnel/pyramid chart with labels |
| `DocyHeatmapChart` | Color-encoded matrix chart |
| `DocyTreemapChart` | Proportional rectangle layout |
| `DocyCandlestickChart` | OHLC financial chart with volume |
| `DocySparklineChart` | Inline mini chart (no axes) |
| `DocyComboChart` | Combined bar + line chart |
| `DocyVChart` | VChart spec adapter |

## Core Sub-Components

| Component | Description |
|-----------|-------------|
| `DocyChartAxis` | Axis labels and ticks |
| `DocyChartGrid` | Background grid lines |
| `DocyChartLegend` | Color legend with series names |
| `DocyChartCrosshair` | Touch crosshair overlay |
| `DocyChartTooltip` | Floating data tooltip |

## Hooks

| Hook | Description |
|------|-------------|
| `useChartAnimation` | Returns animated progress value (0 → 1) for chart transitions |
| `useChartTouch` | Pan responder for crosshair and tooltip interactions |

## Type Exports

| Type | Description |
|------|-------------|
| `LineChartProps` | Props for DocyLineChart |
| `BarChartProps` | Props for DocyBarChart |
| `PieChartProps` | Props for DocyPieChart |
| `AreaChartProps` | Props for DocyAreaChart |
| `ScatterChartProps` | Props for DocyScatterChart |
| `RadarChartProps` | Props for DocyRadarChart |
| `GaugeChartProps` | Props for DocyGaugeChart |
| `FunnelChartProps` | Props for DocyFunnelChart |
| `HeatmapChartProps` | Props for DocyHeatmapChart |
| `TreemapChartProps` | Props for DocyTreemapChart |
| `CandlestickChartProps` | Props for DocyCandlestickChart |
| `SparklineChartProps` | Props for DocySparklineChart |
| `ComboChartProps` | Props for DocyComboChart |
| `DocyVChartProps` | Props for DocyVChart adapter |
| `ChartConfig` | Chart configuration object |
| `ChartData` | Generic chart data type |
| `ChartSeries` | Series data definition |
| `TooltipData` | Tooltip callback data |
| `VChartSpec` | VChart-compatible spec type |