Annotation

Annotation chart

Annotation chart uses runnable data and options to demonstrate datum/layer/range/plot targets; runtime CRUD.

StatusLoading

annotation
datum/layer/range/plot targets
runtime CRUD
keyboard authoring

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

Annotation chart · Row data
`date`temporal	`value`quantitative	`annotation`ordinal
2026-01-01	48	—
2026-02-01	53	—
2026-03-01	51	Spring release
2026-04-01	59	—
2026-05-01	66	—
2026-06-01	70	—
2026-07-01	76	—
2026-08-01	82	—
2026-09-01	80	Team plan launch
2026-10-01	89	—
2026-11-01	96	—
2026-12-01	104	—

Annotation chart uses runnable data and options to demonstrate datum/layer/range/plot targets; runtime CRUD.

Browser API · Portable schema

Browser API

Graflume.annotation()

const data = [
  {
    "annotation": null,
    "date": "2026-01-01",
    "value": 48
  },
  {
    "annotation": null,
    "date": "2026-02-01",
    "value": 53
  },
  {
    "annotation": "Spring release",
    "date": "2026-03-01",
    "value": 51
  },
  {
    "annotation": null,
    "date": "2026-04-01",
    "value": 59
  },
  {
    "annotation": null,
    "date": "2026-05-01",
    "value": 66
  },
  {
    "annotation": null,
    "date": "2026-06-01",
    "value": 70
  },
  {
    "annotation": null,
    "date": "2026-07-01",
    "value": 76
  },
  {
    "annotation": null,
    "date": "2026-08-01",
    "value": 82
  },
  {
    "annotation": "Team plan launch",
    "date": "2026-09-01",
    "value": 80
  },
  {
    "annotation": null,
    "date": "2026-10-01",
    "value": 89
  },
  {
    "annotation": null,
    "date": "2026-11-01",
    "value": 96
  },
  {
    "annotation": null,
    "date": "2026-12-01",
    "value": 104
  }
];

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": "Annotation example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Annotation chart uses runnable data and options to demonstrate datum/layer/range/plot targets; runtime CRUD.",
    "text": "Annotation"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.annotation('#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": "Annotation example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Annotation chart uses runnable data and options to demonstrate datum/layer/range/plot targets; runtime CRUD.",
    "text": "Annotation"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
}

Annotated timeline

Annotated timeline uses runnable data and options to demonstrate callout connectors; visibility and serialization.

StatusLoading

annotated-timeline
callout connectors
visibility and serialization
drag and resize handles

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

Annotated timeline · Row data
`date`temporal	`value`quantitative	`annotation`ordinal
2026-01-01	48	—
2026-02-01	53	—
2026-03-01	51	Spring release
2026-04-01	59	—
2026-05-01	66	—
2026-06-01	70	—
2026-07-01	76	—
2026-08-01	82	—
2026-09-01	80	Team plan launch
2026-10-01	89	—
2026-11-01	96	—
2026-12-01	104	—

Annotated timeline uses runnable data and options to demonstrate callout connectors; visibility and serialization.

Browser API · Portable schema

Browser API

Graflume.annotatedTimeline()

const data = [
  {
    "annotation": null,
    "date": "2026-01-01",
    "value": 48
  },
  {
    "annotation": null,
    "date": "2026-02-01",
    "value": 53
  },
  {
    "annotation": "Spring release",
    "date": "2026-03-01",
    "value": 51
  },
  {
    "annotation": null,
    "date": "2026-04-01",
    "value": 59
  },
  {
    "annotation": null,
    "date": "2026-05-01",
    "value": 66
  },
  {
    "annotation": null,
    "date": "2026-06-01",
    "value": 70
  },
  {
    "annotation": null,
    "date": "2026-07-01",
    "value": 76
  },
  {
    "annotation": null,
    "date": "2026-08-01",
    "value": 82
  },
  {
    "annotation": "Team plan launch",
    "date": "2026-09-01",
    "value": 80
  },
  {
    "annotation": null,
    "date": "2026-10-01",
    "value": 89
  },
  {
    "annotation": null,
    "date": "2026-11-01",
    "value": 96
  },
  {
    "annotation": null,
    "date": "2026-12-01",
    "value": 104
  }
];

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": "Annotation · Annotated timeline example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation · Annotated timeline",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Annotated timeline uses runnable data and options to demonstrate callout connectors; visibility and serialization.",
    "text": "Annotation · Annotated timeline"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.annotatedTimeline('#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": "Annotation · Annotated timeline example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation · Annotated timeline",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Annotated timeline uses runnable data and options to demonstrate callout connectors; visibility and serialization.",
    "text": "Annotation · Annotated timeline"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
}

Event flags

Event flags uses runnable data and options to demonstrate collision-aware placement; data-coordinate primitive registry.

StatusLoading

event-flags
collision-aware placement
data-coordinate primitive registry
undo and redo

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

Event flags uses runnable data and options to demonstrate collision-aware placement; data-coordinate primitive registry.

Event flags · Row data
`date`temporal	`value`quantitative	`title`ordinal
2026-03-01	51	Spring release
2026-09-01	80	Team plan launch

Browser API · Portable schema

Browser API

Graflume.eventFlags()

const data = [
  {
    "base": 39.78,
    "category": "Mar",
    "close": 51,
    "conversion": 22.16,
    "date": "2026-03-01",
    "direction": 90,
    "down": 74.6,
    "high": 59,
    "low": 45,
    "lower": 44,
    "magnitude": 11.8,
    "minus": 36.8,
    "open": 53,
    "plus": 27.2,
    "previous": 53,
    "price": 77.85,
    "radius": 21.22,
    "resistance": 60,
    "secondary": 46.2,
    "series": "Before launch",
    "signal": 51.82,
    "speed": 23.4,
    "support": 43,
    "target": 59.2,
    "title": "Spring release",
    "up": 58.8,
    "upper": 60,
    "value": 51,
    "volume": 1706,
    "width": 4.6,
    "z": 10.8
  },
  {
    "base": 62.4,
    "category": "Sep",
    "close": 80,
    "conversion": 25.21,
    "date": "2026-09-01",
    "direction": 276,
    "down": 64.4,
    "high": 88,
    "low": 74,
    "lower": 73,
    "magnitude": 14.2,
    "minus": 30.2,
    "open": 82,
    "plus": 36.8,
    "previous": 82,
    "price": 80.78,
    "radius": 27.6,
    "resistance": 89,
    "secondary": 61.27,
    "series": "After launch",
    "signal": 80.68,
    "speed": 39.6,
    "support": 72,
    "target": 86.8,
    "title": "Team plan launch",
    "up": 73.2,
    "upper": 89,
    "value": 80,
    "volume": 2444,
    "width": 2.8,
    "z": 19.2
  }
];

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": "Annotation · Event flags example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "title",
          "format": "auto",
          "label": "Title"
        }
      ],
      "title": "Annotation · Event flags",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "title": "title"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Event flags uses runnable data and options to demonstrate collision-aware placement; data-coordinate primitive registry.",
    "text": "Annotation · Event flags"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.eventFlags('#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": "Annotation · Event flags example"
  },
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "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": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "title",
          "format": "auto",
          "label": "Title"
        }
      ],
      "title": "Annotation · Event flags",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "title": "title"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Event flags uses runnable data and options to demonstrate collision-aware placement; data-coordinate primitive registry.",
    "text": "Annotation · Event flags"
  },
  "width": "container",
  "x": {
    "field": "date",
    "title": "Month",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
}

Playback and transitions

Play frames from a time field and stable key, with smooth enter, update, and exit transitions.

StatusLoading

playback
smooth-transitions

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

Playback smoothly interpolates matching stable keys for 600 ms with ease-in-out. Entering or exiting marks fade, incompatible shapes crossfade, and reduced-motion jumps directly to the final state.

playback · cumulative · date · key=date · transition=600ms/ease-in-out · fade/crossfade

Loading

Playback and transitions · Row data
`date`temporal	`value`quantitative	`annotation`ordinal
2026-01-01	22	Launch
2026-02-01	31	—
2026-03-01	27	Campaign
2026-04-01	43	—

Play frames from a time field and stable key, with smooth enter, update, and exit transitions.

Browser API · Portable schema

Browser API

Graflume.annotation()

const data = [
  {
    "annotation": "Launch",
    "date": "2026-01-01",
    "value": 22
  },
  {
    "annotation": null,
    "date": "2026-02-01",
    "value": 31
  },
  {
    "annotation": "Campaign",
    "date": "2026-03-01",
    "value": 27
  },
  {
    "annotation": null,
    "date": "2026-04-01",
    "value": 43
  }
];

const options = {
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "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": true
    },
    "hover": true,
    "playback": {
      "autoplay": false,
      "field": "date",
      "filter": true,
      "interval": 1000,
      "key": "date",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation · Playback and transitions",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "width": "container",
  "x": {
    "field": "date",
    "scale": {
      "domain": [
        "2026-01-01",
        "2026-04-01"
      ]
    },
    "title": "date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "scale": {
      "domain": [
        0,
        48
      ]
    },
    "title": "value",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": {
      "format": {
        "dateStyle": "medium",
        "timeZone": "UTC",
        "type": "date"
      },
      "labels": {
        "orientation": "horizontal"
      },
      "position": "bottom",
      "ticks": {
        "count": 4,
        "spacing": 8
      }
    },
    "y": {
      "format": {
        "type": "integer"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "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": true
    },
    "hover": true,
    "playback": {
      "autoplay": false,
      "field": "date",
      "filter": true,
      "interval": 1000,
      "key": "date",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "dateStyle": "long",
          "field": "date",
          "format": "date",
          "label": "Date",
          "timeZone": "UTC"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "annotation",
          "format": "auto",
          "label": "Annotation"
        }
      ],
      "title": "Annotation · Playback and transitions",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "annotation": "annotation"
    },
    "point": true
  },
  "width": "container",
  "x": {
    "field": "date",
    "scale": {
      "domain": [
        "2026-01-01",
        "2026-04-01"
      ]
    },
    "title": "date",
    "type": "temporal"
  },
  "y": {
    "field": "value",
    "scale": {
      "domain": [
        0,
        48
      ]
    },
    "title": "value",
    "type": "quantitative"
  }
}

ID	Name	Quick API	mode	mark	renderer
`annotation`	Annotation chart	`annotation()`	`default`	`annotation`	`canvas`
`annotated-timeline`	Annotated timeline	`annotatedTimeline()`	`timeline`	`annotation`	`canvas`
`event-flags`	Event flags	`eventFlags()`	`event-flags`	`flags`	`canvas`

Annotation · Chart-specific features

Every executable mode in this family

Annotation chart

Annotation chart · Row data

Graflume.annotation()

ChartSpec 0.1 · options

Annotated timeline

Annotated timeline · Row data

Graflume.annotatedTimeline()

ChartSpec 0.1 · options

Event flags

Event flags · Row data

Graflume.eventFlags()

ChartSpec 0.1 · options

Playback and transitions

Playback and transitions · Row data

Graflume.annotation()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance