Scatter chart

Use a scatter chart to evaluate the relationship between two quantitative fields. Every point has stable entity identity; optional size, color, labels, and tooltips add governed context without changing that identity.

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

Bivariate scatter

Place delivery time on X and order revenue on Y. Status supplies a categorical legend, while governed conditional formatting controls point fill and symbol and emphasizes canceled orders. Order ID remains the stable point identity.

Key fields

visuals:
  delivery_scatter:
    title: Delivery time vs order revenue
    type: scatter
    query:
      type: aggregate
      dimensions:
      - order_id
      - status
      metrics:
      - delivery_days
      - revenue
      sort:
      - field: order_id
        direction: asc
      limit: 500
    presentation:
      type: point
      identity: [order_id]
      x: delivery_days
      y: revenue
      color: status
      tooltip: [order_id, status, delivery_days, revenue]
      colorScale:
        kind: categorical
      conditionalFormatting:
      - id: canceled-orders
        target: mark_fill
        field: status
        rule:
          kind: field
          source: status
          values:
            canceled: {color: danger, icon: warning}
          nullStyle: {color: neutral}
          defaultStyle: {color: accent, icon: circle}
      overplot:
        strategy: opacity
        opacity: 0.58
        largeMode: automatic
        largeThreshold: 2000

Bubble chart

Add delivery duration and review score as the two quantitative axes, with category as color. The explicit point identity keeps each order stable.

Key fields

visuals:
  delivery_scatter_status:
    title: Review, revenue, and delivery bubble chart
    type: scatter
    query:
      type: aggregate
      dimensions:
      - order_id
      - category
      metrics:
      - delivery_days
      - review_score
      - revenue
      sort:
      - field: order_id
        direction: asc
      limit: 500
    presentation:
      type: point
      identity: [order_id]
      x: review_score
      y: revenue
      size: delivery_days
      color: category
      tooltip: [order_id, category, review_score, revenue, delivery_days]
      colorScale:
        kind: categorical
      sizeScale:
        minimumPixels: 7
        maximumPixels: 34
      overplot:
        strategy: opacity
        opacity: 0.52

Time versus value

Time is a first-class X channel rather than a category label. This deliberately small result labels each stable order and sorts the frame by its governed time alias.

Key fields

visuals:
  delivery_scatter_labeled:
    title: Labeled revenue by purchase time
    type: scatter
    query:
      type: aggregate
      dimensions:
      - order_id
      - dimension: purchase_date
        grain: day
        alias: purchase_day
      metrics:
      - revenue
      sort:
      - field: purchase_day
        direction: asc
      limit: 30
    presentation:
      type: point
      labels:
        density: automatic
        priority:
        - selected
        - anomaly
        - threshold
        maxCharacters: 16
        minimumSpacing: 6
        tooltipFallback: true
      identity: [order_id]
      x: purchase_day
      y: revenue
      label: order_id
      tooltip: [order_id, purchase_day, revenue]
      overplot:
        strategy: show_all
        largeMode: never

API reference

Kind: chart. Renderer: echarts. Supported result shapes: points.

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.color`	`result field`	`none`	—	Binds an optional governed result field to point color.
`presentation.colorScale`	`point color scale`	`none`	`categorical` `quantitative`	Constrains the governed point color channel and optional numeric domain.
`presentation.conditionalFormatting`	`closed conditional-format list`	`none`	`gradient` `rules` `field`	Applies governed renderer-neutral styles to compiled result fields with explicit null and default outcomes.
`presentation.identity`	`result field list`	`required`	—	Binds one or more governed result fields as stable point identity.
`presentation.label`	`result field`	`none`	—	Binds an optional governed result field to point labels.
`presentation.labels`	`label policy`	`hidden`	`hidden` `automatic` `dense` `always`	Controls deterministic label density, priority, truncation, and tooltip fallback.
`presentation.overplot`	`point overplot policy`	`opacity`	`show_all` `opacity`	Controls deterministic point overlap, opacity, and large-result behavior.
`presentation.size`	`result field`	`none`	—	Binds an optional governed numeric result field to point size.
`presentation.sizeScale`	`point size scale`	`none`	—	Constrains the governed point size channel with explicit pixel bounds.
`presentation.tooltip`	`result field list`	`none`	—	Binds governed result fields exposed in point tooltips.
`presentation.x`	`result field`	`required`	—	Binds the governed result field used for the horizontal point coordinate.
`presentation.y`	`result field`	`required`	—	Binds the governed result field used for the vertical point coordinate.

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