> For the complete documentation index, see [llms.txt](https://nocode-artisan.gitbook.io/plotly-charts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/options/legend.md).

# Legend

### Basic Options

<details>

<summary>Visible</summary>

**Default Value**: true

**Type**: boolean

**Documentation**: Determines whether or not this legend is visible.

**Path**: layout.legend.visible

</details>

***

### Title Attributes

<details>

<summary>Font Color</summary>

**Type**: color

**Path**: layout.legend.title.font.color

</details>

<details>

<summary>Font Size</summary>

**Type**: number

**Min**: 1

**Path**: layout.legend.title.font.size

</details>

<details>

<summary>Side</summary>

**Type**: enumerated

**Enum Options**: top,left,top left,top center,top right

**Documentation**: Determines the location of legend's title with respect to the legend items. Defaulted to *top* with `orientation` is *h*. Defaulted to *left* with `orientation` is *v*. The *top left* options could be used to expand top center and top right are for horizontal alignment legend area in both x and y sides.

**Path**: layout.legend.title.side

</details>

<details>

<summary>Text</summary>

**Default Value**:

**Type**: string

**Documentation**: Sets the title of the legend.

**Path**: layout.legend.title.text

</details>

***

### Styling and Appearance

<details>

<summary>Bg Color</summary>

**Type**: color

**Documentation**: Sets the legend background color. Defaults to `layout.paper_bgcolor`.

**Path**: layout.legend.bgcolor

</details>

<details>

<summary>Border Color</summary>

**Default Value**: #444

**Type**: color

**Documentation**: Sets the color of the border enclosing the legend.

**Path**: layout.legend.bordercolor

</details>

<details>

<summary>Border Width</summary>

**Default Value**: 0

**Type**: number

**Min**: 0

**Documentation**: Sets the width (in px) of the border enclosing the legend.

**Path**: layout.legend.borderwidth

</details>

<details>

<summary>Orientation</summary>

**Default Value**: v

**Type**: enumerated

**Enum Options**: v,h

**Documentation**: Sets the orientation of the legend.

**Path**: layout.legend.orientation

</details>

***

### Layout and Positioning

<details>

<summary>Entry Width</summary>

**Type**: number

**Min**: 0

**Documentation**: Sets the width (in px or fraction) of the legend. Use 0 to size the entry based on the text width, when `entrywidthmode` is set to *pixels*.

**Path**: layout.legend.entrywidth

</details>

<details>

<summary>Entry Width Mode</summary>

**Default Value**: pixels

**Type**: enumerated

**Enum Options**: fraction,pixels

**Documentation**: Determines what entrywidth means.

**Path**: layout.legend.entrywidthmode

</details>

<details>

<summary>V Align</summary>

**Default Value**: middle

**Type**: enumerated

**Enum Options**: top,middle,bottom

**Documentation**: Sets the vertical alignment of the symbols with respect to their associated text.

**Path**: layout.legend.valign

</details>

<details>

<summary>X</summary>

**Type**: number

**Documentation**: Sets the x position with respect to `xref` (in normalized coordinates) of the legend. When `xref` is *paper*, defaults to *1.02* for vertical legends and defaults to *0* for horizontal legends. When `xref` is *container*, defaults to *1* for vertical legends and defaults to *0* for horizontal legends. Must be between *0* and *1* if `xref` is *container*. and between *-2* and *3* if `xref` is *paper*.

**Path**: layout.legend.x

</details>

<details>

<summary>X Anchor</summary>

**Default Value**: left

**Type**: enumerated

**Enum Options**: auto,left,center,right

**Documentation**: Sets the legend's horizontal position anchor. This anchor binds the `x` position to the *left*, *center* or *right* of the legend. Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3, anchors legends to the left for `x` values less than or equal to 1/3 and anchors legends with respect to their center otherwise.

**Path**: layout.legend.xanchor

</details>

<details>

<summary>Y</summary>

**Type**: number

**Documentation**: Sets the y position with respect to `yref` (in normalized coordinates) of the legend. When `yref` is *paper*, defaults to *1* for vertical legends, defaults to *-0.1* for horizontal legends on graphs w/o range sliders and defaults to *1.1* for horizontal legends on graph with one or multiple range sliders. When `yref` is *container*, defaults to *1*. Must be between *0* and *1* if `yref` is *container* and between *-2* and *3* if `yref` is *paper*.

**Path**: layout.legend.y

</details>

<details>

<summary>Y Anchor</summary>

**Type**: enumerated

**Enum Options**: auto,top,middle,bottom

**Documentation**: Sets the legend's vertical position anchor This anchor binds the `y` position to the *top*, *middle* or *bottom* of the legend. Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3, anchors legends to at their top for `y` values greater than or equal to 2/3 and anchors legends with respect to their middle otherwise.

**Path**: layout.legend.yanchor

</details>

***

### Legend Items Formatting

<details>

<summary>Item Sizing</summary>

**Default Value**: trace

**Type**: enumerated

**Enum Options**: trace,constant

**Documentation**: Determines if the legend items symbols scale with their corresponding *trace* attributes or remain *constant* independent of the symbol size on the graph.

**Path**: layout.legend.itemsizing

</details>

<details>

<summary>Item Width</summary>

**Default Value**: 30

**Type**: number

**Min**: 30

**Documentation**: Sets the width (in px) of the legend item symbols (the part other than the title.text).

**Path**: layout.legend.itemwidth

</details>

<details>

<summary>Trace Order</summary>

**Type**: flaglist

**Flag Options**: reversed,grouped

**Flag Single**: normal

**Documentation**: Determines the order at which the legend items are displayed. If *normal*, the items are displayed top-to-bottom in the same order as the input data. If *reversed*, the items are displayed in the opposite order as *normal*. If *grouped*, the items are displayed in groups (when a trace `legendgroup` is provided). if *grouped+reversed*, the items are displayed in the opposite order as *grouped*.

**Path**: layout.legend.traceorder

</details>

***

### Interacting Options

<details>

<summary>Item Click</summary>

**Default Value**: toggle

**Type**: enumerated

**Enum Options**: toggle,toggleothers,false

**Documentation**: Determines the behavior on legend item click. *toggle* toggles the visibility of the item clicked on the graph. *toggleothers* makes the clicked item the sole visible item on the graph. *false* disables legend item click interactions.

**Path**: layout.legend.itemclick

</details>

<details>

<summary>Item Double Click</summary>

**Default Value**: toggleothers

**Type**: enumerated

**Enum Options**: toggle,toggleothers,false

**Documentation**: Determines the behavior on legend item double-click. *toggle* toggles the visibility of the item clicked on the graph. *toggleothers* makes the clicked item the sole visible item on the graph. *false* disables legend item double-click interactions.

**Path**: layout.legend.itemdoubleclick

</details>

***