Charts

Area charts

Continuous-trend visualizations with filled curves. Each variant is a composed Card + AreaChart recipe themed with --chart-1 through --chart-5. Import from @lantern-product/ui/charts/area.

Default

A single-series area chart with a natural curve and line indicator tooltip.

Area Chart

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Linear

Linear interpolation between points; useful for showing exact data shape.

Area Chart - Linear

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Step

Step interpolation with an icon-decorated tooltip; good for discrete state transitions.

Area Chart - Step

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Stacked

Two series stacked with --chart-1 and --chart-2 for cumulative totals.

Area Chart - Stacked

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Stacked expanded

Three series normalized to 100% with stackOffset="expand" for share-of-total trends.

Area Chart - Stacked Expanded

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Gradient

SVG linearGradient fills referenced through CSS variables for token-driven theming.

Area Chart - Gradient

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Legend

Custom ChartLegend with ChartLegendContent rendered below the plot area.

Area Chart - Legend

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Axes

Both X and Y axes shown with minimal tick styling for richer reference frames.

Area Chart - Axes

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Icons

Lucide icons attached to ChartConfig entries appear in both tooltip and legend.

Area Chart - Icons

Showing total visitors for the last 6 months
Trending up by 5.2% this month
January - June 2024

Interactive

Select-driven time-range filter (7d / 30d / 90d) over 3 months of daily data, with gradient fills.

Area Chart - Interactive

Showing total visitors for the last 3 months