Skip to main content

AreaChart

AreaChart

Line chart with gradient fill and stacking support

Tags: chart trend volume accumulation time-series

View Demo

The AreaChart combines the trend visualization of a line chart with filled areas beneath the lines. It's excellent for showing volume or magnitude over time, and the stacked variant is perfect for showing how multiple series contribute to a total.

Reporting props marked Svelte only (valueFormat, showDataTable, exportable, reference lines, data zoom and so on) are available in @classic-homes/charts-svelte; React support is pending.

Import​

<script>
  import { AreaChart } from '@classic-homes/charts-svelte';
</script>
// React
import { AreaChart } from '@classic-homes/charts-react';

Basic Usage​

<script>
  import { AreaChart } from '@classic-homes/charts-svelte';

  const data = {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      { name: 'Email', data: [120, 132, 101, 134, 90, 230, 210] },
      { name: 'Ads', data: [220, 182, 191, 234, 290, 330, 310] },
      { name: 'Video', data: [150, 232, 201, 154, 190, 330, 410] },
    ],
  };
</script>

<AreaChart title="Weekly Traffic" {data} stacked smooth gradient height={400} />

Props​

Chart-Specific Props​

Prop Type Default Description
data AreaChartData required Chart data with categories and series
smooth boolean false Use smooth curved lines
stacked boolean | 'percent' false Stack areas to show total composition; 'percent' stacks each category's share of 100% (Svelte only)
connectNulls boolean false Draw across missing (null) values instead of leaving a gap (Svelte only)
gradient boolean false Apply gradient fill to areas
showLabels boolean false Show data labels
labelFormatter string | ((params: LabelFormatterParams) => string) - Data label template or function
xAxisConfig AxisConfig - Horizontal axis name, tick formatter, rotation and range
yAxisConfig AxisConfig - Vertical axis name, tick formatter, rotation and range
referenceLines ReferenceLine[] - Lines marking targets or statistics: { value: number | 'average' | 'median' | 'min' | 'max', label?, series?, style?, color? } (Svelte only)
referenceBands ReferenceBand[] - Shaded value ranges: { from, to, label?, color?, series? } (Svelte only)
dataZoom boolean | 'inside' | 'slider' - Zoom and pan the category axis: 'inside' (wheel and drag), 'slider', or true for both (Svelte only)
legend ChartLegendConfig - Built-in legend position, alignment, icon and formatter
onLegendChange (visible: Record<string, boolean>) => void - Called when legend items are shown or hidden
renderLegend Snippet<[LegendRenderProps]> - Custom HTML legend (e.g. ChartLegend) instead of the built-in one; React takes a function returning a node
onClick (params: DataPointEventParams) => void - Callback when clicked
onHover (params: DataPointEventParams) => void - Callback when hovering over a data point

Inherited Base Props​

Prop Type Default Description
title string required Chart title for accessibility
height number | string 400 Chart height
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
showLegend boolean true Show chart legend
showTooltip boolean true Show tooltip on hover
showGrid boolean true Show grid lines
tooltipFormatter string | ((items: TooltipFormatterParams[]) => string) - Custom tooltip template or HTML function
tooltipValueFormatter (value: number) => string - Format values in the default tooltip
option EChartsOption - Raw ECharts option deep-merged over the generated one
description string - Optional description for screen readers
minHeight number - Minimum height in pixels; also bounds an 'auto' height
maxHeight number - Maximum height in pixels; also bounds an 'auto' height
loading boolean false Show loading skeleton; over existing data a loading overlay is shown instead (Svelte)
error string | null - Error message to display
onRetry () => void - Show a Retry button on the error state, calling this (Svelte only)
emptyMessage string - Message shown when data is empty
valueFormat ValueFormatPreset | Intl.NumberFormatOptions | ((value: number) => string) - How values are written in value axes, tooltips, labels and the data table: 'number', 'integer', 'compact', 'currency', 'currencyCents', 'percent', 'percentValue', 'days', Intl options or a function (Svelte only)
locale string 'en-US' Locale for valueFormat (Svelte only)
onReady (chart: EChartsType) => void - Called with the ECharts instance when it is created (Svelte only)
events Record<string, (params) => void> - Raw ECharts event handlers keyed by event name, e.g. datazoom (Svelte only)
showDataTable boolean | 'sr-only' 'sr-only' Render the data as a table: 'sr-only' for screen readers, true adds a visible "Show data" toggle, false for none (Svelte only)
exportable boolean | ChartExportConfig false Show PNG and CSV download buttons; or { image, csv, filename } (Svelte only)
patterns boolean false Fill series with decal patterns as well as colour, for colour-blind readers (Svelte only)
class string - Custom CSS class
animation boolean true Enable/disable animations (respects prefers-reduced-motion)

Data Structure​

interface AreaChartData {
  categories: string[]; // X-axis labels
  series: Array<{
    name: string; // Series name for legend
    data: (number | null)[]; // Y-axis values; null leaves a gap
    color?: string; // Optional custom color
    labels?: (string | null)[]; // Optional per-point label text
    stack?: string; // Stack group id; overrides `stacked` for this series
  }>;
}

Examples​

Stacked Area with Gradient​

<AreaChart title="Traffic Sources" {data} stacked smooth gradient height={400} />

Simple Area Chart​

<AreaChart
  title="Single Series"
  data={{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    series: [{ name: 'Revenue', data: [100, 150, 120, 180, 200] }],
  }}
  smooth
/>

Percent Stacking (Svelte only)​

<AreaChart title="Sales Mix" {data} stacked="percent" smooth />

Gaps, Format and Zoom (Svelte only)​

<AreaChart
  title="Weekly Traffic"
  data={{
    categories: ['W1', 'W2', 'W3', 'W4'],
    series: [{ name: 'Visits', data: [1200, null, 1650, 1820] }],
  }}
  connectNulls
  valueFormat="compact"
  dataZoom="inside"
/>

Accessibility​

  • Screen reader support via title and description props
  • Respects prefers-reduced-motion
  • High contrast in both themes
On this page