JavaScript Figure Reference: layout.annotations
- annotations
Parent:layout
Type: array of object where each object has one or more of the keys listed below.
An annotation is a text element that can be placed anywhere in the plot. It can be positioned with respect to relative coordinates in the plot or with respect to the actual data coordinates of the graph. Annotations can be shown with or without an arrow.- align
Parent:layout.annotations[]
Type: enumerated , one of ("left"
|"center"
|"right"
)
Default:"center"
Sets the horizontal alignment of the `text` within the box. Has an effect only if `text` spans two or more lines (i.e. `text` contains one or more <br> HTML tags) or if an explicit width is set to override the text width.
- arrowcolor
Parent:layout.annotations[]
Type: colorSets the color of the annotation arrow.
- arrowhead
Parent:layout.annotations[]
Type: integer between or equal to 0 and 8
Default:1
Sets the end annotation arrow head style.
- arrowside
Parent:layout.annotations[]
Type: flaglist string. Any combination of"end"
,"start"
joined with a"+"
OR"none"
.
Examples:"end"
,"start"
,"end+start"
,"none"
Default:"end"
Sets the annotation arrow head position.
- arrowsize
Parent:layout.annotations[]
Type: number greater than or equal to 0.3
Default:1
Sets the size of the end annotation arrow head, relative to `arrowwidth`. A value of 1 (default) gives a head about 3x as wide as the line.
- arrowwidth
Parent:layout.annotations[]
Type: number greater than or equal to 0.1Sets the width (in px) of annotation arrow line.
- ax
Parent:layout.annotations[]
Type: number or categorical coordinate stringSets the x component of the arrow tail about the arrow head. If `axref` is `pixel`, a positive (negative) component corresponds to an arrow pointing from right to left (left to right). If `axref` is not `pixel` and is exactly the same as `xref`, this is an absolute value on that axis, like `x`, specified in the same coordinates as `xref`.
- axref
Parent:layout.annotations[]
Type: enumerated , one of ("pixel"
|"/^x([2-9]|[1-9][0-9]+)?( domain)?$/"
)
Default:"pixel"
Indicates in what coordinates the tail of the annotation (ax,ay) is specified. 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. In order for absolute positioning of the arrow to work, "axref" must be exactly the same as "xref", otherwise "axref" will revert to "pixel" (explained next). For relative positioning, "axref" can be set to "pixel", in which case the "ax" value is specified in pixels relative to "x". Absolute positioning is useful for trendline annotations which should continue to indicate the correct trend when zoomed. Relative positioning is useful for specifying the text offset for an annotated point.
- ay
Parent:layout.annotations[]
Type: number or categorical coordinate stringSets the y component of the arrow tail about the arrow head. If `ayref` is `pixel`, a positive (negative) component corresponds to an arrow pointing from bottom to top (top to bottom). If `ayref` is not `pixel` and is exactly the same as `yref`, this is an absolute value on that axis, like `y`, specified in the same coordinates as `yref`.
- ayref
Parent:layout.annotations[]
Type: enumerated , one of ("pixel"
|"/^y([2-9]|[1-9][0-9]+)?( domain)?$/"
)
Default:"pixel"
Indicates in what coordinates the tail of the annotation (ax,ay) is specified. 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. In order for absolute positioning of the arrow to work, "ayref" must be exactly the same as "yref", otherwise "ayref" will revert to "pixel" (explained next). For relative positioning, "ayref" can be set to "pixel", in which case the "ay" value is specified in pixels relative to "y". Absolute positioning is useful for trendline annotations which should continue to indicate the correct trend when zoomed. Relative positioning is useful for specifying the text offset for an annotated point.
- bgcolor
Parent:layout.annotations[]
Type: color
Default:"rgba(0,0,0,0)"
Sets the background color of the annotation.
- bordercolor
Parent:layout.annotations[]
Type: color
Default:"rgba(0,0,0,0)"
Sets the color of the border enclosing the annotation `text`.
- borderpad
Parent:layout.annotations[]
Type: number greater than or equal to 0
Default:1
Sets the padding (in px) between the `text` and the enclosing border.
- borderwidth
Parent:layout.annotations[]
Type: number greater than or equal to 0
Default:1
Sets the width (in px) of the border enclosing the annotation `text`.
- captureevents
Parent:layout.annotations[]
Type: booleanDetermines whether the annotation text box captures mouse move and click events, or allows those events to pass through to data points in the plot that may be behind the annotation. By default `captureevents` is "false" unless `hovertext` is provided. If you use the event `plotly_clickannotation` without `hovertext` you must explicitly enable `captureevents`.
- clicktoshow
Parent:layout.annotations[]
Type: enumerated , one of (false
|"onoff"
|"onout"
)Makes this annotation respond to clicks on the plot. If you click a data point that exactly matches the `x` and `y` values of this annotation, and it is hidden (visible: false), it will appear. In "onoff" mode, you must click the same point again to make it disappear, so if you click multiple points, you can show multiple annotations. In "onout" mode, a click anywhere else in the plot (on another data point or not) will hide this annotation. If you need to show/hide this annotation in response to different `x` or `y` values, you can set `xclick` and/or `yclick`. This is useful for example to label the side of a bar. To label markers though, `standoff` is preferred over `xclick` and `yclick`.
- font
Parent:layout.annotations[]
Type: object containing one or more of the keys listed below.Sets the annotation text font.
- color
Parent:layout.annotations[].font
Type: color - family
Parent:layout.annotations[].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.annotations[].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.annotations[].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.annotations[].font
Type: number greater than or equal to 1 - style
Parent:layout.annotations[].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.annotations[].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.annotations[].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.annotations[].font
Type: integer between or equal to 1 and 1000
Default:normal
Sets the weight (or boldness) of the font.
- color
- height
Parent:layout.annotations[]
Type: number greater than or equal to 1Sets an explicit height for the text box. null (default) lets the text set the box height. Taller text will be clipped.
- hoverlabel
Parent:layout.annotations[]
Type: object containing one or more of the keys listed below.- bgcolor
Parent:layout.annotations[].hoverlabel
Type: colorSets the background color of the hover label. By default uses the annotation's `bgcolor` made opaque, or white if it was transparent.
- bordercolor
Parent:layout.annotations[].hoverlabel
Type: colorSets the border color of the hover label. By default uses either dark grey or white, for maximum contrast with `hoverlabel.bgcolor`.
- font
Parent:layout.annotations[].hoverlabel
Type: object containing one or more of the keys listed below.Sets the hover label text font. By default uses the global hover font and size, with color from `hoverlabel.bordercolor`.
- color
Parent:layout.annotations[].hoverlabel.font
Type: color - family
Parent:layout.annotations[].hoverlabel.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.annotations[].hoverlabel.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.annotations[].hoverlabel.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.annotations[].hoverlabel.font
Type: number greater than or equal to 1 - style
Parent:layout.annotations[].hoverlabel.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.annotations[].hoverlabel.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.annotations[].hoverlabel.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.annotations[].hoverlabel.font
Type: integer between or equal to 1 and 1000
Default:normal
Sets the weight (or boldness) of the font.
- color
- bgcolor
- hovertext
Parent:layout.annotations[]
Type: stringSets text to appear when hovering over this annotation. If omitted or blank, no hover label will appear.
- name
Parent:layout.annotations[]
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.annotations[]
Type: number between or equal to 0 and 1
Default:1
Sets the opacity of the annotation (text + arrow).
- showarrow
Parent:layout.annotations[]
Type: boolean
Default:true
Determines whether or not the annotation is drawn with an arrow. If "true", `text` is placed near the arrow's tail. If "false", `text` lines up with the `x` and `y` provided.
- standoff
Parent:layout.annotations[]
Type: number greater than or equal to 0
Default:0
Sets a distance, in pixels, to move the end arrowhead away from the position it is pointing at, for example to point at the edge of a marker independent of zoom. Note that this shortens the arrow from the `ax` / `ay` vector, in contrast to `xshift` / `yshift` which moves everything by this amount.
- startarrowhead
Parent:layout.annotations[]
Type: integer between or equal to 0 and 8
Default:1
Sets the start annotation arrow head style.
- startarrowsize
Parent:layout.annotations[]
Type: number greater than or equal to 0.3
Default:1
Sets the size of the start annotation arrow head, relative to `arrowwidth`. A value of 1 (default) gives a head about 3x as wide as the line.
- startstandoff
Parent:layout.annotations[]
Type: number greater than or equal to 0
Default:0
Sets a distance, in pixels, to move the start arrowhead away from the position it is pointing at, for example to point at the edge of a marker independent of zoom. Note that this shortens the arrow from the `ax` / `ay` vector, in contrast to `xshift` / `yshift` which moves everything by this amount.
- templateitemname
Parent:layout.annotations[]
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`.
- text
Parent:layout.annotations[]
Type: stringSets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (<br>), bold (<b></b>), italics (<i></i>), hyperlinks (<a href='...'></a>). Tags <em>, <sup>, <sub>, <s>, <u> <span> are also supported.
- textangle
Parent:layout.annotations[]
Type: angle
Default:0
Sets the angle at which the `text` is drawn with respect to the horizontal.
- valign
Parent:layout.annotations[]
Type: enumerated , one of ("top"
|"middle"
|"bottom"
)
Default:"middle"
Sets the vertical alignment of the `text` within the box. Has an effect only if an explicit height is set to override the text height.
- visible
Parent:layout.annotations[]
Type: boolean
Default:true
Determines whether or not this annotation is visible.
- width
Parent:layout.annotations[]
Type: number greater than or equal to 1Sets an explicit width for the text box. null (default) lets the text set the box width. Wider text will be clipped. There is no automatic wrapping; use <br> to start a new line.
- x
Parent:layout.annotations[]
Type: number or categorical coordinate stringSets the annotation's x position. If the axis `type` is "log", then you must take the log of your desired range. If the axis `type` is "date", it should be date strings, like date data, though Date objects and unix milliseconds will be accepted and converted to strings. If the axis `type` is "category", it should be numbers, using the scale where each category is assigned a serial number from zero in the order it appears.
- xanchor
Parent:layout.annotations[]
Type: enumerated , one of ("auto"
|"left"
|"center"
|"right"
)
Default:"auto"
Sets the text box's horizontal position anchor This anchor binds the `x` position to the "left", "center" or "right" of the annotation. For example, if `x` is set to 1, `xref` to "paper" and `xanchor` to "right" then the right-most portion of the annotation lines up with the right-most edge of the plotting area. If "auto", the anchor is equivalent to "center" for data-referenced annotations or if there is an arrow, whereas for paper-referenced with no arrow, the anchor picked corresponds to the closest side.
- xclick
Parent:layout.annotations[]
Type: number or categorical coordinate stringToggle this annotation when clicking a data point whose `x` value is `xclick` rather than the annotation's `x` value.
- xref
Parent:layout.annotations[]
Type: enumerated , one of ("paper"
|"/^x([2-9]|[1-9][0-9]+)?( domain)?$/"
)Sets the annotation'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.
- xshift
Parent:layout.annotations[]
Type: number
Default:0
Shifts the position of the whole annotation and arrow to the right (positive) or left (negative) by this many pixels.
- y
Parent:layout.annotations[]
Type: number or categorical coordinate stringSets the annotation's y position. If the axis `type` is "log", then you must take the log of your desired range. If the axis `type` is "date", it should be date strings, like date data, though Date objects and unix milliseconds will be accepted and converted to strings. If the axis `type` is "category", it should be numbers, using the scale where each category is assigned a serial number from zero in the order it appears.
- yanchor
Parent:layout.annotations[]
Type: enumerated , one of ("auto"
|"top"
|"middle"
|"bottom"
)
Default:"auto"
Sets the text box's vertical position anchor This anchor binds the `y` position to the "top", "middle" or "bottom" of the annotation. For example, if `y` is set to 1, `yref` to "paper" and `yanchor` to "top" then the top-most portion of the annotation lines up with the top-most edge of the plotting area. If "auto", the anchor is equivalent to "middle" for data-referenced annotations or if there is an arrow, whereas for paper-referenced with no arrow, the anchor picked corresponds to the closest side.
- yclick
Parent:layout.annotations[]
Type: number or categorical coordinate stringToggle this annotation when clicking a data point whose `y` value is `yclick` rather than the annotation's `y` value.
- yref
Parent:layout.annotations[]
Type: enumerated , one of ("paper"
|"/^y([2-9]|[1-9][0-9]+)?( domain)?$/"
)Sets the annotation'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.
- yshift
Parent:layout.annotations[]
Type: number
Default:0
Shifts the position of the whole annotation and arrow up (positive) or down (negative) by this many pixels.
- align