API / Configuration / ChartLegend
Defined in: src/core/types/chart/legend.ts:32
Extends
Properties
| Property | Type | Description |
|---|---|---|
align? |
"center" | "left" | "right" |
The horizontal alignment of the legend box within the chart area. Default center |
colorScale? |
object |
- |
colorScale.colors |
string[] |
- |
colorScale.domain? |
number[] |
- |
colorScale.stops? |
number[] |
- |
enabled? |
boolean |
- |
events? |
ChartLegendEvents |
Event callbacks for discrete legend items. |
html? |
boolean |
Allows to use any html-tags to display the content. Default false |
itemClickAction? |
"none" | "default" |
Action taken when a discrete legend item is clicked. 'default' preserves the built-in selection behavior, including modifier keys. 'none' leaves visibility unchanged while still calling events.itemClick. Default 'default' |
itemDistance? |
number |
Pixel distance between items within a horizontal legend row. Default 20 |
itemMaxRowCount? |
number |
Maximum number of text rows in each discrete SVG legend item. Labels wrap within the resolved legend width, excluding the symbol and its padding. The final visible row is ellipsized; pagination may reduce the limit to fit an item. Ignored when html: true; HTML content manages its own layout. Must be a positive integer. Default 1 Minimum 1 |
itemStyle? |
BaseTextStyle |
CSS styles for each legend item |
justifyContent? |
"center" | "start" |
Defines how items should be positioned in the legend when overflowing (moving to the next line). Default center |
layout? |
"horizontal" | "vertical" |
Item layout for discrete legends, independent of the legend position. Vertical layout aligns one item per row and ignores justifyContent. Default 'horizontal' |
margin? |
number |
The space between the legend and the axis labels or chart area. Default 15 |
maxWidth? |
string | number |
Maximum discrete legend width, including markers and text spacing, excluding the external margin. For continuous legends, limits the gradient width; tick labels are laid out separately. Numbers and px strings are pixels. Percentages use chart width after left/right chart margins, before legend or axis space is deducted. Invalid or negative values are ignored. Applies to automatic, explicit, and continuous legend widths. Size strings use decimal notation without a sign, whitespace, or exponent. Does not change the configured alignment. Discrete legends truncate the title to the resolved width and hide it if there is insufficient height for items and pagination. Continuous titles are truncated only when the gradient width is reduced by the limit. When omitted, adds no limit beyond the available space. Minimum 0 |
position? |
"left" | "right" | "top" | "bottom" |
The position of the legend box within the chart area. Default 'bottom' |
rowGap? |
string | number |
Gap between vertical items or wrapped horizontal rows in discrete legends with SVG or HTML labels. Accepts finite, nonnegative numbers or decimal px strings; invalid values throw INVALID_DATA. Default 0 Minimum 0 |
title? |
object |
- |
title.align? |
"center" | "left" | "right" |
The horizontal alignment of the title. |
title.margin? |
number |
The distance(in pixels) between the main content of the legend and its title Defaults to 4 for horizontal axes, 8 for vertical. |
title.style? |
Partial<BaseTextStyle> |
CSS styles for the title |
title.text? |
string |
- |
type? |
"discrete" | "continuous" |
Different types for different color schemes. If the color scheme is continuous, a gradient legend will be drawn. Otherwise, samples for different point values Default 'discrete' |
verticalAlign? |
"center" | "top" | "bottom" |
The vertical alignment of the legend box within the chart area. Only applies when position is 'left' or 'right'. Default top |
width? |
string | number |
Width of the legend as a finite, nonnegative pixel value (e.g. 200 or '200px'), decimal percentage (e.g. '25%'), or 'auto'. Numeric strings must use decimal notation without a sign, whitespace, or exponent. Invalid values use the same default width as an omitted width. Percentages are relative to the chart width after left/right chart margins, before legend or axis space is deducted, and are recalculated on resize. Percentages above 100% use 100% for both legend types. For discrete legends, controls the allocated width, item wrapping, and label truncation. Discrete widths are clamped between zero and the chart width excluding chart margins; side legends also reserve legend.margin. If a side legend leaves no room for the plot, the plot and axes are not drawn. Defaults to the available chart width for top/bottom positions and half of it for left/right. Set to auto for discrete side legends to fit the widest prepared row, title, and pagination. Horizontal layout uses half of the space after legend.margin as its default width limit; an explicit maxWidth replaces this limit. Titles are truncated to the resulting width and hidden when there is insufficient height for items and pagination. For continuous legends, controls the gradient width and defaults to 200 (auto uses this default). Continuous pixel widths are not capped at the available chart width unless maxWidth is set. Minimum 0 |
Previous