Polar

Header

Add a chart title and supporting description inside the visualization.

StatusLoading

header

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

Header · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Add a chart title and supporting description inside the visualization.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "title": {
    "subtitle": "Polar chart uses runnable data and options to demonstrate log/sqrt radius.",
    "text": "Polar"
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "title": {
    "subtitle": "Polar chart uses runnable data and options to demonstrate log/sqrt radius.",
    "text": "Polar"
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

StatusLoading

tooltip

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

Tooltip · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Reveal exact values from a mark or axis position. Authors can choose locale-aware date/time styles and a time zone with declarative options.

Browser API · Portable schema

Browser API

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "angle",
          "format": "number",
          "label": "Angle"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "series",
          "format": "auto",
          "label": "Series"
        }
      ],
      "title": "Polar · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "hover": true,
    "tooltip": {
      "fields": [
        {
          "field": "angle",
          "format": "number",
          "label": "Angle"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        },
        {
          "field": "series",
          "format": "auto",
          "label": "Series"
        }
      ],
      "title": "Polar · Tooltip",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Theme

Apply the current built-in theme from the selector and update every active example together.

StatusLoading

theme

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

Theme · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Apply the current built-in theme from the selector and update every active example together.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "theme": "graflume-light",
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Legend

Explain the visual meaning of layers, categories, or continuous values.

StatusLoading

legend

Legend: legend · categories · series

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

Legend · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Explain the visual meaning of layers, categories, or continuous values.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "field": "series",
    "interactive": false,
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Series",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "legend": {
    "field": "series",
    "interactive": false,
    "labels": {
      "hide": "Hide",
      "show": "Show"
    },
    "maxItems": 8,
    "mode": "categories",
    "orientation": "horizontal",
    "position": "bottom",
    "title": "Series",
    "visible": true
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Highlight

Emphasize a representative datum or spatial position to guide inspection.

StatusLoading

highlight

Point and range highlights: highlights[] · datum · angle

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

Highlight · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Emphasize a representative datum or spatial position to guide inspection.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "angle",
        "type": "datum",
        "value": 180
      }
    }
  ],
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "highlights": [
    {
      "id": "manual-focus",
      "padding": 7,
      "target": {
        "field": "angle",
        "type": "datum",
        "value": 180
      }
    }
  ],
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Callout

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

StatusLoading

callout

Custom callouts: annotations[] · datum · angle · callout · placement:auto

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

Callout · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Show an explanatory callout with automatic collision avoidance and multilingual wrapping.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "angle",
        "type": "datum",
        "value": 180
      },
      "text": "Point and range highlights · 180"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": 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"
      }
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "annotations": [
    {
      "connector": {
        "visible": true
      },
      "detail": "Attach user-authored safe text to a datum, axis range, or normalized plot position.",
      "id": "manual-callout",
      "placement": "auto",
      "style": {
        "maxWidth": 220,
        "padding": 8
      },
      "target": {
        "field": "angle",
        "type": "datum",
        "value": 180
      },
      "text": "Point and range highlights · 180"
    }
  ],
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": 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"
      }
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Selection

Select and toggle data, then clear it from the background or Escape key.

StatusLoading

selection

Interactive selection: selection · multiple · toggle

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

Selection · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Select and toggle data, then clear it from the background or Escape key.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "angle",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "selection": {
      "ariaLabel": "Interactive selection",
      "clearOnBackground": true,
      "clearOnEscape": true,
      "highlight": {
        "padding": 5
      },
      "key": "angle",
      "mode": "multiple",
      "toggle": true
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

View controls

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

StatusLoading

controls

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

View controls · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Show or hide zoom, pan, reset, projection, fullscreen, and PNG export one menu at a time. Set controls: false to remove the entire toolbar.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

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

Portable schema

ChartSpec 0.1 · options

{
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    }
  },
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "padding": {
    "top": 52
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Accessibility

Pair ARIA descriptions and keyboard guidance with a semantic data table.

StatusLoading

accessibility

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

Accessibility · Row data
`angle`quantitative	`value`quantitative	`series`ordinal
0	57.76	Daily cycle
30	72.69	Daily cycle
60	84.89	Daily cycle
90	85.28	Daily cycle
120	72.7	Daily cycle
150	54.74	Daily cycle
180	42.61	Daily cycle
210	43.45	Daily cycle
240	55.52	Daily cycle
270	69.47	Daily cycle
300	74.99	Daily cycle
330	67.97	Daily cycle

Pair ARIA descriptions and keyboard guidance with a semantic data table.

Browser API · Portable schema

Browser API

Graflume.polar()

const data = [
  {
    "angle": 0,
    "series": "Daily cycle",
    "value": 57.76
  },
  {
    "angle": 30,
    "series": "Daily cycle",
    "value": 72.69
  },
  {
    "angle": 60,
    "series": "Daily cycle",
    "value": 84.89
  },
  {
    "angle": 90,
    "series": "Daily cycle",
    "value": 85.28
  },
  {
    "angle": 120,
    "series": "Daily cycle",
    "value": 72.7
  },
  {
    "angle": 150,
    "series": "Daily cycle",
    "value": 54.74
  },
  {
    "angle": 180,
    "series": "Daily cycle",
    "value": 42.61
  },
  {
    "angle": 210,
    "series": "Daily cycle",
    "value": 43.45
  },
  {
    "angle": 240,
    "series": "Daily cycle",
    "value": 55.52
  },
  {
    "angle": 270,
    "series": "Daily cycle",
    "value": 69.47
  },
  {
    "angle": 300,
    "series": "Daily cycle",
    "value": 74.99
  },
  {
    "angle": 330,
    "series": "Daily cycle",
    "value": 67.97
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Polar · Accessibility example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
};

Graflume.polar('#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": "Polar · Accessibility example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "locale": "en",
  "mark": {
    "fields": {
      "series": "series"
    },
    "options": {
      "closed": true,
      "mode": "line"
    }
  },
  "width": "container",
  "x": {
    "field": "angle",
    "title": "Angle",
    "type": "quantitative"
  },
  "y": {
    "field": "value",
    "title": "Activity index",
    "type": "quantitative"
  }
}

Polar · Basic implementation · Common features

The smallest runnable chart

Basic example

Graflume.polar()

ChartSpec 0.1 · options

Features shared by every chart

Header

Graflume.polar()

ChartSpec 0.1 · options

Tooltip

Graflume.polar()

ChartSpec 0.1 · options

Theme

Graflume.polar()

ChartSpec 0.1 · options

Legend

Graflume.polar()

ChartSpec 0.1 · options

Highlight

Graflume.polar()

ChartSpec 0.1 · options

Callout

Graflume.polar()

ChartSpec 0.1 · options

Selection

Graflume.polar()

ChartSpec 0.1 · options

View controls

Graflume.polar()

ChartSpec 0.1 · options

Accessibility

Graflume.polar()

ChartSpec 0.1 · options