Data displayFree component
Bar chart
A bar chart for comparing values, with direct labels, selectable bars, and reduced-motion support. Use it to show totals across categories.
Preview
Open previewInstallation
Add bar chart to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-bar-chart.jsonUsage
TSXUsage example
import { MenaceBarChart } from "@/components/menace/bar-chart";
<MenaceBarChart
points={monthlyAdoption}
series={series}
title="Library adoption"
trend="+18.6%"
value="18,820"
/>Props
Key options and their defaults.
points / seriesrequired- Ordered chart periods and their series definitions.
valueFormattertoLocaleString- Formats interactive labels, detail values, and table cells.
defaultHiddenSeries[]- Series hidden on first render.
onPointSelectundefined- Receives the selected point, series, and numeric value.
- Every bar is a keyboard-accessible button with its period, series, and value in the accessible name.
- Legend controls can hide series while always preserving at least one visible comparison.
- An assistive-only data table mirrors the full chart and animation collapses for reduced motion.