Legend inactiveBorderColor default
The inactiveBorderColor property, which sets legend border color when not selected, defaults to '#ccc'.
legend
54 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Legend component type options
The legend type can be 'plain' (simple legend, default) or 'scroll' (scrollable legend for many items). When type is 'scroll', additional configuration options are available: scrollDataIndex, pageButtonItemGap, pageButtonGap, pageButtonPosition, pageFormatter, pageIcons, pageIconColor, pageIconInactiveColor, pageIconSize, pageTextStyle, animation, and animationDurationUpdate.
Legend default show property
The show property of legend defaults to true.
Legend orient property default
The orient property controls the layout orientation of the legend and defaults to 'horizontal'. Options are 'horizontal' or 'vertical'.
Legend align property default and behavior
The align property for legend marker and text alignment defaults to 'auto', which automatically calculates from component location and orientation. When the left value of the component is 'right' and orient is 'vertical', it aligns to 'right'. Options are 'auto', 'left', or 'right'.
Legend padding default
The padding property of legend defaults to 5.
Legend itemGap default
The itemGap property controls the distance between each legend item and defaults to 10. In horizontal layout it is horizontal distance; in vertical layout it is vertical distance.
Legend itemWidth default
The itemWidth property controls the image width of the legend symbol and defaults to 25.
Legend itemHeight default
The itemHeight property controls the image height of the legend symbol and defaults to 14.
Legend formatter property default
The formatter property defaults to null. It can be a string template or callback function. String template uses {name} as the variable. Callback function signature is function(name) returning a string.
Legend selectedMode property default
The selectedMode property defaults to true, enabling series to be toggled by clicking legends. It can be false to disable clicking, or 'single' for single selection mode, or 'multiple' for multiple selection mode.
Legend selected property structure
The selected property is an object containing a state table of selected legend items, mapping series names to boolean values. Example: selected: {'series 1': true, 'series 2': false}
Legend textStyle property
The textStyle property controls the text style of legend items and has default color '#333'.
Legend tooltip property
The tooltip property configures tooltip behavior for legend tooltip, similar to the main tooltip configuration.
Legend data property matching rules
Legend data is an array where each item can be a string representing the name or an object containing a name field. A special string '' or '\n' creates a line break. Legend items control the visibility of entire series or series data items based on name matching. This mapping can be many-to-many.
Legend data automatic collection
If legend.data is not explicitly specified, it is automatically collected from series names or from dataset according to the seriesName field in series.encode. For series that support LEGEND_CONTROL_SERIES_DATA_ITEM (pie, funnel, chord, graph, radar, themeRiver), data is collected from the name field of each series.data item. If names from series.data are collected, the series name is no longer collected.
Legend data series that control data items
The following series types support legend items controlling individual series data items: pie, funnel, chord, graph, radar, and themeRiver. These are matched according to the name fields of legend items and series data items.
Legend data item individual style configuration
data: [{ name: 'series 1', icon: 'circle', textStyle: { color: 'red' } }]
Legend data item name property
The name property of a legend data item should match the name value of a series. For pie charts, the legend name can also be the name of a single data item.
Legend data item icon property
The icon property of a legend data item specifies the icon for that legend item.
Legend data item inactiveBorderColor default
The inactiveBorderColor property of a legend data item defaults to '#ccc'.
Legend data item inactiveBorderWidth default and behavior
The inactiveBorderWidth property of a legend data item defaults to 'auto'. When 'auto', the border width is 2 if there is border width in the series, otherwise 0. When 'inherit', it always takes the border width of the series.
Legend data item symbolRotate default
The symbolRotate property of a legend data item defaults to 'inherit'. It can be a number or 'inherit'. If 'inherit', the symbolRotate of the series is used.
Legend data item textStyle property
The textStyle property of a legend data item is an object controlling the text style for that specific item.
Legend scrollDataIndex default
The scrollDataIndex property works when legend.type is 'scroll' and controls the dataIndex of the left top most displayed item. It defaults to 0.
Legend pageButtonGap default
The pageButtonGap property works when legend.type is 'scroll' and controls the gap between page buttons and legend items. It defaults to null.
Legend pageButtonPosition default
The pageButtonPosition property works when legend.type is 'scroll' and defaults to 'end'. Options are 'start' (left or top) or 'end' (right or bottom).
Legend lineStyle property
The lineStyle property controls the legend line style. When children have value 'inherit', they are inherited from corresponding series options.
Legend pageFormatter default
The pageFormatter property works when legend.type is 'scroll' and defaults to '{current}/{total}'. The variable {current} is the current page number starting from 1, and {total} is the total page number. It can be a string template or a function returning a string with parameters {current: number, total: number}.
Legend pageIcons vertical property default
The pageIcons.vertical property works when legend.type is 'scroll' and legend.orient is 'vertical'. It should be an array [previous page button, next page button], defaulting to ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z'].
Legend pageIconColor default
The pageIconColor property works when legend.type is 'scroll' and controls the color of page buttons. It defaults to '#2f4554'.
Legend pageIconInactiveColor default
The pageIconInactiveColor property works when legend.type is 'scroll' and controls the color of page buttons when inactive. It defaults to '#aaa'.
Legend pageIconSize default
The pageIconSize property works when legend.type is 'scroll' and defaults to 15. It can be a number or an array [width, height].
Legend pageTextStyle property
The pageTextStyle property works when legend.type is 'scroll' and controls the text style of page info with default color '#333'.
Legend animation default
The animation property works when legend.type is 'scroll' and defaults to true, determining whether to use animation when page scrolls.
Legend animationDurationUpdate default
The animationDurationUpdate property works when legend.type is 'scroll' and defaults to 800, controlling the duration of page scroll animation in milliseconds.
Legend emphasis selectorLabel property
The emphasis.selectorLabel property is available since version 4.4.0 and controls the label style for selector buttons in emphasis state.
Legend selector property default
The selector property defaults to false and is available since version 4.4.0. It enables selector buttons for 'all' (Select All) and 'inverse' (Inverse Selection) functionality. It can be false (disabled), true (both buttons), an array of button types, or an object array with type and title properties.
Legend selector examples
Selector can be configured as: selector: [ {type: 'all', title: 'All'}, {type: 'inverse', title: 'Inv'} ] or selector: true or selector: ['all', 'inverse']
Legend selectorLabel property default
The selectorLabel property is available since version 4.4.0 and controls the text label style of selector buttons, displayed by default.
Legend selectorPosition default
The selectorPosition property is available since version 4.4.0 and defaults to 'auto'. Options are 'auto', 'start', or 'end'. When 'auto', horizontal legends place selector at the end, vertical legends place it at the start.
Legend selectorButtonGap default
The selectorButtonGap property is available since version 4.4.0 and controls the gap between selector button and legend component. It defaults to 10.
Legend triggerEvent property default
The triggerEvent property defaults to false and is available since version 6.0.0. When enabled, it triggers legend events.
Legend triggerEvent event parameters
When triggerEvent is enabled, the event includes parameters: componentType: 'legend', componentIndex: number (legend component index), value: string (name of legend item), dataIndex: number (index of triggering legend item), seriesIndex: number (index of first series matching this legend item).
Legend itemStyle property
The itemStyle property controls the legend item style. When children have value 'inherit', they are inherited from corresponding series options.
Legend itemStyle defaults
Legend itemStyle defaults: color='inherit', borderColor='inherit', borderWidth='auto' (2 if series has borderWidth else 0), type='inherit', opacity='inherit', shadowBlur=0, shadowColor=null, shadowOffsetX=0, shadowOffsetY=0, decal='inherit', dashOffset='inherit', cap='inherit', join='inherit', miterLimit='inherit'.
Legend lineStyle defaults
Legend lineStyle defaults: width='auto', color='inherit', opacity='inherit', type='inherit', cap='inherit', join='inherit', dashOffset='inherit', miterLimit='inherit', shadowBlur='inherit', shadowOffsetX=0, shadowOffsetY=0.
Legend lineStyle inactiveColor default
The lineStyle.inactiveColor property controls the legend line stroke color when not selected and defaults to '#ccc'.
Legend lineStyle inactiveWidth default
The lineStyle.inactiveWidth property controls the legend line stroke width when not selected and defaults to 2.
Legend line break in data array example
Line breaks can be inserted in legend.data array using special strings. Example: legend: {data: ['a', 'b', '\n', 'c', 'd']} displays items as 'a' 'b' on the first row and 'c' 'd' on the second row.
Legend formatter string template example
Legend formatter can use string template with {name} variable: formatter: 'Legend {name}'
Legend formatter callback function example
Legend formatter can use callback function: formatter: function (name) { return 'Legend ' + name; }
Legend automatic collection from dataset example
When legend.data is not specified, it can be automatically collected from dataset. Example: dataset with source containing column headers, series with encode specifying seriesName dimension will collect names from dataset. Series 1 with encode {x: 0, y: 1, seriesName: 1} collects 'nameH' from column 1.
Multiple legend components support
A single echarts instance may contain multiple legend components, available since version 3.0.0, which makes it easier to layout multiple legend components.