An inspectable column chart with quiet gridlines, animated values and a text data alternative.
| Category | Value |
|---|---|
| Mon | 48 |
| Tue | 32 |
| Wed | 72 |
| Thu | 64 |
| Fri | 92 |
| Sat | 52 |
pnpm dlx shadcn@latest add @latheui/bar-chartPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Bar Chart is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| data* (required) | BarDatum[] | — | Unique category labels and numeric values. Positive and negative values are supported. |
| label* (required) | string | — | Chart title and accessible name. |
| formatValue | (value: number) => string | — | Axis, inspection and table formatting. |
Combine the control with your own layout. Semantic colors follow the active theme.
import * as React from "react"
import { BarChart } from "@/components/ui/bar-chart"
import { Button } from "@/components/ui/button"
export default function Demo(){const [compare,setCompare]=React.useState(false);return <div className="w-full max-w-lg space-y-4"><BarChart label="Weekly sign-ups" data={["Mon","Tue","Wed","Thu","Fri","Sat"].map((label,i)=>({label,value:(compare?[32,64,48,84,58,72]:[48,32,72,64,92,52])[i]}))}/><Button variant="outline" size="sm" onClick={()=>setCompare(!compare)}>Switch week</Button></div>}