Skip to main content

​
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

​
legend.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
  }
};