JavaScript Figure Reference: layout.shapes
- shapes
Parent:layout
Type: array of object where each object has one or more of the keys listed below.- editable
Parent:layout.shapes[]
Type: booleanDetermines whether the shape could be activated for edit or not. Has no effect when the older editable shapes mode is enabled via `config.editable` or `config.edits.shapePosition`.
- fillcolor
Parent:layout.shapes[]
Type: color
Default:"rgba(0,0,0,0)"
Sets the color filling the shape's interior. Only applies to closed shapes.
- fillrule
Parent:layout.shapes[]
Type: enumerated , one of ("evenodd"
|"nonzero"
)
Default:"evenodd"
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
- label
Parent:layout.shapes[]
Type: object containing one or more of the keys listed below.- font
Parent:layout.shapes[].label
Type: object containing one or more of the keys listed below.Sets the shape label text font.
- color
Parent:layout.shapes[].label.font
Type: color - family
Parent:layout.shapes[].label.font
Type: stringHTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans", "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
- lineposition
Parent:layout.shapes[].label.font
Type: flaglist string. Any combination of"under"
,"over"
,"through"
joined with a"+"
OR"none"
.
Examples:"under"
,"over"
,"under+over"
,"under+over+through"
,"none"
Default:"none"
Sets the kind of decoration line(s) with text, such as an "under", "over" or "through" as well as combinations e.g. "under+over", etc.
- shadow
Parent:layout.shapes[].label.font
Type: string
Default:"none"
Sets the shape and color of the shadow behind text. "auto" places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
- size
Parent:layout.shapes[].label.font
Type: number greater than or equal to 1 - style
Parent:layout.shapes[].label.font
Type: enumerated , one of ("normal"
|"italic"
)
Default:"normal"
Sets whether a font should be styled with a normal or italic face from its family.
- textcase
Parent:layout.shapes[].label.font
Type: enumerated , one of ("normal"
|"word caps"
|"upper"
|"lower"
)
Default:"normal"
Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
- variant
Parent:layout.shapes[].label.font
Type: enumerated , one of ("normal"
|"small-caps"
|"all-small-caps"
|"all-petite-caps"
|"petite-caps"
|"unicase"
)
Default:"normal"
Sets the variant of the font.
- weight
Parent:layout.shapes[].label.font
Type: integer between or equal to 1 and 1000
Default:normal
Sets the weight (or boldness) of the font.
- color
- padding
Parent:layout.shapes[].label
Type: number greater than or equal to 0
Default:3
Sets padding (in px) between edge of label and edge of shape.
- text
Parent:layout.shapes[].label
Type: string
Default:""
Sets the text to display with shape. It is also used for legend item if `name` is not provided.
- textangle
Parent:layout.shapes[].label
Type: angle
Default:"auto"
Sets the angle at which the label text is drawn with respect to the horizontal. For lines, angle "auto" is the same angle as the line. For all other shapes, angle "auto" is horizontal.
- textposition
Parent:layout.shapes[].label
Type: enumerated , one of ("top left"
|"top center"
|"top right"
|"middle left"
|"middle center"
|"middle right"
|"bottom left"
|"bottom center"
|"bottom right"
|"start"
|"middle"
|"end"
)Sets the position of the label text relative to the shape. Supported values for rectangles, circles and paths are "top left", "top center", "top right", "middle left", "middle center", "middle right", "bottom left", "bottom center", and "bottom right". Supported values for lines are "start", "middle", and "end". Default: "middle center" for rectangles, circles, and paths; "middle" for lines.
- texttemplate
Parent:layout.shapes[].label
Type: string
Default:""
Template string used for rendering the shape's label. Note that this will override `text`. Variables are inserted using %{variable}, for example "x0: %{x0}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{x0:$.2f}". See https://github.com/d3/d3-format/tree/v1.4.5#d3-format for details on the formatting syntax. Dates are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{x0|%m %b %Y}". See https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. A single multiplication or division operation may be applied to numeric variables, and combined with d3 number formatting, for example "Length in cm: %{x0"2.54}", "%{slope"60:.1f} meters per second." For log axes, variable values are given in log units. For date axes, x/y coordinate variables and center variables use datetimes, while all other variable values use values in ms. Finally, the template string has access to variables `x0`, `x1`, `y0`, `y1`, `slope`, `dx`, `dy`, `width`, `height`, `length`, `xcenter` and `ycenter`.
- xanchor
Parent:layout.shapes[].label
Type: enumerated , one of ("auto"
|"left"
|"center"
|"right"
)
Default:"auto"
Sets the label's horizontal position anchor This anchor binds the specified `textposition` to the "left", "center" or "right" of the label text. For example, if `textposition` is set to "top right" and `xanchor` to "right" then the right-most portion of the label text lines up with the right-most edge of the shape.
- yanchor
Parent:layout.shapes[].label
Type: enumerated , one of ("top"
|"middle"
|"bottom"
)Sets the label's vertical position anchor This anchor binds the specified `textposition` to the "top", "middle" or "bottom" of the label text. For example, if `textposition` is set to "top right" and `yanchor` to "top" then the top-most portion of the label text lines up with the top-most edge of the shape.
- font
- layer
Parent:layout.shapes[]
Type: enumerated , one of ("below"
|"above"
|"between"
)
Default:"above"
Specifies whether shapes are drawn below gridlines ("below"), between gridlines and traces ("between") or above traces ("above").
- legend
Parent:layout.shapes[]
Type: subplotid
Default:legend
Sets the reference to a legend to show this shape in. References to these legends are "legend", "legend2", "legend3", etc. Settings for these legends are set in the layout, under `layout.legend`, `layout.legend2`, etc.
- legendgroup
Parent:layout.shapes[]
Type: string
Default:""
Sets the legend group for this shape. Traces and shapes part of the same legend group hide/show at the same time when toggling legend items.
- legendgrouptitle
Parent:layout.shapes[]
Type: object containing one or more of the keys listed below.- font
Parent:layout.shapes[].legendgrouptitle
Type: object containing one or more of the keys listed below.Sets this legend group's title font.
- color
Parent:layout.shapes[].legendgrouptitle.font
Type: color - family
Parent:layout.shapes[].legendgrouptitle.font
Type: stringHTML font family - the typeface that will be applied by the web browser. The web browser will only be able to apply a font if it is available on the system which it operates. Provide multiple font families, separated by commas, to indicate the preference in which to apply fonts if they aren't available on the system. The Chart Studio Cloud (at https://chart-studio.plotly.com or on-premise) generates images on a server, where only a select number of fonts are installed and supported. These include "Arial", "Balto", "Courier New", "Droid Sans", "Droid Serif", "Droid Sans Mono", "Gravitas One", "Old Standard TT", "Open Sans", "Overpass", "PT Sans Narrow", "Raleway", "Times New Roman".
- lineposition
Parent:layout.shapes[].legendgrouptitle.font
Type: flaglist string. Any combination of"under"
,"over"
,"through"
joined with a"+"
OR"none"
.
Examples:"under"
,"over"
,"under+over"
,"under+over+through"
,"none"
Default:"none"
Sets the kind of decoration line(s) with text, such as an "under", "over" or "through" as well as combinations e.g. "under+over", etc.
- shadow
Parent:layout.shapes[].legendgrouptitle.font
Type: string
Default:"none"
Sets the shape and color of the shadow behind text. "auto" places minimal shadow and applies contrast text font color. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow for additional options.
- size
Parent:layout.shapes[].legendgrouptitle.font
Type: number greater than or equal to 1 - style
Parent:layout.shapes[].legendgrouptitle.font
Type: enumerated , one of ("normal"
|"italic"
)
Default:"normal"
Sets whether a font should be styled with a normal or italic face from its family.
- textcase
Parent:layout.shapes[].legendgrouptitle.font
Type: enumerated , one of ("normal"
|"word caps"
|"upper"
|"lower"
)
Default:"normal"
Sets capitalization of text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
- variant
Parent:layout.shapes[].legendgrouptitle.font
Type: enumerated , one of ("normal"
|"small-caps"
|"all-small-caps"
|"all-petite-caps"
|"petite-caps"
|"unicase"
)
Default:"normal"
Sets the variant of the font.
- weight
Parent:layout.shapes[].legendgrouptitle.font
Type: integer between or equal to 1 and 1000
Default:normal
Sets the weight (or boldness) of the font.
- color
- text
Parent:layout.shapes[].legendgrouptitle
Type: string
Default:""
Sets the title of the legend group.
- font
- legendrank
Parent:layout.shapes[]
Type: number
Default:1000
Sets the legend rank for this shape. Items and groups with smaller ranks are presented on top/left side while with "reversed" `legend.traceorder` they are on bottom/right side. The default legendrank is 1000, so that you can use ranks less than 1000 to place certain items before all unranked items, and ranks greater than 1000 to go after all unranked items. When having unranked or equal rank items shapes would be displayed after traces i.e. according to their order in data and layout.
- legendwidth
Parent:layout.shapes[]
Type: number greater than or equal to 0Sets the width (in px or fraction) of the legend for this shape.
- line
Parent:layout.shapes[]
Type: object containing one or more of the keys listed below.- color
Parent:layout.shapes[].line
Type: colorSets the line color.
- dash
Parent:layout.shapes[].line
Type: string
Default:"solid"
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").
- width
Parent:layout.shapes[].line
Type: number greater than or equal to 0
Default:2
Sets the line width (in px).
- color
- name
Parent:layout.shapes[]
Type: stringWhen 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.
- opacity
Parent:layout.shapes[]
Type: number between or equal to 0 and 1
Default:1
Sets the opacity of the shape.
- path
Parent:layout.shapes[]
Type: stringFor `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
- showlegend
Parent:layout.shapes[]
Type: booleanDetermines whether or not this shape is shown in the legend.
- templateitemname
Parent:layout.shapes[]
Type: stringUsed to refer to a named item in this array in the template. Named items from the template will be created even without a matching item in the input figure, but you can modify one by making an item with `templateitemname` matching its `name`, alongside your modifications (including `visible: false` or `enabled: false` to hide it). If there is no template or no matching item, this item will be hidden unless you explicitly show it with `visible: true`.
- type
Parent:layout.shapes[]
Type: enumerated , one of ("circle"
|"rect"
|"path"
|"line"
)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.
- visible
Parent:layout.shapes[]
Type: enumerated , one of (true
|false
|"legendonly"
)
Default:true
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).
- x0
Parent:layout.shapes[]
Type: number or categorical coordinate stringSets the shape's starting x position. See `type` and `xsizemode` for more info.
- x0shift
Parent:layout.shapes[]
Type: number between or equal to -1 and 1
Default:0
Shifts `x0` away from the center of the category when `xref` is a "category" or "multicategory" axis. -0.5 corresponds to the start of the category and 0.5 corresponds to the end of the category.
- x1
Parent:layout.shapes[]
Type: number or categorical coordinate stringSets the shape's end x position. See `type` and `xsizemode` for more info.
- x1shift
Parent:layout.shapes[]
Type: number between or equal to -1 and 1
Default:0
Shifts `x1` away from the center of the category when `xref` is a "category" or "multicategory" axis. -0.5 corresponds to the start of the category and 0.5 corresponds to the end of the category.
- xanchor
Parent:layout.shapes[]
Type: number or categorical coordinate stringOnly 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".
- xref
Parent:layout.shapes[]
Type: enumerated , one of ("paper"
|"/^x([2-9]|[1-9][0-9]+)?( domain)?$/"
)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.
- xsizemode
Parent:layout.shapes[]
Type: enumerated , one of ("scaled"
|"pixel"
)
Default:"scaled"
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.
- y0
Parent:layout.shapes[]
Type: number or categorical coordinate stringSets the shape's starting y position. See `type` and `ysizemode` for more info.
- y0shift
Parent:layout.shapes[]
Type: number between or equal to -1 and 1
Default:0
Shifts `y0` away from the center of the category when `yref` is a "category" or "multicategory" axis. -0.5 corresponds to the start of the category and 0.5 corresponds to the end of the category.
- y1
Parent:layout.shapes[]
Type: number or categorical coordinate stringSets the shape's end y position. See `type` and `ysizemode` for more info.
- y1shift
Parent:layout.shapes[]
Type: number between or equal to -1 and 1
Default:0
Shifts `y1` away from the center of the category when `yref` is a "category" or "multicategory" axis. -0.5 corresponds to the start of the category and 0.5 corresponds to the end of the category.
- yanchor
Parent:layout.shapes[]
Type: number or categorical coordinate stringOnly 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".
- yref
Parent:layout.shapes[]
Type: enumerated , one of ("paper"
|"/^y([2-9]|[1-9][0-9]+)?( domain)?$/"
)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.
- ysizemode
Parent:layout.shapes[]
Type: enumerated , one of ("scaled"
|"pixel"
)
Default:"scaled"
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.
- editable