Graflume · Alpha

Pie / Donut · Chart-specific features

Show part-to-whole proportions for a small set of categories. These tabs come from Graflume's public catalog. Every mode owns runnable data, options, a Quick API, and source-backed feature claims.

Chart family · Default families

Pie / Donut

Show part-to-whole proportions for a small set of categories.

Quick API: pie()
Browser snapshot: graflume
mark: pie
Presets: 3

Chart-specific features

Every executable mode in this family

These tabs come from Graflume's public catalog. Every mode owns runnable data, options, a Quick API, and source-backed feature claims.

Donut chart

Donut chart uses runnable data and options to demonstrate pie and donut; center label/value.

StatusLoading

donut
pie and donut
center label/value
dense label solver
keyboard slice traversal

Graflume.donut() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Donut chart uses runnable data and options to demonstrate pie and donut; center label/value.

Donut chart · Row data
`category`ordinal	`value`quantitative
Organic search	38
Direct	27
Product referrals	18
Community	11
Campaigns	6

Browser API · Portable schema

Browser API

Graflume.donut()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Pie / Donut",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "innerRadius": 0.56
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Donut chart uses runnable data and options to demonstrate pie and donut; center label/value.",
    "text": "Pie / Donut"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

Graflume.donut('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Pie / Donut",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "innerRadius": 0.56
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Donut chart uses runnable data and options to demonstrate pie and donut; center label/value.",
    "text": "Pie / Donut"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

Pie chart

Pie chart uses runnable data and options to demonstrate start angle and direction; leader labels.

StatusLoading

pie
start angle and direction
leader labels
zero and negative policy

Graflume.pie() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Pie chart uses runnable data and options to demonstrate start angle and direction; leader labels.

Pie chart · Row data
`category`ordinal	`value`quantitative
Organic search	38
Direct	27
Product referrals	18
Community	11
Campaigns	6

Browser API · Portable schema

Browser API

Graflume.pie()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut · Pie chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Pie / Donut · Pie chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {},
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pie chart uses runnable data and options to demonstrate start angle and direction; leader labels.",
    "text": "Pie / Donut · Pie chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

Graflume.pie('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut · Pie chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Pie / Donut · Pie chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {},
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pie chart uses runnable data and options to demonstrate start angle and direction; leader labels.",
    "text": "Pie / Donut · Pie chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

Variable radius pie chart

Variable radius pie chart uses runnable data and options to demonstrate inner radius; variable-radius pie.

StatusLoading

variable-pie
inner radius
variable-radius pie
minimum slice, sorting and padding

Graflume.variablePie() Canvas 2D

Control help

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Variable radius pie chart · Row data
`category`ordinal	`value`quantitative	`radius`quantitative
Organic search	38	34
Direct	27	28
Product referrals	18	23
Community	11	18
Campaigns	6	13

Variable radius pie chart uses runnable data and options to demonstrate inner radius; variable-radius pie.

Browser API · Portable schema

Browser API

Graflume.variablePie()

const data = [
  {
    "category": "Organic search",
    "radius": 34,
    "value": 38
  },
  {
    "category": "Direct",
    "radius": 28,
    "value": 27
  },
  {
    "category": "Product referrals",
    "radius": 23,
    "value": 18
  },
  {
    "category": "Community",
    "radius": 18,
    "value": 11
  },
  {
    "category": "Campaigns",
    "radius": 13,
    "value": 6
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut · Variable radius pie chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "radius",
          "format": "number",
          "label": "Radius"
        }
      ],
      "title": "Pie / Donut · Variable radius pie chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "radius": "radius"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Variable radius pie chart uses runnable data and options to demonstrate inner radius; variable-radius pie.",
    "text": "Pie / Donut · Variable radius pie chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
};

Graflume.variablePie('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Pie / Donut · Variable radius pie chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "radius",
          "format": "number",
          "label": "Radius"
        }
      ],
      "title": "Pie / Donut · Variable radius pie chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "radius": "radius"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Variable radius pie chart uses runnable data and options to demonstrate inner radius; variable-radius pie.",
    "text": "Pie / Donut · Variable radius pie chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Channel",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Share (%)",
    "type": "quantitative"
  }
}

Catalog

Modes · compatibility identifiers

The source-controlled catalog maps callable modes in this family and compatibility identifiers to their canonical modes. This table contains executable entries only.

Mode / compatibility ID search

3 modes · 2 compatibility identifiers

Pie / Donut · supported modes · representative `pie`
ID	Name	Quick API	mode	mark	renderer
`donut`	Donut chart	`donut()`	`donut`	`pie`	`canvas`
`pie`	Pie chart	`pie()`	`default`	`pie`	`canvas`
`variable-pie`	Variable radius pie chart	`variablePie()`	`variable-pie`	`variable-pie`	`canvas`

Pie / Donut · compatibility identifiers
Identifier	Canonical mode ID
`pie`	`pie`
`variablepie`	`variable-pie`

ChartSpec · SpatialSpec

Legend and emphasis

Identify series, emphasize a datum or range, place a custom callout, and let readers select marks.

Legend: Explain the series and scale represented by each color, line, or symbol inside the chart.
Point and range highlights: Emphasize a datum, value set, axis interval, or plot region without changing source values.
Custom callouts: Attach user-authored safe text to a datum, axis range, or normalized plot position. Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.
Interactive selection: Click a mark to select it, press Escape to clear it, and consume selection state and events in the host application.

Manual

Integration checklist

ARIA · table fallback

Accessibility

Canvas ARIA metadata is paired with a text summary and table fallback.

standard · large · ultra

Performance

Standard, large, and ultra profiles bound rendering work.

Chart catalog