interface Annotations {
    align: "left" | "center" | "right";
    arrowcolor: string;
    arrowhead: number;
    arrowside: "end" | "start";
    arrowsize: number;
    arrowwidth: number;
    ax: number;
    axref: XAxisName | "pixel";
    ay: number;
    ayref: YAxisName | "pixel";
    bgcolor: string;
    bordercolor: string;
    borderpad: number;
    borderwidth: number;
    captureevents: boolean;
    clicktoshow: false | "onoff" | "onout";
    font: Partial<Font>;
    height: number;
    hoverlabel: Partial<HoverLabel>;
    hovertext: string;
    opacity: number;
    showarrow: boolean;
    standoff: number;
    startarrowhead: number;
    startarrowsize: number;
    startstandoff: number;
    text: string;
    textangle: string;
    valign: "top" | "middle" | "bottom";
    visible: boolean;
    width: number;
    x: string | number;
    xanchor:
        | "auto"
        | "left"
        | "center"
        | "right";
    xclick: any;
    xref: "paper" | XAxisName;
    xshift: number;
    y: string | number;
    yanchor:
        | "auto"
        | "top"
        | "middle"
        | "bottom";
    yclick: any;
    yref: "paper" | YAxisName;
    yshift: number;
}

Hierarchy (view full)

Properties

align: "left" | "center" | "right"

Sets the horizontal alignment of the text within the box. Has an effect only if text spans more two or more lines (i.e. text contains one or more
HTML tags) or if an explicit width is set to override the text width.

arrowcolor: string

Sets the color of the annotation arrow.

arrowhead: number

Sets the end annotation arrow head style.

arrowside: "end" | "start"

Sets the annotation arrow head position.

arrowsize: number

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

Sets the width (in px) of annotation arrow line.

ax: number

Sets 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 an axis, this is an absolute value on that axis, like x, NOT a relative value.

axref: XAxisName | "pixel"

Indicates in what terms the tail of the annotation (ax,ay) is specified. If pixel, ax is a relative offset in pixels from x. If set to an x axis id (e.g. x or x2), ax is specified in the same terms as that axis. This is useful for trendline annotations which should continue to indicate the correct trend when zoomed.

ay: number

Sets 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 an axis, this is an absolute value on that axis, like y, NOT a relative value.

ayref: YAxisName | "pixel"

Indicates in what terms the tail of the annotation (ax,ay) is specified. If pixel, ay is a relative offset in pixels from y. If set to a y axis id (e.g. y or y2), ay is specified in the same terms as that axis. This is useful for trendline annotations which should continue to indicate the correct trend when zoomed.

bgcolor: string

Sets the background color of all hover labels on graph.

bordercolor: string

Sets the border color of all hover labels on graph.

borderpad: number

Sets the padding (in px) between the text and the enclosing border.

borderwidth: number

Sets the width (in px) of the border enclosing the annotation text.

captureevents: boolean

Determines 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: 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: Partial<Font>

Sets the default hover label font used by all traces on the graph.

height: number

Sets an explicit height for the text box. null (default) lets the text set the box height. Taller text will be clipped.

hoverlabel: Partial<HoverLabel>
hovertext: string

Sets text to appear when hovering over this annotation. If omitted or blank, no hover label will appear.

opacity: number

Sets the opacity of the annotation (text + arrow).

showarrow: boolean

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

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

Sets the start annotation arrow head style.

startarrowsize: number

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

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.

text: string

Sets the text associated with this annotation. Plotly uses a subset of HTML tags to do things like newline (
), bold (), italics (), hyperlinks (). Tags , , are also supported.

textangle: string

Sets the angle at which the text is drawn with respect to the horizontal.

valign: "top" | "middle" | "bottom"

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

Determines whether or not this annotation is visible.

width: number

Sets 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
to start a new line.

x: string | number

Sets 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:
    | "auto"
    | "left"
    | "center"
    | "right"

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

Toggle this annotation when clicking a data point whose x value is xclick rather than the annotation's x value.

xref: "paper" | XAxisName

Sets the annotation's x coordinate axis. If set to an x axis id (e.g. x or x2), the x position refers to an x coordinate If set to paper, the x position refers to the distance from the left side of the plotting area in normalized coordinates where 0 (1) corresponds to the left (right) side.

xshift: number

Shifts the position of the whole annotation and arrow to the right (positive) or left (negative) by this many pixels.

y: string | number

Sets 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:
    | "auto"
    | "top"
    | "middle"
    | "bottom"

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

Toggle this annotation when clicking a data point whose y value is yclick rather than the annotation's y value.

yref: "paper" | YAxisName

Sets the annotation's y coordinate axis. If set to an y axis id (e.g. y or y2), the y position refers to an 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).

yshift: number

Shifts the position of the whole annotation and arrow up (positive) or down (negative) by this many pixels.