Column chart

Use a column chart to compare categories or ordered periods with vertical bars.

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

Basic

Use one ordered category and one metric for a direct vertical comparison. Ascending month order makes changes over time easy to scan.

Key fields

visuals:
  orders_by_month_column:
    title: Orders by month
    type: column
    query:
      type: aggregate
      dimensions:
      - purchase_month
      metrics:
      - order_count
      sort:
      - field: purchase_month
        direction: asc
      limit: 30
    presentation:
      type: cartesian

Stacked series

Use a second ordered dimension for status and presentation.stacking: normal to show both the monthly total and each status contribution.

Key fields

visuals:
  orders_by_month_status:
    title: Orders by month and status
    description: Compares monthly order volume split by status.
    type: column
    presentation:
      type: cartesian
      stacking: normal
    query:
      type: aggregate
      dimensions:
      - purchase_month
      - status
      metrics:
      - order_count
      sort:
      - field: purchase_month
        direction: asc
      limit: 40

Grouped series

Keep the series unstacked to place statuses side by side, and use presentation.legend to position the series key below the plot.

Key fields

visuals:
  orders_by_month_status_grouped:
    title: Orders by month and status grouped
    type: column
    presentation:
      type: cartesian
      legend: bottom
    query:
      type: aggregate
      dimensions:
      - purchase_month
      - status
      metrics:
      - order_count
      sort:
      - field: purchase_month
        direction: asc
      limit: 60

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.legend`	`string`	`none`	`none` `top` `right` `bottom` `left`	Controls the renderer-neutral legend position.
`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.