LegendSettings API in JavaScript (ES5) Chart3d API control

Configures the appearance and behavior of legends in charts.

Properties

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

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

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.

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