Graflume · Alpha

Line · Chart-specific features

Read direction and rate of change across ordered categories or time. These tabs come from Graflume's public catalog. Every mode owns runnable data, options, a Quick API, and source-backed feature claims.

Chart family · Default families

Line

Read direction and rate of change across ordered categories or time.

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

Chart-specific features

Every executable mode in this family

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

Line chart

Line chart uses runnable data and options to demonstrate shared linear, step-before/after/center, monotone, natural, basis and cardinal curve registry; min-max sampling.

StatusLoading

line
shared linear, step-before/after/center, monotone, natural, basis and cardinal curve registry
min-max sampling
duplicate and implicit sort policy
worker-bounded streaming retention

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

Line chart uses runnable data and options to demonstrate shared linear, step-before/after/center, monotone, natural, basis and cardinal curve registry; min-max sampling.

Line chart · Row data
`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

Browser API · Portable schema

Browser API

Graflume.line()

const data = [
  {
    "base": 37.44,
    "category": "Jan",
    "close": 48,
    "conversion": 18,
    "date": "2026-01-01",
    "direction": 28,
    "down": 78,
    "high": 54,
    "low": 44,
    "lower": 43,
    "magnitude": 7,
    "minus": 39,
    "open": 44,
    "plus": 24,
    "previous": 44,
    "price": 72,
    "radius": 20.560000000000002,
    "resistance": 57,
    "secondary": 36,
    "series": "Before launch",
    "signal": 48.2,
    "speed": 18,
    "support": 40,
    "target": 50,
    "title": "",
    "up": 54,
    "upper": 55,
    "value": 48,
    "volume": 1250,
    "width": 2.8,
    "z": 8
  },
  {
    "base": 41.34,
    "category": "Feb",
    "close": 53,
    "conversion": 20.28,
    "date": "2026-02-01",
    "direction": 59,
    "down": 76.3,
    "high": 60,
    "low": 48,
    "lower": 47,
    "magnitude": 9.4,
    "minus": 37.9,
    "open": 48,
    "plus": 25.6,
    "previous": 48,
    "price": 75.41,
    "radius": 21.66,
    "resistance": 62,
    "secondary": 41.97,
    "series": "Before launch",
    "signal": 53.16,
    "speed": 20.7,
    "support": 45,
    "target": 54.6,
    "title": "",
    "up": 56.4,
    "upper": 61,
    "value": 53,
    "volume": 1478,
    "width": 3.6999999999999997,
    "z": 9.4
  },
  {
    "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": 46.02,
    "category": "Apr",
    "close": 59,
    "conversion": 23.4,
    "date": "2026-04-01",
    "direction": 121,
    "down": 72.9,
    "high": 65,
    "low": 55,
    "lower": 54,
    "magnitude": 14.2,
    "minus": 35.7,
    "open": 51,
    "plus": 28.8,
    "previous": 51,
    "price": 78.81,
    "radius": 22.98,
    "resistance": 68,
    "secondary": 48,
    "series": "Before launch",
    "signal": 59.48,
    "speed": 26.1,
    "support": 51,
    "target": 63.8,
    "title": "",
    "up": 61.2,
    "upper": 66,
    "value": 59,
    "volume": 1724,
    "width": 5.5,
    "z": 12.2
  },
  {
    "base": 51.48,
    "category": "May",
    "close": 66,
    "conversion": 23.95,
    "date": "2026-05-01",
    "direction": 152,
    "down": 71.2,
    "high": 73,
    "low": 61,
    "lower": 60,
    "magnitude": 16.6,
    "minus": 34.6,
    "open": 59,
    "plus": 30.4,
    "previous": 59,
    "price": 78.47,
    "radius": 24.52,
    "resistance": 75,
    "secondary": 48.17,
    "series": "Before launch",
    "signal": 66.24,
    "speed": 28.8,
    "support": 58,
    "target": 68.4,
    "title": "",
    "up": 63.6,
    "upper": 74,
    "value": 66,
    "volume": 1952,
    "width": 2.8,
    "z": 13.6
  },
  {
    "base": 54.6,
    "category": "Jun",
    "close": 70,
    "conversion": 24.03,
    "date": "2026-06-01",
    "direction": 183,
    "down": 69.5,
    "high": 78,
    "low": 64,
    "lower": 63,
    "magnitude": 7,
    "minus": 33.5,
    "open": 66,
    "plus": 32,
    "previous": 66,
    "price": 77.63,
    "radius": 25.4,
    "resistance": 79,
    "secondary": 48.47,
    "series": "Before launch",
    "signal": 70.3,
    "speed": 31.5,
    "support": 62,
    "target": 73,
    "title": "",
    "up": 66,
    "upper": 79,
    "value": 70,
    "volume": 2180,
    "width": 3.6999999999999997,
    "z": 15
  },
  {
    "base": 59.28,
    "category": "Jul",
    "close": 76,
    "conversion": 24.01,
    "date": "2026-07-01",
    "direction": 214,
    "down": 67.8,
    "high": 82,
    "low": 72,
    "lower": 71,
    "magnitude": 9.4,
    "minus": 32.4,
    "open": 70,
    "plus": 33.6,
    "previous": 70,
    "price": 77.31,
    "radius": 26.72,
    "resistance": 85,
    "secondary": 50.62,
    "series": "After launch",
    "signal": 76.16,
    "speed": 34.2,
    "support": 68,
    "target": 77.6,
    "title": "",
    "up": 68.4,
    "upper": 83,
    "value": 76,
    "volume": 2198,
    "width": 4.6,
    "z": 16.4
  },
  {
    "base": 63.96,
    "category": "Aug",
    "close": 82,
    "conversion": 24.31,
    "date": "2026-08-01",
    "direction": 245,
    "down": 66.1,
    "high": 89,
    "low": 77,
    "lower": 76,
    "magnitude": 11.8,
    "minus": 31.299999999999997,
    "open": 76,
    "plus": 35.2,
    "previous": 76,
    "price": 78.31,
    "radius": 28.04,
    "resistance": 91,
    "secondary": 55.17,
    "series": "After launch",
    "signal": 82.02,
    "speed": 36.900000000000006,
    "support": 74,
    "target": 82.2,
    "title": "",
    "up": 70.8,
    "upper": 90,
    "value": 82,
    "volume": 2426,
    "width": 5.5,
    "z": 17.799999999999997
  },
  {
    "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
  },
  {
    "base": 69.42,
    "category": "Oct",
    "close": 89,
    "conversion": 26.8,
    "date": "2026-10-01",
    "direction": 307,
    "down": 62.7,
    "high": 95,
    "low": 85,
    "lower": 84,
    "magnitude": 16.6,
    "minus": 29.1,
    "open": 80,
    "plus": 38.4,
    "previous": 80,
    "price": 84.2,
    "radius": 29.580000000000002,
    "resistance": 98,
    "secondary": 67.07,
    "series": "After launch",
    "signal": 89.24,
    "speed": 42.3,
    "support": 81,
    "target": 91.4,
    "title": "",
    "up": 75.6,
    "upper": 96,
    "value": 89,
    "volume": 2672,
    "width": 3.6999999999999997,
    "z": 20.6
  },
  {
    "base": 74.88,
    "category": "Nov",
    "close": 96,
    "conversion": 28.94,
    "date": "2026-11-01",
    "direction": 338,
    "down": 61,
    "high": 103,
    "low": 91,
    "lower": 90,
    "magnitude": 7,
    "minus": 28,
    "open": 89,
    "plus": 40,
    "previous": 89,
    "price": 87.6,
    "radius": 31.12,
    "resistance": 105,
    "secondary": 70.96,
    "series": "After launch",
    "signal": 96,
    "speed": 45,
    "support": 88,
    "target": 96,
    "title": "",
    "up": 78,
    "upper": 104,
    "value": 96,
    "volume": 2900,
    "width": 4.6,
    "z": 22
  },
  {
    "base": 81.12,
    "category": "Dec",
    "close": 104,
    "conversion": 31.27,
    "date": "2026-12-01",
    "direction": 9,
    "down": 59.3,
    "high": 112,
    "low": 98,
    "lower": 97,
    "magnitude": 9.4,
    "minus": 26.9,
    "open": 96,
    "plus": 41.6,
    "previous": 96,
    "price": 90.01,
    "radius": 32.879999999999995,
    "resistance": 113,
    "secondary": 72.44,
    "series": "After launch",
    "signal": 103.66,
    "speed": 47.7,
    "support": 96,
    "target": 100.6,
    "title": "",
    "up": 80.4,
    "upper": 113,
    "value": 104,
    "volume": 2918,
    "width": 5.5,
    "z": 23.4
  }
];

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": "Line example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Line chart uses runnable data and options to demonstrate shared linear, step-before/after/center, monotone, natural, basis and cardinal curve registry; min-max sampling.",
    "text": "Line"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.line('#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": "Line example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Line chart uses runnable data and options to demonstrate shared linear, step-before/after/center, monotone, natural, basis and cardinal curve registry; min-max sampling.",
    "text": "Line"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
}

Trendline

Trendline uses runnable data and options to demonstrate gap, zero and connect missing-value policies; appendData.

StatusLoading

trendline
gap, zero and connect missing-value policies
appendData
data-domain navigation

Graflume.trendline() Canvas 2D

Control help

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

Trendline uses runnable data and options to demonstrate gap, zero and connect missing-value policies; appendData.

Trendline · Row data
`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

Browser API · Portable schema

Browser API

Graflume.trendline()

const data = [
  {
    "base": 37.44,
    "category": "Jan",
    "close": 48,
    "conversion": 18,
    "date": "2026-01-01",
    "direction": 28,
    "down": 78,
    "high": 54,
    "low": 44,
    "lower": 43,
    "magnitude": 7,
    "minus": 39,
    "open": 44,
    "plus": 24,
    "previous": 44,
    "price": 72,
    "radius": 20.560000000000002,
    "resistance": 57,
    "secondary": 36,
    "series": "Before launch",
    "signal": 48.2,
    "speed": 18,
    "support": 40,
    "target": 50,
    "title": "",
    "up": 54,
    "upper": 55,
    "value": 48,
    "volume": 1250,
    "width": 2.8,
    "z": 8
  },
  {
    "base": 41.34,
    "category": "Feb",
    "close": 53,
    "conversion": 20.28,
    "date": "2026-02-01",
    "direction": 59,
    "down": 76.3,
    "high": 60,
    "low": 48,
    "lower": 47,
    "magnitude": 9.4,
    "minus": 37.9,
    "open": 48,
    "plus": 25.6,
    "previous": 48,
    "price": 75.41,
    "radius": 21.66,
    "resistance": 62,
    "secondary": 41.97,
    "series": "Before launch",
    "signal": 53.16,
    "speed": 20.7,
    "support": 45,
    "target": 54.6,
    "title": "",
    "up": 56.4,
    "upper": 61,
    "value": 53,
    "volume": 1478,
    "width": 3.6999999999999997,
    "z": 9.4
  },
  {
    "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": 46.02,
    "category": "Apr",
    "close": 59,
    "conversion": 23.4,
    "date": "2026-04-01",
    "direction": 121,
    "down": 72.9,
    "high": 65,
    "low": 55,
    "lower": 54,
    "magnitude": 14.2,
    "minus": 35.7,
    "open": 51,
    "plus": 28.8,
    "previous": 51,
    "price": 78.81,
    "radius": 22.98,
    "resistance": 68,
    "secondary": 48,
    "series": "Before launch",
    "signal": 59.48,
    "speed": 26.1,
    "support": 51,
    "target": 63.8,
    "title": "",
    "up": 61.2,
    "upper": 66,
    "value": 59,
    "volume": 1724,
    "width": 5.5,
    "z": 12.2
  },
  {
    "base": 51.48,
    "category": "May",
    "close": 66,
    "conversion": 23.95,
    "date": "2026-05-01",
    "direction": 152,
    "down": 71.2,
    "high": 73,
    "low": 61,
    "lower": 60,
    "magnitude": 16.6,
    "minus": 34.6,
    "open": 59,
    "plus": 30.4,
    "previous": 59,
    "price": 78.47,
    "radius": 24.52,
    "resistance": 75,
    "secondary": 48.17,
    "series": "Before launch",
    "signal": 66.24,
    "speed": 28.8,
    "support": 58,
    "target": 68.4,
    "title": "",
    "up": 63.6,
    "upper": 74,
    "value": 66,
    "volume": 1952,
    "width": 2.8,
    "z": 13.6
  },
  {
    "base": 54.6,
    "category": "Jun",
    "close": 70,
    "conversion": 24.03,
    "date": "2026-06-01",
    "direction": 183,
    "down": 69.5,
    "high": 78,
    "low": 64,
    "lower": 63,
    "magnitude": 7,
    "minus": 33.5,
    "open": 66,
    "plus": 32,
    "previous": 66,
    "price": 77.63,
    "radius": 25.4,
    "resistance": 79,
    "secondary": 48.47,
    "series": "Before launch",
    "signal": 70.3,
    "speed": 31.5,
    "support": 62,
    "target": 73,
    "title": "",
    "up": 66,
    "upper": 79,
    "value": 70,
    "volume": 2180,
    "width": 3.6999999999999997,
    "z": 15
  },
  {
    "base": 59.28,
    "category": "Jul",
    "close": 76,
    "conversion": 24.01,
    "date": "2026-07-01",
    "direction": 214,
    "down": 67.8,
    "high": 82,
    "low": 72,
    "lower": 71,
    "magnitude": 9.4,
    "minus": 32.4,
    "open": 70,
    "plus": 33.6,
    "previous": 70,
    "price": 77.31,
    "radius": 26.72,
    "resistance": 85,
    "secondary": 50.62,
    "series": "After launch",
    "signal": 76.16,
    "speed": 34.2,
    "support": 68,
    "target": 77.6,
    "title": "",
    "up": 68.4,
    "upper": 83,
    "value": 76,
    "volume": 2198,
    "width": 4.6,
    "z": 16.4
  },
  {
    "base": 63.96,
    "category": "Aug",
    "close": 82,
    "conversion": 24.31,
    "date": "2026-08-01",
    "direction": 245,
    "down": 66.1,
    "high": 89,
    "low": 77,
    "lower": 76,
    "magnitude": 11.8,
    "minus": 31.299999999999997,
    "open": 76,
    "plus": 35.2,
    "previous": 76,
    "price": 78.31,
    "radius": 28.04,
    "resistance": 91,
    "secondary": 55.17,
    "series": "After launch",
    "signal": 82.02,
    "speed": 36.900000000000006,
    "support": 74,
    "target": 82.2,
    "title": "",
    "up": 70.8,
    "upper": 90,
    "value": 82,
    "volume": 2426,
    "width": 5.5,
    "z": 17.799999999999997
  },
  {
    "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
  },
  {
    "base": 69.42,
    "category": "Oct",
    "close": 89,
    "conversion": 26.8,
    "date": "2026-10-01",
    "direction": 307,
    "down": 62.7,
    "high": 95,
    "low": 85,
    "lower": 84,
    "magnitude": 16.6,
    "minus": 29.1,
    "open": 80,
    "plus": 38.4,
    "previous": 80,
    "price": 84.2,
    "radius": 29.580000000000002,
    "resistance": 98,
    "secondary": 67.07,
    "series": "After launch",
    "signal": 89.24,
    "speed": 42.3,
    "support": 81,
    "target": 91.4,
    "title": "",
    "up": 75.6,
    "upper": 96,
    "value": 89,
    "volume": 2672,
    "width": 3.6999999999999997,
    "z": 20.6
  },
  {
    "base": 74.88,
    "category": "Nov",
    "close": 96,
    "conversion": 28.94,
    "date": "2026-11-01",
    "direction": 338,
    "down": 61,
    "high": 103,
    "low": 91,
    "lower": 90,
    "magnitude": 7,
    "minus": 28,
    "open": 89,
    "plus": 40,
    "previous": 89,
    "price": 87.6,
    "radius": 31.12,
    "resistance": 105,
    "secondary": 70.96,
    "series": "After launch",
    "signal": 96,
    "speed": 45,
    "support": 88,
    "target": 96,
    "title": "",
    "up": 78,
    "upper": 104,
    "value": 96,
    "volume": 2900,
    "width": 4.6,
    "z": 22
  },
  {
    "base": 81.12,
    "category": "Dec",
    "close": 104,
    "conversion": 31.27,
    "date": "2026-12-01",
    "direction": 9,
    "down": 59.3,
    "high": 112,
    "low": 98,
    "lower": 97,
    "magnitude": 9.4,
    "minus": 26.9,
    "open": 96,
    "plus": 41.6,
    "previous": 96,
    "price": 90.01,
    "radius": 32.879999999999995,
    "resistance": 113,
    "secondary": 72.44,
    "series": "After launch",
    "signal": 103.66,
    "speed": 47.7,
    "support": 96,
    "target": 100.6,
    "title": "",
    "up": 80.4,
    "upper": 113,
    "value": 104,
    "volume": 2918,
    "width": 5.5,
    "z": 23.4
  }
];

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": "Line · Trendline example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Trendline",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Trendline uses runnable data and options to demonstrate gap, zero and connect missing-value policies; appendData.",
    "text": "Line · Trendline"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.trendline('#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": "Line · Trendline example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Trendline",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Trendline uses runnable data and options to demonstrate gap, zero and connect missing-value policies; appendData.",
    "text": "Line · Trendline"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
}

Spline chart

Spline chart uses runnable data and options to demonstrate linear trendline; per-observation semantic and datum hit targets.

StatusLoading

spline
linear trendline
per-observation semantic and datum hit targets
named transform DAG reuse

Graflume.spline() Canvas 2D

Control help

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

Spline chart uses runnable data and options to demonstrate linear trendline; per-observation semantic and datum hit targets.

Spline chart · Row data
`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

Browser API · Portable schema

Browser API

Graflume.spline()

const data = [
  {
    "base": 37.44,
    "category": "Jan",
    "close": 48,
    "conversion": 18,
    "date": "2026-01-01",
    "direction": 28,
    "down": 78,
    "high": 54,
    "low": 44,
    "lower": 43,
    "magnitude": 7,
    "minus": 39,
    "open": 44,
    "plus": 24,
    "previous": 44,
    "price": 72,
    "radius": 20.560000000000002,
    "resistance": 57,
    "secondary": 36,
    "series": "Before launch",
    "signal": 48.2,
    "speed": 18,
    "support": 40,
    "target": 50,
    "title": "",
    "up": 54,
    "upper": 55,
    "value": 48,
    "volume": 1250,
    "width": 2.8,
    "z": 8
  },
  {
    "base": 41.34,
    "category": "Feb",
    "close": 53,
    "conversion": 20.28,
    "date": "2026-02-01",
    "direction": 59,
    "down": 76.3,
    "high": 60,
    "low": 48,
    "lower": 47,
    "magnitude": 9.4,
    "minus": 37.9,
    "open": 48,
    "plus": 25.6,
    "previous": 48,
    "price": 75.41,
    "radius": 21.66,
    "resistance": 62,
    "secondary": 41.97,
    "series": "Before launch",
    "signal": 53.16,
    "speed": 20.7,
    "support": 45,
    "target": 54.6,
    "title": "",
    "up": 56.4,
    "upper": 61,
    "value": 53,
    "volume": 1478,
    "width": 3.6999999999999997,
    "z": 9.4
  },
  {
    "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": 46.02,
    "category": "Apr",
    "close": 59,
    "conversion": 23.4,
    "date": "2026-04-01",
    "direction": 121,
    "down": 72.9,
    "high": 65,
    "low": 55,
    "lower": 54,
    "magnitude": 14.2,
    "minus": 35.7,
    "open": 51,
    "plus": 28.8,
    "previous": 51,
    "price": 78.81,
    "radius": 22.98,
    "resistance": 68,
    "secondary": 48,
    "series": "Before launch",
    "signal": 59.48,
    "speed": 26.1,
    "support": 51,
    "target": 63.8,
    "title": "",
    "up": 61.2,
    "upper": 66,
    "value": 59,
    "volume": 1724,
    "width": 5.5,
    "z": 12.2
  },
  {
    "base": 51.48,
    "category": "May",
    "close": 66,
    "conversion": 23.95,
    "date": "2026-05-01",
    "direction": 152,
    "down": 71.2,
    "high": 73,
    "low": 61,
    "lower": 60,
    "magnitude": 16.6,
    "minus": 34.6,
    "open": 59,
    "plus": 30.4,
    "previous": 59,
    "price": 78.47,
    "radius": 24.52,
    "resistance": 75,
    "secondary": 48.17,
    "series": "Before launch",
    "signal": 66.24,
    "speed": 28.8,
    "support": 58,
    "target": 68.4,
    "title": "",
    "up": 63.6,
    "upper": 74,
    "value": 66,
    "volume": 1952,
    "width": 2.8,
    "z": 13.6
  },
  {
    "base": 54.6,
    "category": "Jun",
    "close": 70,
    "conversion": 24.03,
    "date": "2026-06-01",
    "direction": 183,
    "down": 69.5,
    "high": 78,
    "low": 64,
    "lower": 63,
    "magnitude": 7,
    "minus": 33.5,
    "open": 66,
    "plus": 32,
    "previous": 66,
    "price": 77.63,
    "radius": 25.4,
    "resistance": 79,
    "secondary": 48.47,
    "series": "Before launch",
    "signal": 70.3,
    "speed": 31.5,
    "support": 62,
    "target": 73,
    "title": "",
    "up": 66,
    "upper": 79,
    "value": 70,
    "volume": 2180,
    "width": 3.6999999999999997,
    "z": 15
  },
  {
    "base": 59.28,
    "category": "Jul",
    "close": 76,
    "conversion": 24.01,
    "date": "2026-07-01",
    "direction": 214,
    "down": 67.8,
    "high": 82,
    "low": 72,
    "lower": 71,
    "magnitude": 9.4,
    "minus": 32.4,
    "open": 70,
    "plus": 33.6,
    "previous": 70,
    "price": 77.31,
    "radius": 26.72,
    "resistance": 85,
    "secondary": 50.62,
    "series": "After launch",
    "signal": 76.16,
    "speed": 34.2,
    "support": 68,
    "target": 77.6,
    "title": "",
    "up": 68.4,
    "upper": 83,
    "value": 76,
    "volume": 2198,
    "width": 4.6,
    "z": 16.4
  },
  {
    "base": 63.96,
    "category": "Aug",
    "close": 82,
    "conversion": 24.31,
    "date": "2026-08-01",
    "direction": 245,
    "down": 66.1,
    "high": 89,
    "low": 77,
    "lower": 76,
    "magnitude": 11.8,
    "minus": 31.299999999999997,
    "open": 76,
    "plus": 35.2,
    "previous": 76,
    "price": 78.31,
    "radius": 28.04,
    "resistance": 91,
    "secondary": 55.17,
    "series": "After launch",
    "signal": 82.02,
    "speed": 36.900000000000006,
    "support": 74,
    "target": 82.2,
    "title": "",
    "up": 70.8,
    "upper": 90,
    "value": 82,
    "volume": 2426,
    "width": 5.5,
    "z": 17.799999999999997
  },
  {
    "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
  },
  {
    "base": 69.42,
    "category": "Oct",
    "close": 89,
    "conversion": 26.8,
    "date": "2026-10-01",
    "direction": 307,
    "down": 62.7,
    "high": 95,
    "low": 85,
    "lower": 84,
    "magnitude": 16.6,
    "minus": 29.1,
    "open": 80,
    "plus": 38.4,
    "previous": 80,
    "price": 84.2,
    "radius": 29.580000000000002,
    "resistance": 98,
    "secondary": 67.07,
    "series": "After launch",
    "signal": 89.24,
    "speed": 42.3,
    "support": 81,
    "target": 91.4,
    "title": "",
    "up": 75.6,
    "upper": 96,
    "value": 89,
    "volume": 2672,
    "width": 3.6999999999999997,
    "z": 20.6
  },
  {
    "base": 74.88,
    "category": "Nov",
    "close": 96,
    "conversion": 28.94,
    "date": "2026-11-01",
    "direction": 338,
    "down": 61,
    "high": 103,
    "low": 91,
    "lower": 90,
    "magnitude": 7,
    "minus": 28,
    "open": 89,
    "plus": 40,
    "previous": 89,
    "price": 87.6,
    "radius": 31.12,
    "resistance": 105,
    "secondary": 70.96,
    "series": "After launch",
    "signal": 96,
    "speed": 45,
    "support": 88,
    "target": 96,
    "title": "",
    "up": 78,
    "upper": 104,
    "value": 96,
    "volume": 2900,
    "width": 4.6,
    "z": 22
  },
  {
    "base": 81.12,
    "category": "Dec",
    "close": 104,
    "conversion": 31.27,
    "date": "2026-12-01",
    "direction": 9,
    "down": 59.3,
    "high": 112,
    "low": 98,
    "lower": 97,
    "magnitude": 9.4,
    "minus": 26.9,
    "open": 96,
    "plus": 41.6,
    "previous": 96,
    "price": 90.01,
    "radius": 32.879999999999995,
    "resistance": 113,
    "secondary": 72.44,
    "series": "After launch",
    "signal": 103.66,
    "speed": 47.7,
    "support": 96,
    "target": 100.6,
    "title": "",
    "up": 80.4,
    "upper": 113,
    "value": 104,
    "volume": 2918,
    "width": 5.5,
    "z": 23.4
  }
];

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": "Line · Spline chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Spline chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "area": false
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Spline chart uses runnable data and options to demonstrate linear trendline; per-observation semantic and datum hit targets.",
    "text": "Line · Spline chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Active teams",
    "type": "quantitative"
  }
};

Graflume.spline('#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": "Line · Spline chart example"
  },
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Spline chart",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "area": false
    },
    "point": true
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Spline chart uses runnable data and options to demonstrate linear trendline; per-observation semantic and datum hit targets.",
    "text": "Line · Spline chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Month",
    "type": "ordinal"
  },
  "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.line() Canvas 2D

Control help

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

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 · period · key=period · transition=600ms/ease-in-out · fade/crossfade

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

Playback and transitions · Row data
`period`ordinal	`value`quantitative
Jan	42
Feb	51
Mar	49
Apr	63
May	71
Jun	68
Jul	74
Aug	79
Sep	76
Oct	83
Nov	88
Dec	92

Browser API · Portable schema

Browser API

Graflume.line()

const data = [
  {
    "period": "Jan",
    "value": 42
  },
  {
    "period": "Feb",
    "value": 51
  },
  {
    "period": "Mar",
    "value": 49
  },
  {
    "period": "Apr",
    "value": 63
  },
  {
    "period": "May",
    "value": 71
  },
  {
    "period": "Jun",
    "value": 68
  },
  {
    "period": "Jul",
    "value": 74
  },
  {
    "period": "Aug",
    "value": 79
  },
  {
    "period": "Sep",
    "value": 76
  },
  {
    "period": "Oct",
    "value": 83
  },
  {
    "period": "Nov",
    "value": 88
  },
  {
    "period": "Dec",
    "value": 92
  }
];

const options = {
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "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": "period",
      "filter": true,
      "interval": 1000,
      "key": "period",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "period",
          "format": "auto",
          "label": "Period"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Playback and transitions",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "width": "container",
  "x": {
    "field": "period",
    "scale": {
      "domain": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ]
    },
    "title": "period",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "scale": {
      "domain": [
        0,
        100
      ]
    },
    "title": "value",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": {
      "labels": {
        "maxLength": 9,
        "orientation": "auto",
        "padding": 9
      },
      "ticks": {
        "count": 12,
        "spacing": 52
      }
    },
    "y": {
      "format": {
        "fractionDigits": 1,
        "type": "compact"
      }
    }
  },
  "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": "period",
      "filter": true,
      "interval": 1000,
      "key": "period",
      "loop": false,
      "mode": "cumulative",
      "rate": 1,
      "transition": {
        "duration": 600,
        "easing": "ease-in-out"
      },
      "windowSize": 1
    },
    "tooltip": {
      "axis": "x",
      "fields": [
        {
          "field": "period",
          "format": "auto",
          "label": "Period"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Line · Playback and transitions",
      "trigger": "axis"
    }
  },
  "locale": "en",
  "mark": {
    "point": true
  },
  "width": "container",
  "x": {
    "field": "period",
    "scale": {
      "domain": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ]
    },
    "title": "period",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "scale": {
      "domain": [
        0,
        100
      ]
    },
    "title": "value",
    "type": "quantitative"
  }
}

Catalog

Modes · compatibility identifiers

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

Mode / compatibility ID search

3 modes · 3 compatibility identifiers

Line · supported modes · representative `line`
ID	Name	Quick API	mode	mark	renderer
`line`	Line chart	`line()`	`default`	`line`	`canvas`
`trendline`	Trendline	`trendline()`	`trend`	`trendline`	`canvas`
`spline`	Spline chart	`spline()`	`spline`	`smooth`	`canvas`

Line · compatibility identifiers
Identifier	Canonical mode ID
`line`	`line`
`spline`	`spline`
`trendline`	`trendline`

ChartSpec · SpatialSpec

Legend and emphasis

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

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

Manual

Integration checklist

ARIA · table fallback

Accessibility

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

standard · large · ultra

Performance

Standard, large, and ultra profiles bound rendering work.

Chart catalog

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`period`ordinal	`value`quantitative
Jan	42
Feb	51
Mar	49
Apr	63
May	71
Jun	68
Jul	74
Aug	79
Sep	76
Oct	83
Nov	88
Dec	92

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`period`ordinal	`value`quantitative
Jan	42
Feb	51
Mar	49
Apr	63
May	71
Jun	68
Jul	74
Aug	79
Sep	76
Oct	83
Nov	88
Dec	92

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`category`ordinal	`value`quantitative
Jan	48
Feb	53
Mar	51
Apr	59
May	66
Jun	70
Jul	76
Aug	82
Sep	80
Oct	89
Nov	96
Dec	104

`period`ordinal	`value`quantitative
Jan	42
Feb	51
Mar	49
Apr	63
May	71
Jun	68
Jul	74
Aug	79
Sep	76
Oct	83
Nov	88
Dec	92