Components
Bar Chart
A hand-drawn bar chart with hachure-filled bars and animated mount.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/bar-chart.jsonProps
PropTypeDefaultDescription
animateOnMountbooleantrueAnimates the component when it first renders.
axisLabelstring—
Controls the `axisLabel` behavior.
data*BarChartDataPoint[]—
Data used to render the component.
formatValue(v: number) => string—
Formats the displayed numeric value.
heightnumber240Sets the rendered height in pixels.
idstring—
Optional stable id used for sketch seeding and accessibility.
showGridbooleantrueShows background grid lines.
showValuesbooleantrueControls the `showValues` behavior.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Custom colors and format
Per-bar colors via the color field. formatValue must come from a client component — it cannot be an inline arrow function in MDX.
Accessibility
Charts are visual summaries, so do not rely on them as the only place important numbers appear. Provide nearby text or a data table when exact values matter for decision-making.
Examples
import { BarChart } from "@/components/crumble/ui/bar-chart";
<BarChart
data={[
{ label: "Mon", value: 40 },
{ label: "Tue", value: 65 },
{ label: "Wed", value: 55 },
{ label: "Thu", value: 80 },
{ label: "Fri", value: 70 },
]}
/>;