dashboardcn

Search documentation

Search for a page or component.

Composed Chart

PreviousNext

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"

A composed chart for shadcn/ui that mixes areas, lines, and bars in one plot, with a second y-axis for series on different scales, reference lines, peak markers, and hatched bars for forecast or projected values.

Installation

pnpm dlx shadcn@latest add @dashboardcn/composed-chart

Also 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"