<!-- markdownlint-disable MD036 -->

# Legend in TypeScript Charts

<!-- markdownlint-disable MD036 -->

The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style.

## Position and alignment

By using the [`position`](../api/chart/legendSettings#position-string) property, the legend can be positioned at the left, right, top, or bottom of the chart. By default, the legend is positioned at the bottom of the chart.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


Custom positioning allows the legend to be placed anywhere in the chart using `x` and `y` coordinates.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


**Legend reverse**

Use the [`reverse`](../api/chart/legendSettings#reverse) property to reverse the order of legend items. By default, the legend item for the first series is placed first.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


**Legend alignment**

Align the legend to `center`, `far`, or `near` using the [`alignment`](../api/chart/legendSettings#alignment-string) property.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Customization

To change the legend icon shape, use the [`legendShape`](../api/chart/series#legendshape-string) property in the [`series`](../api/chart/series). By default, the legend icon shape is the `seriesType`.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


### Legend size

By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size using the [`width`](../api/chart/legendSettings#width-string) and [`height`](../api/chart/legendSettings#height-string) properties of `legendSettings`.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


### Legend item size

Customize the size of legend items using the [`shapeHeight`](../api/chart/legendSettings#shapeheight-number) and [`shapeWidth`](../api/chart/legendSettings#shapewidth-number) properties.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


### Paging for legend

Paging is enabled automatically when legend items exceed the legend bounds. Navigate between pages using the provided navigation buttons.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


### Legend text wrap

When legend text exceeds the container, enable wrapping using the [`textWrap`](../api/chart/legendSettings#textwrap) property. Wrapping can also be controlled using the [`maximumLabelWidth`](../api/chart/legendSettings#maximumlabelwidth) property.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


### Set the label color based on series color

Set the legend label color based on the series color by using the chart’s [`loaded`](../api/chart#loaded) event.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Series selection on Legend

By default, clicking a legend item toggles the visibility of its series. To select a series through a legend click, disable [`toggleVisibility`](../api/chart/legendSettings#togglevisibility-boolean).

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Collapsing legend item

By default, the series name is displayed as a legend item. To omit a legend item for a particular series, set the series name to an empty string.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Legend title

Set a title for the legend using the `title` property in `legendSettings`. The title can be customized using `fontStyle`, `size`, `fontWeight`, `color`, `textAlignment`, `fontFamily`, `opacity`, and `textOverflow`. Use `titlePosition` to place the title at `Top`, `Left`, or `Right`. The `maximumTitleWidth` property sets the width of the legend title and defaults to `100px`.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Arrow page navigation

When legend paging is enabled, page numbers are shown by default. To display only left and right arrows for navigation, set `enablePages` to `false`.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Legend item padding

Use the [`itemPadding`](../api/chart/legendSettings#itempadding) property to adjust the spacing between legend items.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Legend layout

The [`layout`](../api/chart/legendSettingsModel#layout) property in [`legendSettings`](../api/chart#legendsettings) displays the legend horizontally or vertically. By default, [`layout`](../api/chart/legendSettingsModel#layout) is set to **Auto**. The [`maximumColumns`](../api/chart/legendSettingsModel#maximumcolumns) property defines the maximum number of columns that can be displayed within the available space when using auto layout. Enabling the [`fixedWidth`](../api/chart/legendSettingsModel#fixedwidth) property ensures that all legend items have equal widths, determined by the maximum item width.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


## Legend template

Legend templates allow you to replace default legend icons and text with custom HTML for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.

You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/documentation/api/chart/legendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/documentation/api/chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless  [`ToggleVisibility`](https://ej2.syncfusion.com/documentation/api/chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}

{% endhighlight %}
{% highlight html tabtitle="index.html" %}

{% endhighlight %}
{% endtabs %}
        


> Note: To use legend features, inject the `Legend` using `Chart.Inject(Legend)` method.


## See also

* [Customize each shape in legend](./how-to#customize-each-shape-in-legend)
* [Customize Legend Text](https://support.syncfusion.com/kb/article/20959/how-to-customize-legend-text-in-javascript-charts)
* [Hide/Show Series by Clicking Single Legend](https://support.syncfusion.com/kb/article/21482/how-to-hideshow-series-by-clicking-single-legend-in-javascript-chart)