LegendSettings

23 Sep 20255 minutes to read

Configures the appearance and behavior of legends in charts.

Properties

accessibility AccessibilityModel

Options to improve accessibility for legend elements.

alignment Alignment

Defines the alignment of the legend in the chart.
The options are:

Near - Aligns the legend to the left of the chart.
Center - Aligns the legend to the center of the chart.
Far - Aligns the legend to the right of the chart.

Defaults to ‘Center’

background string

The background color of the legend, which accepts values in hex and rgba as valid CSS color strings.

Defaults to ‘transparent’

border BorderModel

Options for customizing the border of the legend.

containerPadding ContainerPaddingModel

Options to customize the left, right, top, and bottom padding for the chart legend container.

description string

A description of the legend that provides additional information for screen readers.

Defaults to null

enableHighlight boolean

If set to true, the series will be highlighted when hovering over the legend.

Defaults to false

enablePages boolean

If set to true, the legend will be displayed using pages.

Defaults to true

fixedWidth boolean

When set to true, all legend items are rendered with an equal width, which is the maximum width of all items.

Defaults to false

height string

Specifies the height of the legend in pixels.

Defaults to null

isInversed boolean

If isInversed is set to true, it inverses the legend item content (image and text).

Defaults to false.

itemPadding number

Option to customize the padding between legend items.

Defaults to null

layout LegendLayout

Specifies the layout of the legend items in the chart.
Available options are:

Vertical: Legend items are arranged in a single column. If the legend items exceed the available space, paging is automatically applied to allow the user to navigate through the legend.
Horizontal: Legend items are arranged in a single row. If the legend items exceed the available space, paging is automatically applied to allow the user to navigate through the legend.
Auto (default): Legend items are placed based on the available space.

Defaults to ‘Auto’

location LocationModel

Specifies the location of the legend relative to the chart.
If x is 20, the legend moves 20 pixels to the right of the chart.

Note that the position must be set to Custom for this feature to work.
```html

```typescript
let chart: Chart = new Chart({
...
  legendSettings: {
          visible: true,
          position: 'Custom',
          location: { x: 100, y: 150 }
  }
...
});
chart.appendTo('#Chart');

margin MarginModel

Options for customizing the left, right, top, and bottom margins of the chart.

maximumColumns number

Specifies the maximum number of columns to allow in the available space when the layout is set to ‘Auto’.

Defaults to null

maximumLabelWidth number

Specifies the maximum width of the legend text labels.

Defaults to null

maximumTitleWidth number

Specifies the maximum width of the legend title.

Defaults to 100

mode LegendMode

Defines the mode for displaying legend items.

Series - Legend items are generated based on the count of series.
Point - Legend items are created according to each unique data point.
Range - Legend items are generated based on the range color mapping property.
Gradient - Displays a single linear bar that represents the range color mapping property.

Note that this property is applicable only for the chart component.

opacity number

Customizes the opacity of the legend.

Defaults to 1

padding number

Option to customize the padding around the legend items.

Defaults to 8

position LegendPosition

Sets the position of the legend in the chart.
Available options include:

Auto - Places the legend according to the area type.
Top - Displays the legend at the top of the chart.
Left - Displays the legend on the left side of the chart.
Bottom - Displays the legend at the bottom of the chart.
Right - Displays the legend to the right of the chart.
Custom - Displays the legend according to the given x and y position values.

Defaults to ‘Auto’

reverse boolean

If reverse is set to true, it reverses the order of the legend items.

Defaults to false

shapeHeight number

Specify the height of the legend in pixels.

Defaults to 10

shapePadding number

Padding between the legend shape and text.

Defaults to 8

shapeWidth number

Specify the width of the legend in pixels.

Defaults to 10

tabIndex number

The tabIndex property determines the order in which the legend receives focus when navigating through elements with the keyboard.

Defaults to 3

textOverflow LabelOverflow

Defines the behavior for handling the overflow of legend text.

Clip - Specifies that the text is clipped and not accessible.
Ellipsis - Specifies an ellipsis (“…”) for the clipped text.

Defaults to ‘Ellipsis’

textStyle FontModel

The textStyle property provides options to customize the appearance of the text in the legend, including the font family, size, style, weight, and color.

textWrap TextWrap

Defines the text wrap behavior for the legend text when it overflows.
Available options are:

Normal - Specifies that words should only break at allowed break points.
Wrap - Specifies that a word should break if it is too long to fit on a line by itself.
AnyWhere - Specifies to break a word at any point if there are no acceptable break points in the line.

Defaults to ‘Normal’

title string

Specifies the title of the legend.

Defaults to null

titlePosition LegendTitlePosition

The titlePosition property specifies the position of the legend title.
Available options are:

Top - Aligns the title to the top of the legend.
Left - Aligns the title to the left of the legend.
Right - Aligns the title to the right of the legend.

Defaults to ‘Top’

titleStyle FontModel

The titleStyle property configures the font settings for the legend title, including font family, size, style, weight, and color.

toggleVisibility boolean

If set to true, the series visibility will collapse based on the legend’s visibility.

Defaults to true

visible boolean

If set to true, the legend will be displayed for the chart.

Defaults to true

width string

Specifies the width of the legend in pixels.

Defaults to null