This is documentation for the next SDK version.

Chart

A SwiftUI Chart component for displaying data visualizations using Swift Charts.

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Expo UI Chart wraps Apple's Swift Charts framework, and supports rendering line, point, bar, area, pie, and rectangle charts with reference lines.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Line chart

LineChartExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function LineChartExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="line"
        data={[
          { x: 'Jan', y: 15 },
          { x: 'Feb', y: 25 },
          { x: 'Mar', y: 18 },
          { x: 'Apr', y: 32 },
        ]}
      />
    </Host>
  );
}

Bar chart

BarChartExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function BarChartExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="bar"
        data={[
          { x: 'Q1', y: 75 },
          { x: 'Q2', y: 85 },
          { x: 'Q3', y: 65 },
          { x: 'Q4', y: 95 },
        ]}
        showLegend
      />
    </Host>
  );
}

Pie chart

Pie charts require iOS 17 and later, or tvOS 17 and later. On older versions, the chart shows no slices.

PieChartExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function PieChartExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="pie"
        data={[
          { x: 'Direct', y: 45 },
          { x: 'Social', y: 30 },
          { x: 'Email', y: 25 },
        ]}
        pieStyle={{ innerRadius: 0.5, angularInset: 2 }}
        showLegend
      />
    </Host>
  );
}

Point and area charts

PointAreaExample.tsx

import { Host, Chart, VStack } from '@expo/ui/swift-ui';
import { frame } from '@expo/ui/swift-ui/modifiers';

const data = [
  { x: 0, y: 10 },
  { x: 1.5, y: 25 },
  { x: 3, y: 18 },
  { x: 4.5, y: 32 },
];

export default function PointAreaExample() {
  return (
    <Host style={{ flex: 1 }}>
      <VStack spacing={16}>
        <Chart
          type="point"
          data={data}
          pointStyle={{ pointStyle: 'diamond', pointSize: 8 }}
          modifiers={[frame({ height: 150 })]}
        />
        <Chart
          type="area"
          data={data}
          areaStyle={{ color: '#10B981' }}
          modifiers={[frame({ height: 150 })]}
        />
      </VStack>
    </Host>
  );
}

Per-point colors

Set color on a data point to choose its color in bar, pie, point, and rectangle charts. line and area charts ignore it. In bar and pie charts, any per-point color turns off the automatic category colors and the legend.

PerPointColorExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function PerPointColorExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="bar"
        data={[
          { x: 'Mon', y: 20, color: '#4A90E2' },
          { x: 'Tue', y: 22, color: '#50C8D8' },
          { x: 'Wed', y: 18, color: '#5AD67D' },
        ]}
      />
    </Host>
  );
}

Reference lines

Use referenceLines to draw a horizontal rule at each entry's y value, for example to highlight a target or average value. The chart does not draw an entry's x value, but each entry needs a unique x. Style the rules with ruleStyle.

ReferenceLinesExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function ReferenceLinesExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="line"
        data={[
          { x: 'Jan', y: 15 },
          { x: 'Feb', y: 25 },
          { x: 'Mar', y: 18 },
          { x: 'Apr', y: 32 },
        ]}
        referenceLines={[{ x: 'Average', y: 22.5 }]}
        ruleStyle={{
          color: '#FF6B6B',
          lineWidth: 2,
          dashArray: [5, 5],
        }}
      />
    </Host>
  );
}

Styling and animation

Pass showGrid, showLegend, and animate to control the chart's appearance, and use the per-type style props (lineStyle, barStyle, pieStyle, and so on) to customize individual mark types.

StyledChartExample.tsx

import { Host, Chart } from '@expo/ui/swift-ui';

export default function StyledChartExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Chart
        type="line"
        data={[
          { x: 'Jan', y: 15 },
          { x: 'Feb', y: 25 },
          { x: 'Mar', y: 18 },
          { x: 'Apr', y: 32 },
        ]}
        showGrid={false}
        animate={false}
        lineStyle={{
          color: '#6366F1',
          width: 3,
          dashArray: [5, 5],
          pointStyle: 'square',
          pointSize: 8,
        }}
      />
    </Host>
  );
}

API

import { Chart } from '@expo/ui/swift-ui';

Component

`Chart`

iOS 16.0+

tvOS 16.0+

Type: React.Element<ChartProps & { style: StyleProp<ViewStyle> }>

Renders a native Chart component using Swift Charts.

ChartProps

`animate`

iOS 16.0+

tvOS 16.0+

Optional • Type: boolean

Whether to animate chart changes.

`areaStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: AreaChartStyle

Area chart specific styling options.

`barStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: BarChartStyle

Bar chart specific styling options.

`data`

iOS 16.0+

tvOS 16.0+

Type: ChartDataPoint[]

Array of data points to display.

`lineStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: LineChartStyle

Line chart specific styling options.

`pieStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: PieChartStyle

Pie chart specific styling options.

`pointStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: PointChartStyle

Point chart specific styling options.

`rectangleStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: RectangleChartStyle

Rectangle chart specific styling options.

`referenceLines`

iOS 16.0+

tvOS 16.0+

Optional • Type: ChartDataPoint[]

Optional reference lines to overlay on the chart as rule marks.

`ruleStyle`

iOS 16.0+

tvOS 16.0+

Optional • Type: RuleChartStyle

Rule mark specific styling options.

`showGrid`

iOS 16.0+

tvOS 16.0+

Optional • Type: boolean

Whether to show grid lines.

`showLegend`

iOS 16.0+

tvOS 16.0+

Optional • Type: boolean

Whether to show chart legend.

Only works when individual dataPoint colors are NOT provided (uses categorical styling)
Useful for bar and pie charts (shows category colors)
Not applicable for line and area charts (single-series data)
If dataPoint has individual colors, legend won't appear - use data without colors to see legend

`type`

iOS 16.0+

tvOS 16.0+

Optional • Type: ChartType

Type of chart to render.

Inherited props

CommonViewModifierProps

Types

`AreaChartStyle`

iOS

tvOS

Area chart specific styling options.

Property	Type	Description
color(optional)	`ColorValue`	Area fill color.

`BarChartStyle`

iOS

tvOS

Bar chart specific styling options.

Property	Type	Description
cornerRadius(optional)	`number`	Corner radius for rounded bar corners.
width(optional)	`number`	Custom bar width.

`ChartDataPoint`

iOS

tvOS

Data point for the chart.

Property	Type	Description
color(optional)	`ColorValue`	Optional color for this specific data point.
x	`string \| number`	X-axis value (can be a label string or numeric value).
y	`number`	Y-axis value (numeric).

`ChartType`

iOS

Literal type: string

The type of chart to display.

line charts show continuous lines with optional dash array, width, point symbols, and color.
point charts show discrete colored points with optional point style (circle, square, diamond) and size.
bar charts show vertical bars using system colors or individual ChartDataPoint colors, with optional corner radius and width styling.
area charts show filled areas under lines with color.
pie charts show pie slices with optional inner radius and angular inset. Pie charts require iOS 17.0+.
rectangle charts show rectangular data visualization.

`LineChartStyle`

iOS

tvOS

Line chart specific styling options.

Property	Type	Description
color(optional)	`ColorValue`	Line color.
dashArray(optional)	`number[]`	Dash pattern array. Empty array or undefined for solid lines. Example `[5, 5] for dashed line, [2, 2] for dotted line`
pointSize(optional)	`number`	Point symbol size.
pointStyle(optional)	`PointStyle`	Point symbol style.
width(optional)	`number`	Line stroke width.

`PieChartStyle`

iOS

tvOS

Pie chart specific styling options.

Property	Type	Description
angularInset(optional)	`number`	Space between slices in points.
cornerRadius(optional)	`number`	Corner radius of each slice in points. On a donut, half the ring's thickness gives fully rounded ends. Default:`0`
innerRadius(optional)	`number`	Inner radius ratio (0.0 = full pie, 0.5 = donut).
opacity(optional)	`number`	Opacity of each slice, from 0 to 1. Default:`0.8`

`PointChartStyle`

iOS

tvOS

Point chart specific styling options.

Property	Type	Description
pointSize(optional)	`number`	Point symbol size.
pointStyle(optional)	`PointStyle`	Point symbol style.

`PointStyle`

iOS

tvOS

Literal type: string

Point symbol style options.

Acceptable values are: 'circle' | 'square' | 'diamond'

`RectangleChartStyle`

iOS

tvOS

Property	Type	Description
color(optional)	`ColorValue`	Color of the rectangle.
cornerRadius(optional)	`number`	Corner radius of the rectangle.

`RuleChartStyle`

iOS

tvOS

Property	Type	Description
color(optional)	`ColorValue`	Color of the rule line.
dashArray(optional)	`number[]`	Dash pattern array for the rule line.
lineWidth(optional)	`number`	Line width of the rule.