LegendSettingsModel

23 Sep 20255 minutes to read

Interface for a class LegendSettings

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.

background string

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

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.

enableHighlight boolean

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

enablePages boolean

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

fixedWidth boolean

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

height string

Specifies the height of the legend in pixels.

isInversed boolean

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

itemPadding number

Option to customize the padding between legend items.

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.

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’.

maximumLabelWidth number

Specifies the maximum width of the legend text labels.

maximumTitleWidth number

Specifies the maximum width of the legend title.

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.

padding number

Option to customize the padding around the legend items.

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.

reverse boolean

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

shapeHeight number

Specify the height of the legend in pixels.

shapePadding number

Padding between the legend shape and text.

shapeWidth number

Specify the width of the legend in pixels.

tabIndex number

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

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.

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.

title string

Specifies the title of the legend.

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.

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.

visible boolean

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

width string

Specifies the width of the legend in pixels.