Search

Search components and blocks

Sign in

Bar Chart

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