Skip to content

Chart

Recharts-based building blocks — a themed container, tooltip, and legend that pull series labels and colors from a single chart config.

Chart

Revenue

Subscriptions and orders, January – December

Installation

pnpm dlx shadcn@latest add @sortui/chart

Usage

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
} from "@/components/ui/chart"

Examples

Weekly average

13–19 Oct average

2h 35min

Total listening time18h 2min

Music
8h 31min
Podcasts
4h 25min
Audiobooks
2h 58min
Other
2h 8min

Multiple series

Orders

Delivery and pickup, January – December

  • Delivery
  • Pickup

Capped

Sign-ups

New accounts, January – June

Horizontal

Top destinations

Trips booked this year

Line with tooltip

Active users

Daily average per week, January – June

Multiple lines

Sessions

Web and iOS per week, January – June

  • Web
  • iOS

Step area

Deploys

Production releases, January – June

Activity rings

Messages
1h 24min
Video
1h 18min
Music
1h 6min
Games
1h 10min
Reading
0h 42min
Work
1h 35min

Radial

Daily goal

Steps walked today

2,760 steps to go — about a 25-minute walk.

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access