Chart Composed

Composed charts overlay more than one geometry on the same axes. ChartComposed draws a filled area behind a line, useful for forecast or target zones.

Forecast

A striped area zone behind a natural line, with a legend.

Dark previewReplay previewOpen in new tab

Usage

Import the parts you need from the component's folder.

ts
import { ChartComposed } from "@/components/ui/chart";

API Reference

ChartComposed

PropTypeDefaultDescription
dataRecord<string, any>[]—Series rows.
configChartConfig—Map of key → { label, color }.
xKeystring"month"Row key for the category axis.
areaKeystring"area"Row key plotted as the filled area.
lineKeystring"value"Row key plotted as the line.
areaFillstring"var(--chart-1)"Area fill (often a url(#pattern)).
svgDefsstringnullRaw SVG <defs> string (patterns/gradients).
curveTypestring"natural"Curve interpolation.
legendbooleanfalseRender a legend below the chart.