DDS/Components/Area Chart

Area Chart

Charts

Gradient area chart. Supports multiple series, stacked mode, and interactive tooltips.

Playground

Revenue

Expenses

Controls

Show Grid

Show Legend

Show Dots

Stacked

Height (px)

Props

Prop	Type	Default	Description
`labels`*	`string[]`	—	X-axis labels.
`datasets`*	`DsAreaChartDataset[]`	—	Data series.
`showGrid`	`boolean`	`true`	Show the grid.
`showDots`	`boolean`	`false`	Show data points.
`showLegend`	`boolean`	`true`	Show the legend.
`stacked`	`boolean`	`false`	Stacked area mode.
`height`	`number`	`240`	Chart height in px.

Examples

Single series

vue

<DsAreaChart
  :labels='["Jan","Feb","Mar","Apr","May","Jun"]'
  :datasets='[{"label":"Visitors","data":[1200,1900,1400,2200,1800,2800],"color":"#7f00ff"}]'
  :height="200"
/>

Stacked

Product A

Product B

Product C

vue

<DsAreaChart
  :labels='["Q1","Q2","Q3","Q4"]'
  :datasets='[{"label":"Product A","data":[3000,4000,3500,5000],"color":"#7f00ff"},{"label":"Product B","data":[2000,2500,3000,2800],"color":"#06b6d4"},{"label":"Product C","data":[1000,1500,1200,1800],"color":"#22c55e"}]'
  stacked
  :height="220"
/>

Skeleton

Use DsAreaChartSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsAreaChartSkeleton />

Accessibility

SVG chart with accessible hover tooltip.
Use aria-label on the container to describe the chart.

VisuallyHidden

BarChart