Area Chart
Visualise continuous trends and cumulative values with smooth area graphs.
Install the Area Chart component using the nocta-ui CLI:
npx @nocta-ui/cli add area-chartImport the component:
import {
AreaChart,
AreaChartHeader,
AreaChartTitle,
AreaChartDescription,
AreaChartActions,
AreaChartGraph,
AreaChartLegend,
AreaChartDataTable,
AreaChartDataTableContent,
} from '@/components/ui/area-chart';Examples
Default Area Chart
Monthly Recurring Revenue
Track consistent growth across the current fiscal year.
Revenue
Header with actions
Average Session Length
Hover to compare behavior across the week.
Session duration
Compare multiple series
Signup Channels
Track organic and paid conversions side by side.
Organic signups
Paid signups
Data table summary
Support Volume
Monitor ticket inflow and spot surges that may require staffing changes.
Week 1
75—Week 2
84+12%Week 3
106+26.2%Week 4
123+16%Week 5
1230%Week 6
106−13.8%Week 7
84−20.8%Week 8
75−10.7%Average tickets97+1.3%
API Reference
AreaChart
Prop
Type
AreaChartGraph
Prop
Type
AreaChartHeader
Prop
Type
AreaChartTitle
Prop
Type
AreaChartDescription
Prop
Type
AreaChartActions
Prop
Type
AreaChartLegend
Prop
Type
AreaChartDataTable
Prop
Type
AreaChartDataTableContent
Prop
Type