Graph

Use a graph to explore weighted relationships between categories as nodes and edges.

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

Basic network

Map two dimensions to source and target nodes, then use the metric as edge weight to reveal relationships between statuses and delivery buckets.

Key fields

visuals:
  status_delivery_graph:
    title: Status and delivery network
    description: Shows status and delivery-speed relationships as a network.
    type: graph
    presentation:
      type: hierarchy
      labels:
        density: automatic
        priority:
        - selected
        - anomaly
        - threshold
        maxCharacters: 18
        minimumSpacing: 6
        tooltipFallback: true
    query:
      type: aggregate
      dimensions:
      - status
      - delivery_bucket
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 40

Alternate relationships

Replace the source dimension with category to inspect a different relationship while retaining the same weighted graph shape.

Key fields

visuals:
  category_status_graph:
    title: Category and status network
    type: graph
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 60
    presentation:
      type: hierarchy

Circular layout

Set presentation.layout: circular for a stable ring, curve overlapping edges, and use focus: adjacency to emphasize connected nodes on interaction.

Key fields

visuals:
  category_status_graph_circular:
    title: Circular category and status network
    type: graph
    presentation:
      type: hierarchy
      layout: circular
      curveness: 0.28
      focus: adjacency
    query:
      type: aggregate
      dimensions:
      - category
      - status
      metrics:
      - order_count
      sort:
      - field: order_count
        direction: desc
      limit: 60

API reference

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

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.curveness`	`number`	`renderer default`	`number from 0 through 1`	Controls the curvature of graph and flow edges.
`presentation.focus`	`string`	`none`	`none` `adjacency`	Controls whether interaction emphasizes adjacent graph nodes and edges.
`presentation.labels`	`label policy`	`hidden`	`hidden` `automatic` `dense` `always`	Controls deterministic label density, priority, truncation, and tooltip fallback.
`presentation.layout`	`string`	`standard`	`standard` `circular`	Selects the deterministic hierarchy or graph layout.

Accessibility. Use meaningful node labels and keep the hierarchy or flow small enough to follow without relying on color alone.