Skip to main content
The Legend component provides visual indicators for chart data series, allowing users to identify and toggle the visibility of different data series.

​
Purpose

Based on the source implementation in ~/workspace/source/src/component/legend/LegendModel.ts, the legend component:
  • Displays symbolic representations of data series with their names
  • Supports interactive selection/deselection of series
  • Provides selector buttons for bulk operations (select all, inverse selection)
  • Automatically derives legend items from series data or accepts custom configuration
  • Supports both plain and scrollable layouts for handling many legend items

​
Basic Usage

option = {
  legend: {
    data: ['Sales', 'Revenue', 'Profit'],
    orient: 'horizontal',
    left: 'center',
    bottom: 0
  },
  series: [
    { name: 'Sales', type: 'line', data: [120, 200, 150] },
    { name: 'Revenue', type: 'line', data: [80, 130, 110] },
    { name: 'Profit', type: 'bar', data: [40, 70, 40] }
  ]
};

​
Legend with Selector Buttons

option = {
  legend: {
    selector: [
      { type: 'all', title: 'Select All' },
      { type: 'inverse', title: 'Inverse Selection' }
    ],
    selectorPosition: 'start',
    selected: {
      'Sales': true,
      'Revenue': false
    }
  },
  series: [
    { name: 'Sales', type: 'line', data: [120, 200, 150] },
    { name: 'Revenue', type: 'line', data: [80, 130, 110] }
  ]
};

​
Styled Legend Items

option = {
  legend: {
    data: [
      {
        name: 'Series A',
        icon: 'circle',
        textStyle: { color: '#ff0000' }
      },
      {
        name: 'Series B',
        icon: 'rect',
        textStyle: { color: '#00ff00' }
      }
    ],
    itemWidth: 25,
    itemHeight: 14,
    itemGap: 10,
    inactiveColor: '#ccc'
  }
};

​
Configuration Options

​
Core Properties

​
show
boolean
default:"true"
Whether to display the legend component.
​
orient
'horizontal' | 'vertical'
default:"'horizontal'"
Layout orientation of the legend. From ~/workspace/source/src/component/legend/LegendModel.ts:455.
​
left
string | number
default:"'center'"
Distance from the left side of the container. Can be pixel value or percentage.
​
top
string | number
Distance from the top of the container.
​
right
string | number
Distance from the right side of the container.
​
bottom
string | number
Distance from the bottom of the container.
​
align
'auto' | 'left' | 'right'
default:"'auto'"
Alignment of legend items. Auto alignment is based on the position and orientation.

​
Item Styling

​
itemWidth
number
default:"25"
Width of the legend symbol. Defined in LegendModel.ts:470.
​
itemHeight
number
default:"14"
Height of the legend symbol. Defined in LegendModel.ts:471.
​
itemGap
number
default:"8"
Gap between each legend item. From LegendModel.ts:469.
​
icon
string
default:"'roundRect'"
Icon type for legend items. Can be ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, or a custom SVG path.
​
symbolRotate
number | 'inherit'
default:"'inherit'"
Rotation angle of the legend symbol. Set to ‘inherit’ to use the series symbol rotation.
​
inactiveColor
ColorString
default:"tokens.color.disabled"
Color when legend item is not selected. Implementation in LegendModel.ts:475.
​
inactiveBorderColor
ColorString
default:"tokens.color.disabled"
Border color when legend item is not selected.

​
Selection Mode

​
selectedMode
boolean | 'single' | 'multiple'
default:"true"
Selection mode for legend items:
  • true or 'multiple': Multiple items can be selected
  • 'single': Only one item can be selected at a time
  • false: Selection is disabled
Implementation in LegendModel.ts:388-398.
​
selected
object
Default selection state for legend items. Object with item names as keys and boolean values.
selected: {
  'Series A': true,
  'Series B': false
}

​
Selector Configuration

​
selector
array | boolean
default:"false"
Buttons for select all or inverse select operations. Can be:
  • true: Show both ‘all’ and ‘inverse’ buttons
  • ['all', 'inverse']: Specify which buttons to show
  • Array of objects with custom configuration
See LegendModel.ts:279-293 for implementation.
​
selectorPosition
'auto' | 'start' | 'end'
default:"'auto'"
Position of selector buttons relative to legend items.
​
selectorItemGap
number
default:"7"
Gap between each selector button. From LegendModel.ts:530.
​
selectorButtonGap
number
default:"10"
Gap between selector buttons and legend items. From LegendModel.ts:532.

​
Data Configuration

​
data
array
Array of legend item names or configuration objects. If not specified, automatically derived from series data.
data: [
  'Item 1',
  { name: 'Item 2', icon: 'circle', textStyle: { color: '#f00' } }
]
See LegendModel.ts:359-381 for data processing.
​
formatter
string | function
Legend label formatter. Can be a template string or function:
formatter: 'Legend {name}'
// or
formatter: function(name) { return 'Legend ' + name; }

​
Background and Border

​
backgroundColor
ColorString
default:"'transparent'"
Background color of the legend component.
​
borderColor
ColorString
default:"tokens.color.border"
Border color of the legend box. From LegendModel.ts:465.
​
borderWidth
number
default:"0"
Border width of the legend box.
​
borderRadius
number | number[]
default:"0"
Border radius of the legend box.
​
padding
number | number[]
default:"5"
Padding inside the legend box. Can be a single number or array [top, right, bottom, left].

​
Text Styling

​
textStyle
object
Text style configuration for legend labels. Default color from LegendModel.ts:503-505.
textStyle: {
  color: '#333',
  fontSize: 12,
  fontFamily: 'Arial'
}

​
Advanced Styling

​
itemStyle
object
Style configuration for legend item symbols. Supports ‘inherit’ to use series styles.Properties defined in LegendModel.ts:479-488.
​
lineStyle
object
Line style for line series legend items. Includes special properties:
  • inactiveColor: Line color when item is not selected
  • inactiveWidth: Line width when item is not selected
See LegendModel.ts:490-501.

​
Methods

The LegendModel provides several methods for programmatic control (from LegendModel.ts):
  • select(name): Select a legend item (lines 388-398)
  • unSelect(name): Unselect a legend item (lines 400-404)
  • toggleSelected(name): Toggle selection state (lines 406-413)
  • allSelect(): Select all legend items (lines 415-421)
  • inverseSelect(): Inverse current selection (lines 423-434)
  • isSelected(name): Check if an item is selected (lines 436-440)

​
Events

​
triggerEvent
boolean
default:"false"
Whether to trigger legend events that can be caught by the user. From LegendModel.ts:538.
When enabled, legend selection triggers events that can be listened to: 
myChart.on('legendselectchanged', function(params) {
  console.log('Legend selected:', params.name);
  console.log('Selection state:', params.selected);
});

​
Tooltip

​
tooltip
object
default:"{ show: false }"
Tooltip configuration for legend items. Default from LegendModel.ts:534-536.

Build docs developers (and LLMs) love

Get started for freeTalk to us