Legend

Overview

The legend property controls where the legend appears and whether it’s visible. The legend shows which color or pattern represents each data series.

const config: GraphConfig = {
  legend: {
    position: 'right',
  },
};

Position

'auto' | 'top' | 'right' | 'none'

default:"auto"

Where to position the legend: - 'auto' - Automatically determine the appropriate position based on chart size and type - 'top' - Show the legend above the chart - 'right' - Show the legend to the right of the chart - 'none' - Hide the legend completely

legend: {
  position: 'right';
}

Even when the legend is hidden with position: 'none', series colors are still applied to the chart. The legend position only affects visibility and placement, not the styling.

Legend interaction

When visible, the legend is interactive:

Click a legend item to toggle the series visibility (in supported contexts)

Complete example

const config: GraphConfig = {
  type: 'line',
  data: {
    columns: [
      { key: 'month', label: 'Month' },
      { key: 'productA', label: 'Product A' },
      { key: 'productB', label: 'Product B' },
      { key: 'productC', label: 'Product C' },
    ],
    rows: [
      { month: 'Jan', productA: 100, productB: 150, productC: 120 },
      { month: 'Feb', productA: 120, productB: 160, productC: 140 },
      { month: 'Mar', productA: 140, productB: 180, productC: 130 },
    ],
  },
  legend: {
    position: 'right', // Show series labels on the right
  },
};

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

Overview

Position

Legend interaction

Complete example

​Overview

​Position

​Legend interaction

​Complete example

Overview

Position

Legend interaction

Complete example