Data Display

AreaChart

Filled SVG area chart for showing magnitude and cumulative trends across an ordered x domain.

import { AreaChart } from '@lostgradient/cinder/area-chart';
chartareaanalytics
01

Overview

Filled SVG area chart for showing magnitude and cumulative trends across an ordered x domain.

Usage

svelte 
<script lang="ts">
  import { AreaChart } from '@lostgradient/cinder/area-chart';
</script>

Guidance

Use When

  • Showing magnitude under a trend line.
  • Comparing cumulative or stacked contribution over an ordered domain.

Avoid When

  • Exact point comparison matters more than area magnitude — use line-chart instead.
  • Comparing discrete category totals — use bar-chart instead.
Live preview
02

When to use

Use when
  • Showing magnitude under a trend line.
  • Comparing cumulative or stacked contribution over an ordered domain.
Avoid when
  • Exact point comparison matters more than area magnitude — use line-chart instead.
  • Comparing discrete category totals — use bar-chart instead.
03

Examples

Empty state

An area chart with reserved layout and no available data.

Usage area

A single-series area chart for product usage.

Stacked retention

A stacked area chart comparing retained accounts by cohort.

04

Props

Props for area-chart
Name Type Default Required Bindable Description
label unknown req
description unknown req
series ChartCartesianSeries[] req Series rendered as independent filled areas or stacked areas.
mode 'single' | 'stacked' 'single' Area rendering mode. Default single.
height unknown 280
xAxis unknown req
yAxis unknown req
legendPosition unknown 'top'
hiddenSeriesIds unknown [] bind
loading unknown false
dataTableCaption unknown req
dataTableVisibility unknown 'screen-reader-only'
maximumInteractivePoints unknown 500
empty unknown req
loadingContent unknown req
id unknown req