Area Chart
Area Chart visualizes quantitative data with filled areas under the line, supporting the same analytical layout types as Line Chart with RTL support.
'use client'; import { AreaChart } from 'sdaia-ui'; export default function AreaChartRealWorld() {Installation
npx sdaia-ui@latest add area-chart
Usage
import { AreaChart } from "@/components/ui/area-chart"<AreaChart type="insight" />Examples
Insight
Area chart highlighting key data insights with shaded regions.
'use client'; import { AreaChart } from 'sdaia-ui'; export default function AreaChartInsight() {Detailed Comparison
Area chart with multiple series for side-by-side data comparison.
'use client'; import { AreaChart } from 'sdaia-ui'; export default function AreaChartDetailedComparison() {Metric
Area chart focused on a single performance metric over time.
'use client'; import { AreaChart } from 'sdaia-ui'; export default function AreaChartMetric() {Summary
Compact area chart providing a high-level data summary.
'use client'; import { AreaChart } from 'sdaia-ui'; export default function AreaChartSummary() {API Reference
AreaChartProps
Props for the AreaChart component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'Insight' | 'Detailed Comparison' | 'Metric' | 'Summary' | 'Insight' | optional |
xAxisData | '3 Days' | '5 Work Days' | '7 Week Days' | '12 Months' | '7 Week Days' | optional |
rtl | boolean | false | optional |
title | string | - | optional |
height | number | - | optional |
series1 | number[] | - | optional |
series2 | number[] | - | optional |
yAxisTicks | [string, string, string, string, string, string] | - | optional |
sparklineData | GraphBaseDataPoint[] | - | optional |