Area Chart

An area chart is a statistical chart that reflects numerical changes as an ordered variable changes, similar in principle to a line chart. The distinctive feature of an area chart is that the area between the line and the independent variable axis is filled with color.

Use Cases

To show trend changes in data under a continuous independent variable while also observing changes in total data volume
For example, displacement = velocity × time: s = v × t. If the x-axis is time t and the y-axis is velocity v at each moment, using an area chart allows you not only to observe the trend of velocity over time but also to perceive the change in displacement distance based on the size of the area

Visual Examples

Global Electric Vehicle Sales Trend

China Power Structure Change Trend, Custom Colors

Global Cloud Computing Market Size Trend, Custom Palette

Options

Configuration Options

Property	Type	Required	Description
type	string	required	Value must be "area".
data	Object[]	required	Chart data.
data.time	string \| number	required	Time series name.
data.value	number	required	Data value.
data.group	string	optional	Group name. Required when stacking is enabled.
stack	boolean	optional	Whether to enable stacking.
title	string	optional	Chart title.
axisXTitle	string	optional	X-axis title.
axisYTitle	string	optional	Y-axis title.
theme	'default' \| 'dark' \| 'academy'	optional	Chart theme, default is "default".
style	Object	optional	Chart style.
style.backgroundColor	string	optional	Must be a valid color value.
style.palette	string[]	optional	Must be an array of valid color values.
style.lineWidth	number	optional	Stroke width, value must be greater than or equal to 0.