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: boolean

      Determines 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: string

          HTML 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.

      • 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.

    • 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: string

          HTML 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.

      • text
        Parent: layout.shapes[].legendgrouptitle
        Type: string
        Default: ""

        Sets the title of the legend group.

    • 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 0

      Sets 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: color

        Sets 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).

    • name
      Parent: layout.shapes[]
      Type: string

      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.

    • 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: string

      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

    • showlegend
      Parent: layout.shapes[]
      Type: boolean

      Determines whether or not this shape is shown in the legend.

    • templateitemname
      Parent: layout.shapes[]
      Type: string

      Used 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 string

      Sets 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 string

      Sets 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 string

      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".

    • 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 string

      Sets 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 string

      Sets 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 string

      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".

    • 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.