Gauge

Gauge chart

Gauge chart uses runnable data and options to demonstrate radial arc; multiple rows.

StatusLoading

gauge
radial arc
multiple rows

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

Gauge chart uses runnable data and options to demonstrate radial arc; multiple rows.

Gauge chart · Row data
`category`ordinal	`value`quantitative	`previous`quantitative	`target`quantitative
Reliability	99.93	99.84	99.9

Browser API · Portable schema

Browser API

Graflume.gauge()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  }
];

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": "Gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "angular"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Gauge chart uses runnable data and options to demonstrate radial arc; multiple rows.",
    "text": "Gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
};

Graflume.gauge('#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": "Gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "angular"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Gauge chart uses runnable data and options to demonstrate radial arc; multiple rows.",
    "text": "Gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
}

Number indicator

Number indicator uses runnable data and options to demonstrate needle and bar; threshold bands.

StatusLoading

gauge-number
needle and bar
threshold bands

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

Number indicator uses runnable data and options to demonstrate needle and bar; threshold bands.

Number indicator · Row data
`category`ordinal	`value`quantitative	`previous`quantitative	`target`quantitative
Reliability	99.93	99.84	99.9

Browser API · Portable schema

Browser API

Graflume.gaugeNumber()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  }
];

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": "Gauge · Number indicator 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Number indicator",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "number"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Number indicator uses runnable data and options to demonstrate needle and bar; threshold bands.",
    "text": "Gauge · Number indicator"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
};

Graflume.gaugeNumber('#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": "Gauge · Number indicator 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Number indicator",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "number"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Number indicator uses runnable data and options to demonstrate needle and bar; threshold bands.",
    "text": "Gauge · Number indicator"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
}

Delta indicator

Delta indicator uses runnable data and options to demonstrate number and delta; custom ticks.

StatusLoading

gauge-delta
number and delta
custom ticks

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

Delta indicator uses runnable data and options to demonstrate number and delta; custom ticks.

Delta indicator · Row data
`category`ordinal	`value`quantitative	`previous`quantitative	`target`quantitative
Reliability	99.93	99.84	99.9

Browser API · Portable schema

Browser API

Graflume.gaugeDelta()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  }
];

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": "Gauge · Delta indicator 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Delta indicator",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "delta"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Delta indicator uses runnable data and options to demonstrate number and delta; custom ticks.",
    "text": "Gauge · Delta indicator"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
};

Graflume.gaugeDelta('#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": "Gauge · Delta indicator 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Delta indicator",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "delta"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Delta indicator uses runnable data and options to demonstrate number and delta; custom ticks.",
    "text": "Gauge · Delta indicator"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
}

Bullet gauge

Bullet gauge uses runnable data and options to demonstrate linear bullet target; exact accessible value summary.

StatusLoading

gauge-bullet
linear bullet target
exact accessible value summary

Graflume.gaugeBullet() 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 gauge uses runnable data and options to demonstrate linear bullet target; exact accessible value summary.

Bullet gauge · Row data
`category`ordinal	`value`quantitative	`previous`quantitative	`target`quantitative
Reliability	99.93	99.84	99.9

Browser API · Portable schema

Browser API

Graflume.gaugeBullet()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  }
];

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": "Gauge · Bullet gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Bullet gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "bullet"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bullet gauge uses runnable data and options to demonstrate linear bullet target; exact accessible value summary.",
    "text": "Gauge · Bullet gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
};

Graflume.gaugeBullet('#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": "Gauge · Bullet gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        },
        {
          "field": "previous",
          "format": "number",
          "label": "Previous"
        },
        {
          "field": "target",
          "format": "number",
          "label": "Target"
        }
      ],
      "title": "Gauge · Bullet gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "reference": "previous",
      "target": "target"
    },
    "options": {
      "max": 100,
      "min": 0,
      "mode": "bullet"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Bullet gauge uses runnable data and options to demonstrate linear bullet target; exact accessible value summary.",
    "text": "Gauge · Bullet gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
}

Solid gauge

Solid gauge uses runnable data and options to demonstrate solid gauge.

StatusLoading

solid-gauge
solid gauge

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

Solid gauge uses runnable data and options to demonstrate solid gauge.

Solid gauge · Row data
`category`ordinal	`value`quantitative
Reliability	99.93

Browser API · Portable schema

Browser API

Graflume.solidGauge()

const data = [
  {
    "category": "Reliability",
    "previous": 99.84,
    "target": 99.9,
    "value": 99.93
  }
];

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": "Gauge · Solid gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        }
      ],
      "title": "Gauge · Solid gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "max": 100,
      "min": 0
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Solid gauge uses runnable data and options to demonstrate solid gauge.",
    "text": "Gauge · Solid gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
};

Graflume.solidGauge('#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": "Gauge · Solid gauge 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",
          "fractionDigits": 0,
          "label": "Value",
          "suffix": "%"
        }
      ],
      "title": "Gauge · Solid gauge",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "max": 100,
      "min": 0
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Solid gauge uses runnable data and options to demonstrate solid gauge.",
    "text": "Gauge · Solid gauge"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Service metric",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Percent",
    "type": "quantitative"
  }
}

Gauge · Chart-specific features

Every executable mode in this family

Gauge chart

Gauge chart · Row data

Graflume.gauge()

ChartSpec 0.1 · options

Number indicator

Number indicator · Row data

Graflume.gaugeNumber()

ChartSpec 0.1 · options

Delta indicator

Delta indicator · Row data

Graflume.gaugeDelta()

ChartSpec 0.1 · options

Bullet gauge

Bullet gauge · Row data

Graflume.gaugeBullet()

ChartSpec 0.1 · options

Solid gauge

Solid gauge · Row data

Graflume.solidGauge()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance

ID	Name	Quick API	mode	mark	renderer
`gauge`	Gauge chart	`gauge()`	`default`	`gauge`	`canvas`
`gauge-number`	Number indicator	`gaugeNumber()`	`number`	`gauge`	`canvas`
`gauge-delta`	Delta indicator	`gaugeDelta()`	`delta`	`gauge`	`canvas`
`gauge-bullet`	Bullet gauge	`gaugeBullet()`	`bullet`	`gauge`	`canvas`
`solid-gauge`	Solid gauge	`solidGauge()`	`solid-gauge`	`solid-gauge`	`canvas`