Components
Mix areas, lines, and bars in one chart with dual axes, reference lines, peak markers, and hatched bars.
"use client"
import { ComposedChart } from "@/components/ui/composed-chart"Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/composed-chart.jsonAlso installs chart from shadcn/ui if missing.
Usage#
import { ComposedChart } from "@/components/ui/composed-chart"
<ComposedChart
data={data}
xKey="month"
series={[
{ key: "sales", label: "Sales", type: "area", highlightMax: true },
{ key: "goal", label: "Goal", type: "line", dashed: true },
]}
referenceLines={[{ y: 50000, label: "Target" }]}
showYAxis
/>Examples#
Dual axis#
Give a series axis: "right" to plot it against a second y-axis.
"use client"
import { ComposedChart } from "@/components/ui/composed-chart"Grouped and hatched bars#
Bars group side by side unless they share a stackId. pattern: "hatched" fills a bar with diagonal lines.
"use client"
import { ComposedChart } from "@/components/ui/composed-chart"Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.