Bar

Bar chart

Bar chart uses runnable data and options to demonstrate horizontal and vertical bars; automatic total and segment labels.

StatusLoading

bar
horizontal and vertical bars
automatic total and segment labels

Graflume.horizontalBar() 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.

Loading

Bar chart uses runnable data and options to demonstrate horizontal and vertical bars; automatic total and segment labels.

Bar chart · Row data
`value`quantitative	`category`ordinal
86	Insights
78	Dashboards
69	Reports
61	Alerts
48	Models
37	Exports

Browser API · Portable schema

Browser API

Graflume.horizontalBar()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        }
      ],
      "title": "Bar",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "orientation": "horizontal"
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bar chart uses runnable data and options to demonstrate horizontal and vertical bars; automatic total and segment labels.",
    "text": "Bar"
  },
  "width": "container",
  "x": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  },
  "y": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  }
};

Graflume.horizontalBar('#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": "Bar example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        }
      ],
      "title": "Bar",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "orientation": "horizontal"
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bar chart uses runnable data and options to demonstrate horizontal and vertical bars; automatic total and segment labels.",
    "text": "Bar"
  },
  "width": "container",
  "x": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  },
  "y": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  }
}

Column chart

Column chart uses runnable data and options to demonstrate grouped layers; worker-bounded virtualization.

StatusLoading

column
grouped layers
worker-bounded virtualization

Graflume.column() 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.

Loading

Column chart uses runnable data and options to demonstrate grouped layers; worker-bounded virtualization.

Column chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.column()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "orientation": "vertical"
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column chart uses runnable data and options to demonstrate grouped layers; worker-bounded virtualization.",
    "text": "Bar · Column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.column('#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": "Bar · Column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "orientation": "vertical"
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column chart uses runnable data and options to demonstrate grouped layers; worker-bounded virtualization.",
    "text": "Bar · Column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Pictorial bar chart

Pictorial bar chart uses runnable data and options to demonstrate positive and negative baseline.

StatusLoading

pictorial-bar
positive and negative baseline

Graflume.pictorialBar() 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.

Loading

Pictorial bar chart uses runnable data and options to demonstrate positive and negative baseline.

Pictorial bar chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.pictorialBar()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Pictorial bar chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Pictorial bar chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "symbol": "diamond"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pictorial bar chart uses runnable data and options to demonstrate positive and negative baseline.",
    "text": "Bar · Pictorial bar chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.pictorialBar('#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": "Bar · Pictorial bar chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Pictorial bar chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "symbol": "diamond"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pictorial bar chart uses runnable data and options to demonstrate positive and negative baseline.",
    "text": "Bar · Pictorial bar chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Bullet chart

Bullet chart uses runnable data and options to demonstrate single-layer grouped, stacked, 100 percent and diverging series.

StatusLoading

bullet
single-layer grouped, stacked, 100 percent and diverging series

Graflume.bullet() 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.

Loading

Bullet chart · Row data
`category`ordinal	`value`quantitative	`target`quantitative
Reliability	99.93	99.9
Fast responses	94	92
Accessible flows	91	95
Successful exports	97	98

Bullet chart uses runnable data and options to demonstrate single-layer grouped, stacked, 100 percent and diverging series.

Browser API · Portable schema

Browser API

Graflume.bullet()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  },
  {
    "category": "Fast responses",
    "previous": 89,
    "target": 92,
    "value": 94
  },
  {
    "category": "Accessible flows",
    "previous": 82,
    "target": 95,
    "value": 91
  },
  {
    "category": "Successful exports",
    "previous": 94,
    "target": 98,
    "value": 97
  }
];

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": "Bar · Bullet chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Bar · Bullet chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "target": "target"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bullet chart uses runnable data and options to demonstrate single-layer grouped, stacked, 100 percent and diverging series.",
    "text": "Bar · Bullet chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.bullet('#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": "Bar · Bullet chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Bar · Bullet chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "target": "target"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bullet chart uses runnable data and options to demonstrate single-layer grouped, stacked, 100 percent and diverging series.",
    "text": "Bar · Bullet chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Column pyramid chart

Column pyramid chart uses runnable data and options to demonstrate signed stack totals, percentages, source lineage and datum hits.

StatusLoading

column-pyramid
signed stack totals, percentages, source lineage and datum hits

Graflume.columnPyramid() 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.

Loading

Column pyramid chart uses runnable data and options to demonstrate signed stack totals, percentages, source lineage and datum hits.

Column pyramid chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.columnPyramid()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Column pyramid chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Column pyramid chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "column-pyramid"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column pyramid chart uses runnable data and options to demonstrate signed stack totals, percentages, source lineage and datum hits.",
    "text": "Bar · Column pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.columnPyramid('#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": "Bar · Column pyramid chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Column pyramid chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "column-pyramid"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column pyramid chart uses runnable data and options to demonstrate signed stack totals, percentages, source lineage and datum hits.",
    "text": "Bar · Column pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Cylinder chart

Cylinder chart uses runnable data and options to demonstrate stack ordering and zero/normalize offsets.

StatusLoading

cylinder
stack ordering and zero/normalize offsets

Graflume.cylinder() 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.

Loading

Cylinder chart uses runnable data and options to demonstrate stack ordering and zero/normalize offsets.

Cylinder chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.cylinder()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Cylinder chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Cylinder chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Cylinder chart uses runnable data and options to demonstrate stack ordering and zero/normalize offsets.",
    "text": "Bar · Cylinder chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.cylinder('#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": "Bar · Cylinder chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Cylinder chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Cylinder chart uses runnable data and options to demonstrate stack ordering and zero/normalize offsets.",
    "text": "Bar · Cylinder chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Lollipop chart

Lollipop chart uses runnable data and options to demonstrate bullet/lollipop/pictorial/cylinder/pyramid/variable-width modes.

StatusLoading

lollipop
bullet/lollipop/pictorial/cylinder/pyramid/variable-width modes

Graflume.lollipop() 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.

Loading

Lollipop chart uses runnable data and options to demonstrate bullet/lollipop/pictorial/cylinder/pyramid/variable-width modes.

Lollipop chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.lollipop()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Lollipop chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Lollipop chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Lollipop chart uses runnable data and options to demonstrate bullet/lollipop/pictorial/cylinder/pyramid/variable-width modes.",
    "text": "Bar · Lollipop chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.lollipop('#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": "Bar · Lollipop chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Lollipop chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Lollipop chart uses runnable data and options to demonstrate bullet/lollipop/pictorial/cylinder/pyramid/variable-width modes.",
    "text": "Bar · Lollipop chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Pictorial column chart

Pictorial column chart uses runnable data and options to demonstrate weighted count.

StatusLoading

pictorial-column
weighted count

Graflume.pictorialColumn() 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.

Loading

Pictorial column chart uses runnable data and options to demonstrate weighted count.

Pictorial column chart · Row data
`category`ordinal	`value`quantitative
Insights	86
Dashboards	78
Reports	69
Alerts	61
Models	48
Exports	37

Browser API · Portable schema

Browser API

Graflume.pictorialColumn()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Pictorial column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Pictorial column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "symbol": "diamond"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pictorial column chart uses runnable data and options to demonstrate weighted count.",
    "text": "Bar · Pictorial column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.pictorialColumn('#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": "Bar · Pictorial column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Bar · Pictorial column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "symbol": "diamond"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pictorial column chart uses runnable data and options to demonstrate weighted count.",
    "text": "Bar · Pictorial column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

Variable width column chart

Variable width column chart uses runnable data and options to demonstrate interactive sort and rank.

StatusLoading

variable-width
interactive sort and rank

Graflume.variableWidth() 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.

Loading

Variable width column chart · Row data
`category`ordinal	`value`quantitative	`width`quantitative
Insights	86	24
Dashboards	78	21
Reports	69	18
Alerts	61	15
Models	48	12
Exports	37	10

Variable width column chart uses runnable data and options to demonstrate interactive sort and rank.

Browser API · Portable schema

Browser API

Graflume.variableWidth()

const data = [
  {
    "category": "Insights",
    "high": 91,
    "low": 81,
    "previous": 74,
    "target": 88,
    "value": 86,
    "width": 24
  },
  {
    "category": "Dashboards",
    "high": 84,
    "low": 72,
    "previous": 69,
    "target": 82,
    "value": 78,
    "width": 21
  },
  {
    "category": "Reports",
    "high": 76,
    "low": 63,
    "previous": 65,
    "target": 74,
    "value": 69,
    "width": 18
  },
  {
    "category": "Alerts",
    "high": 68,
    "low": 55,
    "previous": 48,
    "target": 66,
    "value": 61,
    "width": 15
  },
  {
    "category": "Models",
    "high": 56,
    "low": 42,
    "previous": 41,
    "target": 55,
    "value": 48,
    "width": 12
  },
  {
    "category": "Exports",
    "high": 45,
    "low": 31,
    "previous": 34,
    "target": 44,
    "value": 37,
    "width": 10
  }
];

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": "Bar · Variable width column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "width",
          "format": "number",
          "label": "Width"
        }
      ],
      "title": "Bar · Variable width column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "width": "width"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Variable width column chart uses runnable data and options to demonstrate interactive sort and rank.",
    "text": "Bar · Variable width column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
};

Graflume.variableWidth('#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": "Bar · Variable width column chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 18,
        "orientation": "vertical-up",
        "padding": 10
      },
      "ticks": {
        "spacing": 10
      }
    },
    "y": {
      "format": {
        "type": "compact"
      }
    }
  },
  "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": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "width",
          "format": "number",
          "label": "Width"
        }
      ],
      "title": "Bar · Variable width column chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "width": "width"
    }
  },
  "padding": {
    "bottom": 112,
    "left": 64,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Variable width column chart uses runnable data and options to demonstrate interactive sort and rank.",
    "text": "Bar · Variable width column chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Capability",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Adoption (%)",
    "type": "quantitative"
  }
}

ID	Name	Quick API	mode	mark	renderer
`bar`	Bar chart	`horizontalBar()`	`horizontal`	`bar`	`canvas`
`column`	Column chart	`column()`	`vertical`	`bar`	`canvas`
`pictorial-bar`	Pictorial bar chart	`pictorialBar()`	`pictorial`	`pictorial-bar`	`canvas`
`bullet`	Bullet chart	`bullet()`	`bullet`	`bullet`	`canvas`
`column-pyramid`	Column pyramid chart	`columnPyramid()`	`column-pyramid`	`pyramid`	`canvas`
`cylinder`	Cylinder chart	`cylinder()`	`cylinder`	`cylinder`	`canvas`
`lollipop`	Lollipop chart	`lollipop()`	`lollipop`	`lollipop`	`canvas`
`pictorial-column`	Pictorial column chart	`pictorialColumn()`	`pictorial-column`	`pictorial-bar`	`canvas`
`variable-width`	Variable width column chart	`variableWidth()`	`variable-width`	`variwide`	`canvas`

Bar · Chart-specific features

Every executable mode in this family

Bar chart

Graflume.horizontalBar()

ChartSpec 0.1 · options

Column chart

Graflume.column()

ChartSpec 0.1 · options

Pictorial bar chart

Graflume.pictorialBar()

ChartSpec 0.1 · options

Bullet chart

Graflume.bullet()

ChartSpec 0.1 · options

Column pyramid chart

Graflume.columnPyramid()

ChartSpec 0.1 · options

Cylinder chart

Graflume.cylinder()

ChartSpec 0.1 · options

Lollipop chart

Graflume.lollipop()

ChartSpec 0.1 · options

Pictorial column chart

Graflume.pictorialColumn()

ChartSpec 0.1 · options

Variable width column chart

Graflume.variableWidth()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance