Bar chart

Use a bar chart to compare metrics across ranked categories with horizontal bars.

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

Ranked categories

Sort the metric descending to make the longest horizontal bar the leading category. This orientation works well for category labels of unequal length.

Key fields

visuals:
  categories:
    title: Top product categories
    description: Ranks product categories by revenue.
    type: bar
    query:
      type: aggregate
      dimensions:
      - category
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 10
    presentation:
      type: cartesian

Stacked series

Use a second ordered dimension for status and presentation.stacking: normal to combine each status segment into one category total while preserving its composition.

Key fields

visuals:
  categories_by_status_bar:
    title: Category revenue by status
    type: bar
    presentation:
      type: cartesian
      stacking: normal
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - revenue
      sort:
      - field: revenue
        direction: desc
      limit: 60

Alternate metric

Keep the bar contract and replace the dimension with delivery buckets to compare counts across an ordered operational grouping.

Key fields

visuals:
  delivery:
    title: Delivery speed
    description: Compares order volume across delivery-speed buckets.
    type: bar
    query:
      type: aggregate
      dimensions:
      - delivery_bucket
      metrics:
      - order_count
      sort:
      - field: delivery_bucket
        direction: asc
    presentation:
      type: cartesian

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.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.