Available nowReact
Bar chart
An accessible comparison chart with direct labels and quiet motion.
shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-bar-chart.jsonPreview
Live component behavior
Hover or focus a bar to inspect it.
Use it in context.
Copy the component into your project, then adapt the source to the interface around it.
TSXUsage example
import { MenaceBarChart } from "@/components/menace/bar-chart";
<MenaceBarChart
points={monthlyAdoption}
series={series}
title="Library adoption"
trend="+18.6%"
value="18,820"
/>API and behavior
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.