LegendSettingsModel API in Angular Chart API component

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.

<div id='Chart'></div>

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.