Bar chart

Use a bar chart to compare measures 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 measure 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:
      dimensions:
        category: orders.category
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      limit: 10

Alternate measure

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:
      dimensions:
        delivery_bucket: orders.delivery_bucket
      measures:
        order_count: null
      sort:
        - field: delivery_bucket
          direction: asc

Stacked series

Use query.series for status and presentation.stacked 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:
      stacked: true
    query:
      dimensions:
        category: orders.category
      series:
        field: orders.status
        alias: status
      measures:
        revenue: null
      sort:
        - field: value
          direction: desc
      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, 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.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.