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 measure 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
    query:
      dimensions:
        status: orders.status
        delivery_bucket: orders.delivery_bucket
      measures:
        order_count: null
      sort:
        - field: value
          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:
      dimensions:
        category: orders.category
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc
      limit: 60

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:
      layout: circular
      curveness: 0.28
      focus: adjacency
    query:
      dimensions:
        category: orders.category
        status: orders.status
      measures:
        order_count: null
      sort:
        - field: value
          direction: desc
      limit: 60

API reference

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

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.sort`	`sort list`	—	—	Orders query results by a returned field or measure alias.
`presentation.curveness`	`number`	`0.18`	`0–1`	Controls the curvature of graph or Sankey links.
`presentation.focus`	`string`	`adjacency`	`adjacency` `descendant`	Selects which related graph or hierarchy elements receive emphasis.
`presentation.layout`	`string`	`force`	`force` `circular`	Selects the graph node layout algorithm.

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