LegendSettingsModel API in Vue Chart API component

Interface for a class LegendSettings

Properties

MaximumLabelWidth

number

Maximum width for the legend text.

TextOverflow

string

Defines the text overflow behavior to employ when the individual legend text overflows

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

TextWrap

TextWrap

Defines the text wrap behavior to employ when the individual legend text overflows

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

alignment

string

Legend in chart can be aligned as follows:

• 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 that accepts value in hex and rgba as a valid CSS color string.

border

[ [[BorderModel](./borderModel)](./ [BorderModel](./borderModel))](./ [ [BorderModel](./borderModel)](./ [BorderModel](./borderModel)))

Options to customize the border of the legend.

containerPadding

[ [[ContainerPaddingModel](./containerPaddingModel)](./ [ContainerPaddingModel](./containerPaddingModel))](./ [ [ContainerPaddingModel](./containerPaddingModel)](./ [ContainerPaddingModel](./containerPaddingModel)))

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

description

string

Description for legends.

enablePages

boolean

If set to true, legend will be visible using pages.

height

string

The height of the legend in pixels.

isInversed

boolean

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

location

[ [[LocationModel](./locationModel)](./ [LocationModel](./locationModel))](./ [ [LocationModel](./locationModel)](./ [LocationModel](./locationModel)))

Specifies the location of the legend, relative to the chart. If x is 20, legend moves by 20 pixels to the right of the chart. It requires the position to be Custom.

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

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

margin

[ [[MarginModel](./marginModel)](./ [MarginModel](./marginModel))](./ [ [MarginModel](./marginModel)](./ [MarginModel](./marginModel)))

Options to customize left, right, top and bottom margins of the chart.

maximumTitleWidth

number

maximum width for the legend title.

mode

string

Mode of legend items

• Series: Legend items generated based on series count.
• Point: Legend items generated based on unique data points.
• Range: Legend items generated based on range color mapping property.
• Gradient: Single linear bar generated based on range color mapping property. This property is applicable for chart component only.

opacity

number

Opacity of the legend.

padding

number

Option to customize the padding between legend items.

position

string

Position of the legend in the chart are,

• Auto: Places the legend based on area type.
• Top: Displays the legend at the top of the chart.
• Left: Displays the legend at the left of the chart.
• Bottom: Displays the legend at the bottom of the chart.
• Right: Displays the legend at the right of the chart.
• Custom: Displays the legend based on the given x and y values.

reverse

boolean

If reverse set to true, then it reverse the legend items order.

shapeHeight

number

Shape height of the legend in pixels.

shapePadding

number

Padding between the legend shape and text.

shapeWidth

number

Shape width of the legend in pixels.

tabIndex

number

TabIndex value for the legend.

textStyle

[ [[FontModel](./fontModel)](./ [FontModel](./fontModel))](./ [ [FontModel](./fontModel)](./ [FontModel](./fontModel)))

Options to customize the legend text.

title

string

Title for legends.

titlePosition

string

legend title position

titleStyle

[ [[FontModel](./fontModel)](./ [FontModel](./fontModel))](./ [ [FontModel](./fontModel)](./ [FontModel](./fontModel)))

Options to customize the legend title.

toggleVisibility

boolean

If set to true, series’ visibility collapses based on the legend visibility.

visible

boolean

If set to true, legend will be visible.

width

string

The width of the legend in pixels.