Trends and Time

Use a line to show change over time, such as quarterly sales. Keep dates ordered and choose an area chart when the filled magnitude adds meaning. Try changing the chart type while retaining the same series.

Trend and area charts

Interactive example

Trend and area charts

Example for Trend and area charts

Trends across ordered categories.

The example loads when visible.

Reset

Type	Best for	Required data and constraints
line	Trends across ordered categories.	Category, value, and series.
smoothLine	Visually continuous trends.	Same channels as line; smoothing changes geometry, not data.
steppedLine	State or price changes that hold until the next category.	Category, value, and series.
smallMultiples	Comparing many trends without overlapping lines.	Category and value; up to 12 visible panels, with fewer in smaller containers. Omitted panels remain in canonical data and CSV.
annotatedTimeSeries	Trends with emphasized analytical points.	Category, value, and series; date-like categories are recommended.
area	Trend magnitude with filled areas.	Category, value, and series.
steppedArea	Stepwise magnitude changes.	Category, value, and series.
stackedArea	Total trend plus series contribution.	Category, value, and series.
normalizedArea	Percentage composition over an ordered axis.	Category, value, and series; normalizes to 100%.
rangeArea	Low/high bands over categories.	Explicit low/high groups with shared or matched parallel channels.
confidenceBand	Uncertainty envelopes around trends.	Explicit lower/upper groups through low and high, with shared or matched parallel channels.

Apply this type in code

Choose a line, then an area view. Notice that category order remains important. For a ready chart:

await chart.update({ chartType: 'line' });

Next steps

See time and category axes and navigation.