Home / Components / charts

ChartsiOS

Dependency-free charts: animated BarChart and a two-half-circle ProgressRing built from plain Views + Reanimated (no Skia/SVG)

$ npx lumioui add charts

import { BarChart, ProgressRing } from "@/components/ui/charts/charts";

Parts: BarChart · ProgressRing

Props13

BarChart
data	BarDatum[]
height?	number	Chart height in px. Default 160.
color?	string	Bar color (hex). Defaults to theme primary (`bg-primary` class).
palette?	string[]	Per-bar hex palette, cycled by index. For theme chart colors prefer per-datum `barClassName` (`bg-chart-1..5`) — classes stay on the NativeWind path; hexes are for genuinely arbitrary fills.
showValues?	boolean	Show value above each bar. Default true.
className?	string
ProgressRing
progress	number	0–1 fill fraction.
size?	number	Outer diameter in px. Default 120.
thickness?	number	Ring thickness in px. Default 12.
color?	string	Fill color (hex). Defaults to theme primary.
trackColor?	string	Track color (hex). Defaults to theme muted.
children?	React.ReactNode	Center content (e.g. a percentage Text).
className?	string

Charts — Barbar.tsx

charts/variants/bar.tsx open

Dependency-free charts: animated BarChart and a two-half-circle ProgressRing built from plain Views + Reanimated (no Skia/SVG)

import { ChartsBar } from "@/components/ui/charts/variants/bar";

export function Example() {
  return (
    <ChartsBar />
  );
}

import * as React from "react";
import { View } from "react-native";
import { BarChart } from "../charts";
import { Ambient, Glass, Text } from "@lumioui/ui";

/** ChartsBar — weekly bars colored by day-type via the theme chart palette. */
export function ChartsBar() {
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="charts-bar" />
      <View className="w-full gap-3 p-4">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <Text variant="small" className="font-semibold">Lumo Wallet — dining spend this week</Text>
          <BarChart
            height={140}
            data={[
              { label: "Mon", value: 42, barClassName: "bg-chart-1" },
              { label: "Tue", value: 68, barClassName: "bg-chart-1" },
              { label: "Wed", value: 35, barClassName: "bg-chart-1" },
              { label: "Thu", value: 89, barClassName: "bg-chart-1" },
              { label: "Fri", value: 124, barClassName: "bg-chart-1" },
              { label: "Sat", value: 96, barClassName: "bg-chart-3" },
              { label: "Sun", value: 58, barClassName: "bg-chart-3" },
            ]}
          />
          <View className="flex-row items-center justify-center gap-4">
            <View className="flex-row items-center gap-1.5">
              <View className="h-2.5 w-2.5 rounded-full bg-chart-1" />
              <Text variant="muted">Weekday</Text>
            </View>
            <View className="flex-row items-center gap-1.5">
              <View className="h-2.5 w-2.5 rounded-full bg-chart-3" />
              <Text variant="muted">Weekend</Text>
            </View>
            <Text variant="muted" className="tabular-nums">Total $512.00</Text>
          </View>
        </Glass>
      </View>
    </View>
  );
}

Charts — Ringring.tsx

charts/variants/ring.tsx open

Dependency-free charts: animated BarChart and a two-half-circle ProgressRing built from plain Views + Reanimated (no Skia/SVG)

import { ChartsRing } from "@/components/ui/charts/variants/ring";

export function Example() {
  return (
    <ChartsRing />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ProgressRing } from "../charts";
import { Ambient, Glass, Text } from "@lumioui/ui";

/** ChartsRing — masked half-ring progress indicator. */
export function ChartsRing() {
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="charts-ring" />
      <View className="w-full gap-3 p-4">
        <Glass interactive curvature="edge" className="w-full items-center gap-3 rounded-2xl p-4">
          <ProgressRing progress={0.65} size={120}>
            <Text variant="large">65%</Text>
          </ProgressRing>
          <Text variant="muted" className="text-center">
            Kyoto savings goal — $2,780 of $4,280.50
          </Text>
        </Glass>
      </View>
    </View>
  );
}