The horizontal alignment of the legend box within the chart area. Valid values are left
, center
and right
.. .
In the case that the legend is aligned in a corner position, the layout
option will determine whether to place it above/below or on the side of the plot area.
The background color of the legend.
The color of the drawn border around the legend.
The border corner radius of the legend.
The width of the drawn border around the legend.
Enable or disable the legend.
When the legend is floating, the plot area ignores it and is allowed to be placed below it.
In a legend with horizontal layout, the itemDistance defines the pixel distance between each item.
CSS styles for each legend item when the corresponding series or point is hidden. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style
unless overridden here. Defaults to:.
itemHiddenStyle: {. color: '#CCC'. }
CSS styles for each legend item in hover mode. Only a subset of CSS is supported, notably those options related to text. Properties are inherited from style
unless overridden here. Defaults to:.
itemHoverStyle: {. color: '#000'. }
The pixel bottom margin for each legend item.
The pixel top margin for each legend item.
CSS styles for each legend item. Only a subset of CSS is supported, notably those options related to text.
The width for each legend item. This is useful in a horizontal layout with many items when you want the items to align vertically. .
A format string for each legend label. Available variables relates to properties on the series, or the point in case of pies.
Callback function to format each of the series' labels. The this keyword refers to the series object, or the point object in case of pie charts. By default the series or point name is printed.
The layout of the legend items. Can be one of "horizontal" or "vertical".
Line height for the legend items. Deprecated as of 2.1. Instead, the line height for each item can be set using itemStyle.lineHeight, and the padding between items using itemMarginTop and itemMarginBottom.
If the plot area sized is calculated automatically and the legend is not floating, the legend margin is the space between the legend and the axis labels or plot area.
Maximum pixel height for the legend. When the maximum height is extended, navigation will show.
Options for the paging or navigation appearing when the legend is overflown. Navigation works well on screen, but not in static exported images. One way of working around that is to increase the chart height in export.
The inner padding of the legend box.
Whether to reverse the order of the legend items compared to the order of the series or points as defined in the configuration object.
Whether to show the symbol on the right side of the text rather than the left side. This is common in Arabic and Hebraic.
Whether to apply a drop shadow to the legend. A backgroundColor
. also needs to be applied for this to take effect. Since 2.3 the shadow can be an object configuration containing color
, offsetX
, offsetY
, opacity
and width
.
When this is true, the legend symbol width will be the same as the symbol height, which in turn defaults to the font size of the legend items.
The pixel height of the symbol for series types that use a rectangle in the legend. Defaults to the font size of legend items.
The pixel padding between the legend item symbol and the legend item text.
The border radius of the symbol for series types that use a rectangle in the legend.
The pixel width of the legend item symbol.
A title to be added on top of the legend.
Whether to use HTML to render the legend item texts. Prior to 4.1.7, when using HTML, legend.navigation was disabled.
The vertical alignment of the legend box. Can be one of top
, middle
or bottom
. Vertical position can be further determined by the y
option.. .
In the case that the legend is aligned in a corner position, the layout
option will determine whether to place it above/below or on the side of the plot area.
The width of the legend box.
The x offset of the legend relative to its horizontal alignment align
within chart.spacingLeft and chart.spacingRight. Negative x moves it to the left, positive x moves it to the right.
The vertical offset of the legend relative to it's vertical alignment verticalAlign
within chart.spacingTop and chart.spacingBottom. Negative y moves it up, positive y moves it down.