Charts & Data Visualization

VibeFast ships with ready-to-go chart components built on @shopify/react-native-skia, d3-shape, and Reanimated so you can render bar, line, donut, and pie visuals with smooth animations.

Where the code lives

• Mobile entry: apps/native/src/app/(root)/(protected)/charts/index.tsx renders the demo screen and sample datasets.
• Feature folder: apps/native/src/features/charts contains reusable components, data fixtures, and the use-theme-config wiring.
• Shared types & helpers: apps/native/src/features/charts/types defines props, and data supplies sample datasets you can replace with real metrics.

Customizing charts

• Use BarChart, LineChart, PieChart, or DonutChart components directly; they accept props like data, height, valueFormatter, and showLegend.
• All charts consume useThemeConfig so colors follow your theme tokens (theme.colors.primary, theme.colors.foreground, etc.).
• Swap the sample data (apps/native/src/features/charts/data) with backend queries to show real-time figures.

The components already handle layout, spacing, and touch interactions.

Bringing it into your screens

Drop the chart components anywhere you need a dashboard:

import { BarChart } from "@/features/charts/components/bar-chart";

<BarChart
  data={liveData}
  height={320}
  showGrid
  valueFormatter={(value) => `$${value}`}
/>;

If you need a new chart type, copy the existing component and follow the same useThemeConfig + Canvas pattern.

CLI support

Run vf add charts to install the chart feature if it is not in your current project.