Type class
A universal legend control.
Click here for more info
Data item
Legend uses data items of type ILegendDataItem
.
Sources
Legend can be used (imported) via one of the following packages.
// Import Legend import * as am5 from "@amcharts/amcharts5"; // Create Legend am5.Legend.new(root, { // ... config if applicable });
<!-- Load Legend --> <script src="index.js"></script> <script> // Create Legend am5.Legend.new(root, { // ... config if applicable }); </script>
Inheritance
Legend extends Series
.
Legend is extended by StockLegend
.
Settings
Set these settings on a Legend object using its set()
and setAll()
methods.
Read about settings concept.
active # |
Type Inherited from Indicates if element is currently active. |
---|---|
background # |
Type Inherited from Background element. Click here for more info |
blur # |
Type Inherited from Apply blur filter. Ranges of values in pixels: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
brightness # |
Type Inherited from Modifty visual brightness. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
calculateAggregates # |
Type Inherited from If set to Do not enable unless you are using such aggregate values in tooltips, display data fields, heat rules, or similar. |
centerX # |
Type Inherited from X coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point. |
centerY # |
Type Inherited from Y coordinate of the center of the element relative to itself. Center coordinates will affect placement as well as rotation pivot point. |
clickTarget # |
Type Default Which legend item element will be clickable to toggle related chart item:
@since 5.0.13 |
contrast # |
Type Inherited from Modify contrast. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
crisp # |
Type Default Inherited from If set to It will round x/y position so it is positioned fine "on pixel". It will also adjust NOTE: this is might not universally work, especially when set on several objects that are supposed to fit perfectly with each other. @since 5.3.0 |
cursorOverStyle # |
Type Inherited from A named mouse cursor style to show when hovering this element. Click here for more info |
customValueField # |
Type Inherited from A key to look up in data for a numeric customValue of the data item. Usually used for storing additional numeric information and heat rules. |
dateFormatter # |
Type Inherited from An instance of Click here for more info |
disabled # |
Type Inherited from Indicates if element is disabled. |
draggable # |
Type Inherited from If set to |
durationFormatter # |
Type Inherited from An instance of Click here for more info |
dx # |
Type Inherited from Horizontal shift in pixels. Can be negative to shift leftward. |
dy # |
Type Inherited from Vertical shift in pixels. Can be negative to shift upward. |
exportable # |
Type Inherited from If set to |
fill # |
Type Inherited from Series fill color. Click here for more info |
fillField # |
Type A key to look up in data for a fill of the data item. |
fillPattern # |
Type Inherited from Series fill pattern. Click here for more info |
forceHidden # |
Type Inherited from If set to |
forceInactive # |
Type Inherited from If set to @since 5.0.21 |
heatRules # |
Type Inherited from A list of heat rules to apply on series elements. Click here for more info |
height # |
Type Inherited from Element's absolute height in pixels (numeric value) or relative height to parent ( |
html # |
Type Inherited from HTML content of the container. Click here for more info |
hue # |
Type Inherited from Rotate HUE colors in degrees. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
id # |
Type Inherited from A custom string ID for the element. If set, element can be looked up via Will raise error if an element with the same ID already exists. |
idField # |
Type Inherited from A key to look up in data for an id of the data item. |
interactive # |
Type Inherited from Should this element accept user interaction events? |
interactiveChildren # |
Type Inherited from If set to |
interpolationDuration # |
Type Inherited from A duration of the animation from one setting value to another, in milliseconds. Click here for more info |
interpolationEasing # |
Type Inherited from Easing function to use for cross setting value animations. Click here for more info |
invert # |
Type Inherited from Invert colors. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
isMeasured # |
Type Inherited from If set to |
layer # |
Type Inherited from Numeric layer to put element in. Elements with higher number will appear in front of the ones with lower numer. If not set, will inherit layer from its ascendants. |
layerMargin # |
Type Inherited from Margins for the layer. Can be used to make the layer larger/or smaller than default chart size. @since @5.2.39 |
layout # |
Type Inherited from A method to layout Click here for more info |
legendDataItem # |
Type Inherited from A data item representing series in a @readonly |
legendLabelText # |
Type Inherited from A text template to be used for label in legend. |
legendValueText # |
Type Inherited from A text template to be used for value label in legend. |
marginBottom # |
Type Inherited from Bottom margin in pixels. |
marginLeft # |
Type Inherited from Left margin in pixels. |
marginRight # |
Type Inherited from Right margin in pixels. |
marginTop # |
Type Inherited from Top margin in pixels. |
mask # |
Type Inherited from An element to use as a container's mask (clipping region). Click here for more info |
maskContent # |
Type Inherited from If set to |
maxHeight # |
Type Inherited from Maximum allowed height in pixels. |
maxWidth # |
Type Inherited from Maximum allowed width in pixels. |
minHeight # |
Type Inherited from Minimum allowed height in pixels. |
minWidth # |
Type Inherited from Minimum allowed width in pixels. |
name # |
Type Inherited from Name of the series. |
nameField # |
Type A key to look up in data for a name of the data item. |
numberFormatter # |
Type Inherited from An instance of Click here for more info |
opacity # |
Type Inherited from Opacity. 0 - fully transparent; 1 - fully opaque. |
paddingBottom # |
Type Inherited from Bottom padding in pixels. |
paddingLeft # |
Type Inherited from Left padding in pixels. |
paddingRight # |
Type Inherited from Right padding in pixels. |
paddingTop # |
Type Inherited from Top padding in pixels. |
position # |
Type Inherited from Positioning of the element. |
reverseChildren # |
Type Inherited from If set to @since 5.1.1 |
rotation # |
Type Inherited from Rotation in degrees. |
saturate # |
Type Inherited from Modify saturation. Range of values in pixels:
Click here for more info |
scale # |
Type Inherited from Scale. Setting to a value less than 1 will shrink object. |
sepia # |
Type Inherited from Apply sepia filter. Range of values: IMPORTANT: This setting is not supported in Safari browsers. Click here for more info |
sequencedDelay # |
Type Inherited from A delay in milliseconds to wait before starting animation of next data item. Click here for more info |
sequencedInterpolation # |
Type Inherited from If set to Click here for more info |
setStateOnChildren # |
Type Inherited from If set to Click here for more info |
showTooltipOn # |
Type Default Inherited from Defines when tooltip is shown over the element. Available options:
Click here for more info |
stateAnimationDuration # |
Type Inherited from Duration of transition from one state to another. |
stateAnimationEasing # |
Type Inherited from Easing of transition from one state to another. |
stroke # |
Type Inherited from Series stroke color. Click here for more info |
strokeField # |
Type A key to look up in data for a stroke of the data item. |
templateField # |
Type Inherited from Allows binding element's settings to data. Click here for more info |
themeTags # |
Type Inherited from Tags which can be used by the theme rules. Click here for more info |
themeTagsSelf # |
Type Inherited from Tags which can be used by the theme rules. These tags only apply to this object, not any children. Click here for more info |
themes # |
Type Inherited from A list of themes applied to the element. |
toggleKey # |
Type Inherited from If set, element will toggle specified boolean setting between |
tooltip # |
Type Inherited from
|
tooltipHTML # |
Type Inherited from HTML content to show in a tooltip when hovered. @since 5.2.11 |
tooltipPosition # |
Type Inherited from Tooltip position. |
tooltipText # |
Type Inherited from Text to show in a tooltip when hovered. |
tooltipX # |
Type Inherited from Tooltip pointer X coordinate relative to the element itself. |
tooltipY # |
Type Inherited from Tooltip pointer Y coordinate relative to the element itself. |
useDefaultMarker # |
Type Default If set to |
userData # |
Type Inherited from A storage for any custom user data that needs to be associated with the element. |
valueField # |
Type Inherited from A key to look up in data for a numeric value of the data item. Some series use it to display its elements. It can also be used in heat rules. |
verticalScrollbar # |
Type Inherited from Setting this to an instance of Click here for more info |
visible # |
Type Inherited from Is element visible? |
wheelable # |
Type Inherited from If set to |
width # |
Type Inherited from Element's absolute width in pixels (numeric value) or relative width to parent ( |
x # |
Type Inherited from X position relative to parent. |
y # |
Type Inherited from Y position relative to parent. |
There are 89 inherited items currently hidden from this list. |
Private settings
These are read-only settings accessible from a Legend object using its getPrivate()
method.
Read about private settings.
adjustedStartIndex # |
Read only
Type Inherited from |
---|---|
baseValueSeries # |
Read only
Type Inherited from |
customValueAbsoluteSum # |
Read only
Type Inherited from |
customValueAverage # |
Read only
Type Inherited from |
customValueClose # |
Read only
Type Inherited from |
customValueCount # |
Read only
Type Inherited from |
customValueHigh # |
Read only
Type Inherited from |
customValueLow # |
Read only
Type Inherited from |
customValueOpen # |
Read only
Type Inherited from |
customValueSum # |
Read only
Type Inherited from |
endIndex # |
Read only
Type Inherited from |
focusable # |
Read only
Type Inherited from If set to @since 5.3.16 |
htmlElement # |
Read only
Type Inherited from A |
showingTooltip # |
Read only
Type Inherited from Is element currently showing a tooltip? |
startIndex # |
Read only
Type Inherited from |
tooltipTarget # |
Read only
Type Inherited from An element tooltip should inherit its colors from. |
trustBounds # |
Read only
Type Inherited from If set to This helps to solve ghost tooltips problem that sometimes appear while moving the pointer over interactive objects. This is set to @since 5.5.0 |
valueAbsoluteSum # |
Read only
Type Inherited from |
valueAverage # |
Read only
Type Inherited from |
valueClose # |
Read only
Type Inherited from |
valueCount # |
Read only
Type Inherited from |
valueHigh # |
Read only
Type Inherited from |
valueLow # |
Read only
Type Inherited from |
valueOpen # |
Read only
Type Inherited from |
valueSum # |
Read only
Type Inherited from |
There are 25 inherited items currently hidden from this list. |
Properties
adapters # |
Type Default Inherited from |
---|---|
bullets # |
Type Default Inherited from List of bullets to use for the series. Click here for more info |
bulletsContainer # |
Type Default Inherited from A |
chart # |
Type Inherited from A chart series belongs to. |
children # |
Type Default Inherited from List of Container's child elements. |
className # |
Static
Type Default |
classNames # |
Static
Type Default |
data # |
Type Inherited from Component's data. Click here for more info |
dataItem # |
Type Inherited from A NOTE: data item is being assigned automatically in most cases where it matters. Use this accessor to set data item only if you know what you're doing. |
dataItems # |
Type Inherited from A list of component's data items. |
enableDispose # |
Type Default Inherited from If this is set to |
events # |
Inherited from |
inited # |
Type Default Inherited from Indicates if the component has already been initialized. |
itemContainers # |
Type Default List of all |
labels # |
Type Default List of legend label elements. |
markerRectangles # |
Type Default List of rectangle elements used for default legend markers. |
markers # |
Type Default List of legend marker elements. |
parent # |
Type Inherited from Parent |
root # |
Type Inherited from An instance of @readonly |
states # |
Type Default Inherited from |
template # |
Type Inherited from @todo needs description |
uid # |
Type Default Inherited from Unique ID. |
valueLabels # |
Type Default List of legend value label elements. |
There are 16 inherited items currently hidden from this list. |
Methods
addBullet( dataItem: ) |
Returns Inherited from Adds bullet directly to a data item. Please note: method accepts You should add Bullet instance, not a method like you do it on series. Click here for more info |
---|---|
allChildren() |
Returns Inherited from |
animate( options: ) |
Returns Inherited from Animates setting values from current/start values to new ones. Click here for more info |
appear( duration?: ) |
Returns Inherited from Plays initial reveal animation regardless if element is currently hidden or visible. |
compositeOpacity() |
Returns Inherited from Returns an actual opacity of the element, taking into account all parents. @since 5.2.11 |
compositeRotation() |
Returns Inherited from Returns an actual roation of the element, taking into account all parents. @since 5.9.2 |
compositeScale() |
Returns Inherited from Returns an actual scale of the element, taking into account all parents. @since 5.9.2 |
depth() |
Returns Inherited from Returns depth (how deep in the hierachy of the content tree) of this element. |
dispose() |
Returns Inherited from Disposes this object. |
eachChildren( f: ( child: ) |
Returns Inherited from |
endIndex() |
Returns Inherited from |
get( key: ) |
Returns Inherited from Returns settings value for the specified If there is no value, Click here for more info |
getDataItemById( id: ) |
Returns Inherited from Looks up and returns a data item by its ID. |
getDateFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getDurationFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getNumberFormatter() |
Returns Inherited from Returns an instance of If this element does not have it set, global one form Click here for more info |
getTooltip() |
Returns Inherited from Returns |
has( key: ) |
Returns Inherited from Returns Click here for more info |
height() |
Returns Inherited from Returns height of this element in pixels. |
hide( duration?: ) |
Returns Inherited from Hides the element and returns a series.hide().then(function(ev) { console.log("Series finished hiding"); }) series.hide().then(function(ev) { console.log("Series finished hiding"); }) |
hideDataItem( dataItem: ) |
Returns Inherited from Hides series's data item. |
hideTooltip() |
Returns Inherited from Hides element's |
hover() |
Returns Inherited from Simulate hover over element. |
innerHeight() |
Returns Inherited from Returns container's inner height (height without padding) in pixels. |
innerWidth() |
Returns Inherited from Returns container's inner width (width without padding) in pixels. |
isDisposed() |
Returns Inherited from Returns |
isDragging() |
Returns Inherited from Returns |
isFocus() |
Returns Inherited from Returns |
isHidden() |
Returns Inherited from Returns |
isHiding() |
Returns Inherited from Returns |
isHover() |
Returns Inherited from Returns |
isShowing() |
Returns Inherited from Returns |
isType( type: ) |
Returns Inherited from Checks if element is of certain class (or inherits one). |
isVisible() |
Returns Inherited from Returns |
isVisibleDeep() |
Returns Inherited from Same as @since 5.2.7 |
makeDataItem( data: ) |
Returns Inherited from Creates a new data item and processes it. |
markDirtyKey( key: ) |
Returns Inherited from Marks some setting as dirty. Could be used to trigger adapter. |
markDirtyValues( _dataItem?: ) |
Returns Inherited from Forces a repaint of the element which relies on data. @since 5.0.21 |
maxHeight() |
Returns Inherited from Returns maximum allowed height of this element in pixels. |
maxWidth() |
Returns Inherited from Returns maximum allowed width of this element in pixels. |
new( root: ) |
Static Returns Inherited from Use this method to create an instance of this class. Click here for more info |
off( key: ) |
Returns Inherited from Removes a callback for when value of a setting changes. Click here for more info |
offPrivate( key: ) |
Returns Inherited from Removes a callback for when value of a private setting changes. Click here for more info |
on( key: ) |
Returns Inherited from Sets a callback function to invoke when specific key of settings changes or is set. Click here for more info |
onPrivate( key: ) |
Returns Inherited from Sets a callback function to invoke when specific key of private settings changes or is set. Click here for more info |
pushDataItem( data: ) |
Returns Inherited from Adds new explicit data item to series. |
remove( key: ) |
Returns Inherited from Removes a setting value for the specified Click here for more info |
removeAll() |
Returns Inherited from Removes all keys; Click here for more info |
scrollToChild( child: ) |
Returns Inherited from If scrolling is enabled on the Container (by adding @since 5.10.5 |
set( key: ) |
Returns Inherited from Sets a setting Click here for more info |
setAll( settings: ) |
Returns Inherited from Sets multiple settings at once. Click here for more info |
setTimeout( fn: () => ) |
Returns Inherited from Creates and returns a "disposable" timeout. |
show( duration?: ) |
Returns Inherited from Shows currently hidden element and returns a series.show().then(function(ev) { console.log("Series is now fully visible"); }) series.show().then(function(ev) { console.log("Series is now fully visible"); }) |
showDataItem( dataItem: ) |
Returns Inherited from Shows series's data item. |
showTooltip( point?: ) |
Returns Inherited from Shows element's |
startIndex() |
Returns Inherited from |
toBack() |
Returns Inherited from Moves sprite to the beginning of the parent's children array. Depending on |
toFront() |
Returns Inherited from Moves sprite to the end of the parent's children array. Depending on |
toGlobal( point: ) |
Returns Inherited from Converts X/Y coordinate within this element to a global coordinate. |
toLocal( point: ) |
Returns Inherited from Converts global X/Y coordinate to a coordinate within this element. |
unhover() |
Returns Inherited from Simulate unhover over element. |
width() |
Returns Inherited from Returns width of this element in pixels. |
x() |
Returns Inherited from Returns element's actual X position in pixels. |
y() |
Returns Inherited from Returns element's actual Y position in pixels. |
There are 64 inherited items currently hidden from this list. |
Events
Add event handlers to Legend object using its events.on()
method.
Read about adding event handlers.
#blur |
Param { originalEvent: Inherited from Invoked when element loses focus. |
---|---|
#boundschanged |
Param { type: Inherited from Invoked when element's bounds change due to any manipulation to it. |
#click |
Param { type: Inherited from Invoked when element is clicked or tapped. |
#dataitemchanged |
Param { newDataItem: Inherited from Invoked when element's data item changes. |
#datavalidated |
Param { type: Inherited from |
#dblclick |
Param { type: Inherited from Invoked when element is doubleclicked or tapped twice quickly. |
#dragged |
Param { type: Inherited from Invoked when element ois being dragged. |
#dragstart |
Param { type: Inherited from Invoked when element dragging starts. |
#dragstop |
Param { type: Inherited from Invoked when element dragging stops. |
#focus |
Param { originalEvent: Inherited from Invoked when element gains focus. |
#globalpointermove |
Param { type: Inherited from Invoked when pointer is moving anywhere in the window, even outside of the element or even chart area. |
#globalpointerup |
Param { type: Inherited from Invoked when pointer button is released or touch stops in the window, even outside of the element or even chart area. |
#middleclick |
Param { type: Inherited from Invoked when element is clicked with the middle mouse button. |
#pointerdown |
Param { type: Inherited from Invoked when pointer button is pressed or touch starts over the element. |
#pointerout |
Param { type: Inherited from Invoked when pointer moves outside the element. |
#pointerover |
Param { type: Inherited from Invoked when pointer moves over the element. |
#pointerup |
Param { type: Inherited from Invoked when pointer button is released or touch stops over the element. |
#positionchanged |
Param { type: Inherited from Invoked when element's position (X/Y) changes. |
#rightclick |
Param { type: Inherited from Invoked when element is clicked width the right mouse button. |
#wheel |
Param { originalEvent: Inherited from Invoked when mouse wheel is spinned while pointer is over the element. |
There are 20 inherited items currently hidden from this list. |