> For the complete documentation index, see [llms.txt](https://docs.getinfinity.app/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.getinfinity.app/user-guide/comprehensive-user-guide/2.-charts/chart-customization/customizing-chart-with-advanced-editor-panel/styles/legend.md).

# Legend

The **Legend** settings in the Styles tab allow users to configure how the chart legend appears, including its position, size, text style, and interactivity. The legend helps users understand the chart by providing labels and visual indicators for data series.

#### Accessing the Legend Settings

To access the **Legend** settings:

1. Open the **Advanced Editor** by clicking on the **Styles** tab.
2. Select **Legend** from the list of style options.

<figure><img src="/files/xANmw3QuCNe9ewVIZ2RY" alt="" width="157"><figcaption></figcaption></figure>

***

#### Legend Settings Overview

| Feature              | Description                                                                                                                                                               |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show Legend**      | Toggle the visibility of the legend. Enabling it displays a legend on the chart.                                                                                          |
| **Type**             | <p>Choose between <strong>Plain</strong> (static list) or <strong>Scroll</strong> (allows scrolling through items).<br><img src="/files/LyKyFfrsHo4nf8IZ09bw" alt=""></p> |
| **Background Color** | Set a custom background color for the legend.                                                                                                                             |
| **Icon Type**        | Choose the icon style representing the series in the legend. Options include **auto** (default), line, bar, and more.                                                     |
| **Width & Height**   | Define the dimensions of the legend. Leaving it as **undefined** makes it adjust dynamically.                                                                             |
| **Padding**          | Adjust the spacing around the legend.                                                                                                                                     |

***

#### **Position Settings**

The **Position** section allows you to adjust the legend's placement.

<figure><img src="/files/drksRro8fa3XVNlhGTHP" alt="" width="154"><figcaption></figcaption></figure>

| Setting                      | Description                                                                               |
| ---------------------------- | ----------------------------------------------------------------------------------------- |
| **Top, Bottom, Left, Right** | Set exact positions in pixels or leave as **auto** to let the system determine placement. |

***

#### **Item Settings**

The **Item** section lets you customize the individual legend items.

<figure><img src="/files/a72kNXmDEByofelxuaw7" alt="" width="153"><figcaption></figcaption></figure>

| Setting         | Description                           |
| --------------- | ------------------------------------- |
| **Item Gap**    | Adjusts spacing between legend items. |
| **Item Width**  | Defines the width of each item.       |
| **Item Height** | Defines the height of each item.      |

***

#### **Text Settings**

The **Text** section allows users to style the legend labels.

<figure><img src="/files/R6IA5ArQ0fCQo7lOnaBG" alt="" width="152"><figcaption></figcaption></figure>

| Setting            | Description                                                     |
| ------------------ | --------------------------------------------------------------- |
| **Font**           | Choose the font family for the legend text.                     |
| **Size**           | Adjust the font size.                                           |
| **Bold / Italic**  | Enable bold or italic styling.                                  |
| **Color**          | Set the text color.                                             |
| **Background**     | Define a background color for the legend text.                  |
| **Width & Height** | Adjust the dimensions of the text box.                          |
| **Text Padding**   | Modify the space around text within the legend.                 |
| **Overflow**       | Set how text overflow should be handled (e.g., clip, ellipsis). |

***

By customizing these settings, users can ensure that the legend is clear, readable, and aligns well with their chart layout.