Interval

Intervals

Intervals uses runnable data and options to demonstrate precomputed vertical interval; horizontal errors.

StatusLoading

intervals
precomputed vertical interval
horizontal errors

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

Intervals · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Intervals uses runnable data and options to demonstrate precomputed vertical interval; horizontal errors.

Browser API · Portable schema

Browser API

Graflume.intervals()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Intervals uses runnable data and options to demonstrate precomputed vertical interval; horizontal errors.",
    "text": "Interval"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.intervals('#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": "Interval example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Intervals uses runnable data and options to demonstrate precomputed vertical interval; horizontal errors.",
    "text": "Interval"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

Area range chart

Area range chart uses runnable data and options to demonstrate area and spline range; provenance.

StatusLoading

area-range
area and spline range
provenance

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

Area range chart · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Area range chart uses runnable data and options to demonstrate area and spline range; provenance.

Browser API · Portable schema

Browser API

Graflume.areaRange()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval · Area range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Area range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "area",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Area range chart uses runnable data and options to demonstrate area and spline range; provenance.",
    "text": "Interval · Area range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.areaRange('#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": "Interval · Area range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Area range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "area",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Area range chart uses runnable data and options to demonstrate area and spline range; provenance.",
    "text": "Interval · Area range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

Smooth area range chart

Smooth area range chart uses runnable data and options to demonstrate column range.

StatusLoading

area-spline-range
column range

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

Smooth area range chart · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Smooth area range chart uses runnable data and options to demonstrate column range.

Browser API · Portable schema

Browser API

Graflume.areaSplineRange()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval · Smooth area range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Smooth area range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "area",
      "smooth": true
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Smooth area range chart uses runnable data and options to demonstrate column range.",
    "text": "Interval · Smooth area range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.areaSplineRange('#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": "Interval · Smooth area range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Smooth area range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "area",
      "smooth": true
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Smooth area range chart uses runnable data and options to demonstrate column range.",
    "text": "Interval · Smooth area range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

Column range chart

Column range chart uses runnable data and options to demonstrate column range.

StatusLoading

column-range

Graflume.columnRange() 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 range chart · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Column range chart uses runnable data and options to demonstrate column range.

Browser API · Portable schema

Browser API

Graflume.columnRange()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval · Column range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Column range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "column",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column range chart uses runnable data and options to demonstrate column range.",
    "text": "Interval · Column range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.columnRange('#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": "Interval · Column range chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Column range chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "column",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Column range chart uses runnable data and options to demonstrate column range.",
    "text": "Interval · Column range chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

Dumbbell chart

Dumbbell chart uses runnable data and options to demonstrate raw estimator.

StatusLoading

dumbbell
raw estimator

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

Dumbbell chart · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Dumbbell chart uses runnable data and options to demonstrate raw estimator.

Browser API · Portable schema

Browser API

Graflume.dumbbell()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval · Dumbbell chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Dumbbell chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "dumbbell",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Dumbbell chart uses runnable data and options to demonstrate raw estimator.",
    "text": "Interval · Dumbbell chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.dumbbell('#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": "Interval · Dumbbell chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Dumbbell chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    },
    "options": {
      "mode": "dumbbell",
      "smooth": false
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Dumbbell chart uses runnable data and options to demonstrate raw estimator.",
    "text": "Interval · Dumbbell chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

Error bar chart

Error bar chart uses runnable data and options to demonstrate CI/PI/SE/SD/IQR/HDI.

StatusLoading

error-bar
CI/PI/SE/SD/IQR/HDI

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

Error bar chart · Row data
`category`ordinal	`value`quantitative	`low`quantitative	`high`quantitative
Guided setup	8.4	5.9	10.8
Saved views	6.7	4.8	8.6
Smart alerts	5.1	2.6	7.5
Team sharing	3.9	1.4	6.3
CSV onboarding	2.3	-0.3	4.8

Error bar chart uses runnable data and options to demonstrate CI/PI/SE/SD/IQR/HDI.

Browser API · Portable schema

Browser API

Graflume.errorBar()

const data = [
  {
    "category": "Guided setup",
    "high": 10.8,
    "low": 5.9,
    "previous": 4.1,
    "value": 8.4
  },
  {
    "category": "Saved views",
    "high": 8.6,
    "low": 4.8,
    "previous": 2.8,
    "value": 6.7
  },
  {
    "category": "Smart alerts",
    "high": 7.5,
    "low": 2.6,
    "previous": 1.7,
    "value": 5.1
  },
  {
    "category": "Team sharing",
    "high": 6.3,
    "low": 1.4,
    "previous": 1.5,
    "value": 3.9
  },
  {
    "category": "CSV onboarding",
    "high": 4.8,
    "low": -0.3,
    "previous": 0.8,
    "value": 2.3
  }
];

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": "Interval · Error bar chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Error bar chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Error bar chart uses runnable data and options to demonstrate CI/PI/SE/SD/IQR/HDI.",
    "text": "Interval · Error bar chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
};

Graflume.errorBar('#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": "Interval · Error bar chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "angle": -35,
        "maxLength": 20,
        "orientation": "auto",
        "padding": 12
      },
      "title": {
        "padding": 62,
        "text": "Study group"
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "number"
      },
      "title": {
        "padding": 70,
        "text": "Estimate and 95% interval"
      }
    }
  },
  "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": "low",
          "format": "number",
          "label": "Low"
        },
        {
          "field": "high",
          "format": "number",
          "label": "High"
        }
      ],
      "title": "Interval · Error bar chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "high": "high",
      "low": "low"
    }
  },
  "padding": {
    "bottom": 90,
    "left": 82,
    "right": 30,
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Error bar chart uses runnable data and options to demonstrate CI/PI/SE/SD/IQR/HDI.",
    "text": "Interval · Error bar chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Experiment",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Lift (points)",
    "type": "quantitative"
  }
}

ID	Name	Quick API	mode	mark	renderer
`intervals`	Intervals	`intervals()`	`default`	`interval`	`canvas`
`area-range`	Area range chart	`areaRange()`	`area-range`	`range`	`canvas`
`area-spline-range`	Smooth area range chart	`areaSplineRange()`	`area-spline-range`	`range`	`canvas`
`column-range`	Column range chart	`columnRange()`	`column-range`	`range`	`canvas`
`dumbbell`	Dumbbell chart	`dumbbell()`	`dumbbell`	`range`	`canvas`
`error-bar`	Error bar chart	`errorBar()`	`error-bar`	`interval`	`canvas`

Interval · Chart-specific features

Every executable mode in this family

Intervals

Intervals · Row data

Graflume.intervals()

ChartSpec 0.1 · options

Area range chart

Area range chart · Row data

Graflume.areaRange()

ChartSpec 0.1 · options

Smooth area range chart

Smooth area range chart · Row data

Graflume.areaSplineRange()

ChartSpec 0.1 · options

Column range chart

Column range chart · Row data

Graflume.columnRange()

ChartSpec 0.1 · options

Dumbbell chart

Dumbbell chart · Row data

Graflume.dumbbell()

ChartSpec 0.1 · options

Error bar chart

Error bar chart · Row data

Graflume.errorBar()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance

Identifier	Canonical mode ID
`arearange`	`area-range`
`areasplinerange`	`area-spline-range`
`columnrange`	`column-range`
`dumbbell`	`dumbbell`
`errorbar`	`error-bar`