Area chart

Use an area chart to emphasize the magnitude of a metric over an ordered category.

Every preview on this page is generated from the YAML shown below it using a fixed documentation dataset.

Basic

Use an ordered dimension and one metric to fill the area between the series and its baseline. The ascending sort preserves the time sequence, and explicitly hidden labels leave the shape unobstructed.

Key fields

visuals:
  revenue:
    title: Revenue by month
    description: Tracks monthly revenue over the selected period.
    type: area
    presentation:
      type: cartesian
      labels:
        density: hidden
        priority: []
        maxCharacters: 24
        minimumSpacing: 0
        tooltipFallback: true
    query:
      type: aggregate
      dimensions:
      - purchase_month
      metrics:
      - revenue
      sort:
      - field: purchase_month
        direction: asc
      limit: 30

Stacked series

Use a second ordered dimension for status and set presentation.stacking: normal to show how each status contributes to the monthly total.

Key fields

visuals:
  revenue_area_status:
    title: Stacked revenue area
    type: area
    presentation:
      type: cartesian
      stacking: normal
    query:
      type: aggregate
      dimensions:
      - purchase_month
      - status
      metrics:
      - revenue
      sort:
      - field: purchase_month
        direction: asc
      limit: 60

Smoothed line

Enable presentation.smooth to interpolate the boundary, hide symbols to reduce clutter, and add dataZoom when the ordered range grows.

Key fields

visuals:
  revenue_area_smooth:
    title: Smooth revenue area
    type: area
    presentation:
      type: cartesian
      smooth: true
      showSymbols: false
      dataZoom: true
    query:
      type: aggregate
      dimensions:
      - purchase_month
      metrics:
      - revenue
      sort:
      - field: purchase_month
        direction: asc
      limit: 30

API reference

Kind: chart. Renderer: echarts. Supported result shapes: category_series_value category_value.

Field	Type	Default	Allowed values	Description
`query.dimensions`	`field mapping`	—	—	Groups query results and supplies category or hierarchy labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.metrics`	`metric mapping`	—	—	Selects governed semantic metrics consumed by the visual shape.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or metric alias.
`presentation.dataZoom`	`boolean`	`false`	`true` `false`	Adds bounded zoom controls to supported Cartesian charts.
`presentation.labels`	`label policy`	`hidden`	`hidden` `automatic` `dense` `always`	Controls deterministic label density, priority, truncation, and tooltip fallback.
`presentation.showSymbols`	`boolean`	`true`	`true` `false`	Shows point symbols on compatible Cartesian charts.
`presentation.smooth`	`boolean`	`true`	`true` `false`	Uses curved interpolation on compatible line and area charts.
`presentation.stacking`	`string`	`none`	`none` `normal` `percent`	Declares explicit normal or 100% stacking.

Accessibility. Use a descriptive title and unit, and do not rely on color alone to distinguish series or values.