Area Chart visualizes quantitative data with filled areas under the line, supporting the same analytical layout types as Line Chart with RTL support.
Loading demo: area-chart-real-world
npx sdaia-ui@latest add area-chart
import { AreaChart } from "@/components/ui/area-chart"<AreaChart type="insight" />Area chart highlighting key data insights with shaded regions.
Loading demo: area-chart-insight
Area chart with multiple series for side-by-side data comparison.
Loading demo: area-chart-detailed-comparison
Area chart focused on a single performance metric over time.
Loading demo: area-chart-metric
Compact area chart providing a high-level data summary.
Loading demo: area-chart-summary
Props for the AreaChart component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'Insight' | 'Detailed Comparison' | 'Metric' | 'Summary' | 'Insight' | optional |
xAxisData | XAxisDataType | '7 Week Days' | optional |
dir | 'ltr' | 'rtl' | — | optional |
rtl | boolean | false | optional |
height | number | — | optional |
kpiLabel | ReactNode | 'Indicator Name' | optional |
kpiValue | ReactNode | '422.61' | optional |
badgeType | ChartBadgeType | 'increase' | optional |
badgeValue | ReactNode | '12%' | optional |
tabs | HorizontalTabItem[] | — | optional |
activeTab | string | — | optional |
onTabChange | (value: string) => void | — | optional |
insightRows | AreaChartInsightRow[] | — | optional |
legendLabel1 | ReactNode | 'Legend' | optional |
legendLabel2 | ReactNode | 'Legend' | optional |
series1 | number[] | — | optional |
series2 | number[] | — | optional |
yAxisTicks | [string, string, string, string, string, string] | — | optional |
sparklineData | GraphBaseDataPoint[] | — | optional |