> 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/shapes.md).

# Shapes

### Basic Options

<details>

<summary>Name</summary>

**Type**: string

**Documentation**: When used in a template, named items are created in the output figure in addition to any items the figure already has in this array. You can modify these items in the output figure by making your own item with `templateitemname` matching this `name` alongside your modifications (including `visible: false` or `enabled: false` to hide it). Has no effect outside of a template.

**Path**: layout.shapes.index.name

</details>

<details>

<summary>Opacity</summary>

**Default Value**: 1

**Type**: number

**Min**: 0

**Max**: 1

**Documentation**: Sets the opacity of the shape.

**Path**: layout.shapes.index.opacity

</details>

<details>

<summary>Path</summary>

**Type**: string

**Documentation**: For `type` *path* - a valid SVG path with the pixel values replaced by data values in `xsizemode`/`ysizemode` being *scaled* and taken unmodified as pixels relative to `xanchor` and `yanchor` in case of *pixel* size mode. There are a few restrictions / quirks only absolute instructions, not relative. So the allowed segments are: M, L, H, V, Q, C, T, S, and Z arcs (A) are not allowed because radius rx and ry are relative. In the future we could consider supporting relative commands, but we would have to decide on how to handle date and log axes. Note that even as is, Q and C Bezier paths that are smooth on linear axes may not be smooth on log, and vice versa. no chained "polybezier" commands - specify the segment type for each one. On category axes, values are numbers scaled to the serial numbers of categories because using the categories themselves there would be no way to describe fractional positions On data axes: because space and T are both normal components of path strings, we can't use either to separate date from time parts. Therefore we'll use underscore for this purpose: 2015-02-21\_13:45:56.789

**Path**: layout.shapes.index.path

</details>

<details>

<summary>Type</summary>

**Type**: enumerated

**Enum Options**: circle,rect,path,line

**Documentation**: Specifies the shape type to be drawn. If *line*, a line is drawn from (`x0`,`y0`) to (`x1`,`y1`) with respect to the axes' sizing mode. If *circle*, a circle is drawn from ((`x0`+`x1`)/2, (`y0`+`y1`)/2)) with radius (|(`x0`+`x1`)/2 - `x0`|, |(`y0`+`y1`)/2 -`y0`)|) with respect to the axes' sizing mode. If *rect*, a rectangle is drawn linking (`x0`,`y0`), (`x1`,`y0`), (`x1`,`y1`), (`x0`,`y1`), (`x0`,`y0`) with respect to the axes' sizing mode. If *path*, draw a custom SVG path using `path`. with respect to the axes' sizing mode.

**Path**: layout.shapes.index.type

</details>

<details>

<summary>Visible</summary>

**Default Value**: true

**Type**: enumerated

**Enum Options**: true,false,legendonly

**Documentation**: Determines whether or not this shape is visible. If *legendonly*, the shape is not drawn, but can appear as a legend item (provided that the legend itself is visible).

**Path**: layout.shapes.index.visible

</details>

***

### Layout and Positioning

<details>

<summary>X0</summary>

**Type**: any

**Documentation**: Sets the shape's starting x position. See `type` and `xsizemode` for more info.

**Path**: layout.shapes.index.x0

</details>

<details>

<summary>X1</summary>

**Type**: any

**Documentation**: Sets the shape's end x position. See `type` and `xsizemode` for more info.

**Path**: layout.shapes.index.x1

</details>

<details>

<summary>X Anchor</summary>

**Type**: any

**Documentation**: Only relevant in conjunction with `xsizemode` set to *pixel*. Specifies the anchor point on the x axis to which `x0`, `x1` and x coordinates within `path` are relative to. E.g. useful to attach a pixel sized shape to a certain data value. No effect when `xsizemode` not set to *pixel*.

**Path**: layout.shapes.index.xanchor

</details>

<details>

<summary>X Ref</summary>

**Type**: enumerated

**Enum Options**: paper,/^x(\[2-9]|\[1-9]\[0-9]+)?( domain)?$/

**Documentation**: Sets the shape's x coordinate axis. If set to a x axis id (e.g. *x* or *x2*), the `x` position refers to a x coordinate. If set to *paper*, the `x` position refers to the distance from the left of the plotting area in normalized coordinates where *0* (*1*) corresponds to the left (right). If set to a x axis ID followed by *domain* (separated by a space), the position behaves like for *paper*, but refers to the distance in fractions of the domain length from the left of the domain of that axis: e.g., *x2 domain* refers to the domain of the second x axis and a x position of 0.5 refers to the point between the left and the right of the domain of the second x axis.

**Path**: layout.shapes.index.xref

</details>

<details>

<summary>X Size Mode</summary>

**Default Value**: scaled

**Type**: enumerated

**Enum Options**: scaled,pixel

**Documentation**: Sets the shapes's sizing mode along the x axis. If set to *scaled*, `x0`, `x1` and x coordinates within `path` refer to data values on the x axis or a fraction of the plot area's width (`xref` set to *paper*). If set to *pixel*, `xanchor` specifies the x position in terms of data or plot fraction but `x0`, `x1` and x coordinates within `path` are pixels relative to `xanchor`. This way, the shape can have a fixed width while maintaining a position relative to data or plot fraction.

**Path**: layout.shapes.index.xsizemode

</details>

<details>

<summary>Y0</summary>

**Type**: any

**Documentation**: Sets the shape's starting y position. See `type` and `ysizemode` for more info.

**Path**: layout.shapes.index.y0

</details>

<details>

<summary>Y1</summary>

**Type**: any

**Documentation**: Sets the shape's end y position. See `type` and `ysizemode` for more info.

**Path**: layout.shapes.index.y1

</details>

<details>

<summary>Y Anchor</summary>

**Type**: any

**Documentation**: Only relevant in conjunction with `ysizemode` set to *pixel*. Specifies the anchor point on the y axis to which `y0`, `y1` and y coordinates within `path` are relative to. E.g. useful to attach a pixel sized shape to a certain data value. No effect when `ysizemode` not set to *pixel*.

**Path**: layout.shapes.index.yanchor

</details>

<details>

<summary>Y Ref</summary>

**Type**: enumerated

**Enum Options**: paper,/^y(\[2-9]|\[1-9]\[0-9]+)?( domain)?$/

**Documentation**: Sets the shape's y coordinate axis. If set to a y axis id (e.g. *y* or *y2*), the `y` position refers to a y coordinate. If set to *paper*, the `y` position refers to the distance from the bottom of the plotting area in normalized coordinates where *0* (*1*) corresponds to the bottom (top). If set to a y axis ID followed by *domain* (separated by a space), the position behaves like for *paper*, but refers to the distance in fractions of the domain length from the bottom of the domain of that axis: e.g., *y2 domain* refers to the domain of the second y axis and a y position of 0.5 refers to the point between the bottom and the top of the domain of the second y axis.

**Path**: layout.shapes.index.yref

</details>

<details>

<summary>Y Size Mode</summary>

**Default Value**: scaled

**Type**: enumerated

**Enum Options**: scaled,pixel

**Documentation**: Sets the shapes's sizing mode along the y axis. If set to *scaled*, `y0`, `y1` and y coordinates within `path` refer to data values on the y axis or a fraction of the plot area's height (`yref` set to *paper*). If set to *pixel*, `yanchor` specifies the y position in terms of data or plot fraction but `y0`, `y1` and y coordinates within `path` are pixels relative to `yanchor`. This way, the shape can have a fixed height while maintaining a position relative to data or plot fraction.

**Path**: layout.shapes.index.ysizemode

</details>

***

### Styling and Appearance

<details>

<summary>Color</summary>

**Type**: color

**Documentation**: Sets the line color.

**Path**: layout.shapes.index.line.color

</details>

<details>

<summary>Dash</summary>

**Default Value**: solid

**Type**: string

**Enum Options**: solid,dot,dash,longdash,dashdot,longdashdot

**Documentation**: Sets the dash style of lines. Set to a dash type string (*solid*, *dot*, *dash*, *longdash*, *dashdot*, or *longdashdot*) or a dash length list in px (eg *5px,10px,2px,2px*).

**Path**: layout.shapes.index.line.dash

</details>

<details>

<summary>Width</summary>

**Default Value**: 2

**Type**: number

**Min**: 0

**Documentation**: Sets the line width (in px).

**Path**: layout.shapes.index.line.width

</details>

***

### Fill Options

<details>

<summary>Fill Color</summary>

**Default Value**: rgba(0,0,0,0)

**Type**: color

**Documentation**: Sets the color filling the shape's interior. Only applies to closed shapes.

**Path**: layout.shapes.index.fillcolor

</details>

<details>

<summary>Fill Rule</summary>

**Default Value**: evenodd

**Type**: enumerated

**Enum Options**: evenodd,nonzero

**Documentation**: Determines which regions of complex paths constitute the interior. For more info please visit <https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule>

**Path**: layout.shapes.index.fillrule

</details>