Area chart

Use an area chart to emphasize the magnitude of a measure 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 measure to fill the area between the series and its baseline. The ascending sort preserves the time sequence.

Key fields

visuals:
  revenue:
    title: Revenue by month
    description: Tracks monthly revenue over the selected period.
    type: area
    query:
      dimensions:
        purchase_month: orders.purchase_month
      measures:
        revenue: null
      sort:
        - field: purchase_month
          direction: asc
      limit: 30

Stacked series

Map query.series to status and enable presentation.stacked to show how each status contributes to the monthly total.

Key fields

visuals:
  revenue_area_status:
    title: Stacked revenue area
    type: area
    presentation:
      stacked: true
    query:
      dimensions:
        purchase_month: orders.purchase_month
      series:
        field: orders.status
        alias: status
      measures:
        revenue: null
      sort:
        - field: purchase_month
          direction: asc
      limit: 60

Smoothed line

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

Key fields

visuals:
  revenue_area_smooth:
    title: Smooth revenue area
    type: area
    presentation:
      smooth: true
      show_symbols: false
      data_zoom: true
    query:
      dimensions:
        purchase_month: orders.purchase_month
      measures:
        revenue: null
      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, hierarchy, matrix, graph, or geographic labels.
`query.limit`	`integer`	`no limit`	`positive integer`	Caps the number of rows returned to the renderer.
`query.measures`	`measure mapping`	—	—	Selects the governed semantic measures consumed by the visual shape.
`query.series`	`field reference`	—	—	Splits one measure into named series for compatible chart shapes.
`query.sort`	`sort list`	—	—	Orders query results by a returned field or measure alias.
`presentation.data_zoom`	`boolean`	`false`	`true` `false`	Adds inside and slider zoom controls to supported Cartesian charts.
`presentation.show_symbols`	`boolean`	`true`	`true` `false`	Shows point symbols on line and area series.
`presentation.smooth`	`boolean`	`true`	`true` `false`	Uses curved interpolation for line and area series.
`presentation.stacked`	`boolean`	`false`	`true` `false`	Stacks compatible bar, column, line, or area series.

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