Component

Area Chart

Interactive stacked area chart with a time-range filter. Shows trends across two data series with a tooltip and legend.

Usage

Use area charts to visualize cumulative or stacked trends over time. The time-range selector lets users focus on 7-day, 30-day, or 90-day windows.

Playground

Preview

Area Chart - Interactive

Showing total visitors for the last 3 months

Configure

Title

Date range

Metric 1 label

Metric 2 label

Default range

Code

import { ChartAreaInteractive } from "@/components/ui/chart-area-interactive"

<ChartAreaInteractive
  title="Area Chart - Interactive"
  dateRange="Showing total visitors for the last 3 months"
  metric1Label="Desktop"
  metric2Label="Mobile"
  defaultTimeRange="7d"
/>

Do

Use for time-series data with two or more comparable series
Pair with a legend so each series is clearly labeled
Use the chart-* color tokens so charts respond to theme changes

Don't

Don't use stacked area when series overlap makes individual values hard to read, use a line chart instead
Don't skip axis labels, always make the time unit clear