Components
Line Chart
A hand-drawn line chart with Catmull-Rom curves and animated draw-on.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/line-chart.jsonProps
PropTypeDefaultDescription
animateOnMountbooleantrueAnimates the component when it first renders.
formatValue(v: number) => string—
Formats the displayed numeric value.
formatX(i: number) => string—
Formats X-axis labels.
heightnumber240Sets the rendered height in pixels.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelsstring[]—
Labels used by the component.
series*LineChartSeries[]—
Series data used to render the component.
showDotsbooleantrueShows point markers for each chart value.
showGridbooleantrueShows background grid lines.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Multiple series
Without dots
Accessibility
LineChart is best treated as a visual aid rather than the only source of truth. Include a textual summary or supporting table if exact values and trends need to be accessible.
Examples
import { LineChart } from '@/components/crumble/ui/line-chart'
<LineChart
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
series={[{ id: "revenue", label: "Revenue", data: [40, 65, 55, 80, 70, 90] }]}
/>