suiss/uim · Chart

Area Chart Interactive

A stock price card with a gradient area, a range switcher from one day to five years and key stats.

Area Chart Interactive is an open-source mobile chart from suiss/uim, drawn with react-native-svg for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

iOS
Area (interactive) on iOS in light mode

One price series drawn as a linear area with a fading gradient, a value axis on the right and a dashed ReferenceLine at the opening price. A ToggleGroup switches between 1D, 1W, 1M, 3M, 1Y and 5Y. Touching the plot reports the point through onActiveIndexChange, and the header updates the price, change and date for that point. The area turns green or red depending on whether the price is up or down, and open, high, low and volume sit below the chart. The area sets isAnimationActive={false}, so it draws without the enter animation and switches ranges instantly.

Installation

$ pnpm dlx @esuiss/uim@latest add area-chart-interactive

The CLI also adds what it builds on: Card, Chart, Text, Toggle Group.

Manual

  1. Install the dependencies:
npx expo install cn

  1. Add the pieces it builds on: Card, Chart, Text, Toggle Group.

  2. Copy the source into components/charts/area-chart-interactive.tsx:

uniwind/components/charts/area-chart-interactive.tsx
import { cn } from "cn"
import * as React from "react"
import { View } from "react-native"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  Area,
  AreaChart,
  CartesianGrid,
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ReferenceLine,
  XAxis,
  YAxis,
} from "@/components/ui/chart"
import { Text } from "@/components/ui/text"
  1. Update the import paths to match your project.

Usage

import { AreaChartInteractive } from "@/components/charts/area-chart-interactive"
<AreaChartInteractive />

Replace generate() with your price history for each range, and set the symbol, company name and LAST_PRICE. Volume values are hard-coded in stats. The component takes no props.