Search

Search components and blocks

Sign in

Chart

Bar charts

Open page

Recharts on shadcn's chart wrapper: basic, patterned, dithered, gradient and 3D bars that grow in on mount and react to hover. Each takes the same props: data, seriesLabel, color and className; the striped and solid chart takes stripedLabel and solidLabel instead, the loading state swaps skeleton bars for the real chart once data arrives, and the dual axis chart reads its two series against a left and a right y-axis. Every demo sits in a story card (title, trend badge, description) so you can see the chart in context.

Site Visitors

12%

Unique visitors per month

Basic bar chart
Bar chart loading state

Weekly Sessions

7%

Average sessions per active user

Diagonal stripe bar chart

Support Tickets

-8%

Tickets opened each month

Crosshatch bar chart

User Acquisition

-15%

Quarterly user growth tracking

Striped and solid bar chart

Revenue vs Conversion

11%

Monthly revenue against checkout conversion

Dual axis bar chart

Monthly Revenue

24%

Recurring revenue in thousands

Gradient bar chart

App Downloads

9%

New installs across both stores

3D gradient bar chart

API Requests

5%

Requests served per month

Dither bar chart

Area charts

Open page

A linear area chart with straight segments and a gradient fill, a step area chart that holds each value flat until the next (plain and striped), and a stacked area chart filled with a crosshatch pattern in each series' color. The stacked one takes a series list of { key, label, color } instead of one color; hover a layer and the others dim.

Daily Active Users

14%

Users who opened the app each month

Linear area chart

Active Subscriptions

6%

Paid seats, which only change on a plan event

Step area chart

Stock on Hand

-4%

Units in the warehouse, updated on each restock or sale batch

Striped step area chart

Traffic Sources

18%

Visits by channel, stacked

Crosshatch stacked area chart

Pie charts

Open page

Pie charts that sweep in on mount: a plain pie with a legend, where hovering a slice pops it out and dims the rest. Each takes data, colors and className.

Pie chart

When to use the chart

Use the charts for dashboards and reports. Bar, area and pie variants are themed with your Tailwind tokens and animate in.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components