Scatter (Line, Area, Bubble)
Basic Options
Mode
Type: flaglist
Flag Options: lines,markers,text
Flag Single: none
Documentation: Determines the drawing mode for this scatter trace. If the provided mode
includes text then the text
elements appear at the coordinates. Otherwise, the text
elements appear on hover. If there are less than 20 points and the trace is not stacked then the default is lines+markers. Otherwise, lines.
Path: data.index.mode
Name
Type: string
Documentation: Sets the trace name. The trace name appears as the legend item and on hover.
Path: data.index.name
Opacity
Default Value: 1
Type: number
Min: 0
Max: 1
Documentation: Sets the opacity of the trace.
Path: data.index.opacity
Orientation
Type: enumerated
Enum Options: v,h
Documentation: Only relevant in the following cases: 1. when scattermode
is set to group. 2. when stackgroup
is used, and only the first orientation
found in the stackgroup
will be used - including if visible
is legendonly but not if it is false
. Sets the stacking direction. With v (h), the y (x) values of subsequent traces are added. Also affects the default value of fill
.
Path: data.index.orientation
Data Source
Text
Default Value:
Type: string
Accept List: true
Documentation: Sets text elements associated with each (x,y) pair. If a single string, the same string appears over all the data points. If an array of string, the items are mapped in order to the this trace's (x,y) coordinates. If trace hoverinfo
contains a text flag and hovertext is not set, these elements will be seen in the hover labels.
Path: data.index.text
Lines Styling
Dash
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: data.index.line.dash
Shape
Default Value: linear
Type: enumerated
Enum Options: linear,spline,hv,vh,hvh,vhv
Documentation: Determines the line shape. With spline the lines are drawn using spline interpolation. The other available values correspond to step-wise line shapes.
Path: data.index.line.shape
Simplify
Default Value: true
Type: boolean
Documentation: Simplifies lines by removing nearly-collinear points. When transitioning lines, it may be desirable to disable this so that the number of points along the resulting SVG path is unaffected.
Path: data.index.line.simplify
Smoothing
Default Value: 1
Type: number
Min: 0
Max: 1.3
Documentation: Has an effect only if shape
is set to spline Sets the amount of smoothing. 0 corresponds to no smoothing (equivalent to a linear shape).
Path: data.index.line.smoothing
Width
Default Value: 2
Type: number
Min: 0
Documentation: Sets the line width (in px).
Path: data.index.line.width
Items Styling
Angle
Default Value: 0
Type: angle
Accept List: true
Documentation: Sets the marker angle in respect to angleref
.
Path: data.index.marker.angle
Angle Ref
Default Value: up
Type: enumerated
Enum Options: previous,up
Documentation: Sets the reference for marker angle. With previous, angle 0 points along the line from the previous point to this one. With up, angle 0 points toward the top of the screen.
Path: data.index.marker.angleref
Color
Type: color
Accept List: true
Documentation: Sets the marker color. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to marker.cmin
and marker.cmax
if set.
Path: data.index.marker.color
Gradient Color
Type: color
Accept List: true
Documentation: Sets the final color of the gradient fill: the center color for radial, the right for horizontal, or the bottom for vertical.
Path: data.index.marker.gradient.color
Line Color
Type: color
Accept List: true
Documentation: Sets the marker.line color. It accepts either a specific color or an array of numbers that are mapped to the colorscale relative to the max and min values of the array or relative to marker.line.cmin
and marker.line.cmax
if set.
Path: data.index.marker.line.color
Line Width
Type: number
Accept List: true
Min: 0
Documentation: Sets the width (in px) of the lines bounding the marker points.
Path: data.index.marker.line.width
Max Displayed
Default Value: 0
Type: number
Min: 0
Documentation: Sets a maximum number of points to be drawn on the graph. 0 corresponds to no limit.
Path: data.index.marker.maxdisplayed
Opacity
Type: number
Accept List: true
Min: 0
Max: 1
Documentation: Sets the marker opacity.
Path: data.index.marker.opacity
Size
Default Value: 6
Type: number
Accept List: true
Min: 0
Documentation: Sets the marker size (in px).
Path: data.index.marker.size
Size Mode
Default Value: diameter
Type: enumerated
Enum Options: diameter,area
Documentation: Has an effect only if marker.size
is set to a numerical array. Sets the rule for which the data in size
is converted to pixels.
Path: data.index.marker.sizemode
Size Ref
Default Value: 1
Type: number
Documentation: Has an effect only if marker.size
is set to a numerical array. Sets the scale factor used to determine the rendered size of marker points. Use with sizemin
and sizemode
.
Path: data.index.marker.sizeref
Symbol
Default Value: circle
Type: enumerated
Accept List: true
Enum Options: 0,0,circle,100,100,circle-open,200,200,circle-dot,300,300,circle-open-dot,1,1,square,101,101,square-open,201,201,square-dot,301,301,square-open-dot,2,2,diamond,102,102,diamond-open,202,202,diamond-dot,302,302,diamond-open-dot,3,3,cross,103,103,cross-open,203,203,cross-dot,303,303,cross-open-dot,4,4,x,104,104,x-open,204,204,x-dot,304,304,x-open-dot,5,5,triangle-up,105,105,triangle-up-open,205,205,triangle-up-dot,305,305,triangle-up-open-dot,6,6,triangle-down,106,106,triangle-down-open,206,206,triangle-down-dot,306,306,triangle-down-open-dot,7,7,triangle-left,107,107,triangle-left-open,207,207,triangle-left-dot,307,307,triangle-left-open-dot,8,8,triangle-right,108,108,triangle-right-open,208,208,triangle-right-dot,308,308,triangle-right-open-dot,9,9,triangle-ne,109,109,triangle-ne-open,209,209,triangle-ne-dot,309,309,triangle-ne-open-dot,10,10,triangle-se,110,110,triangle-se-open,210,210,triangle-se-dot,310,310,triangle-se-open-dot,11,11,triangle-sw,111,111,triangle-sw-open,211,211,triangle-sw-dot,311,311,triangle-sw-open-dot,12,12,triangle-nw,112,112,triangle-nw-open,212,212,triangle-nw-dot,312,312,triangle-nw-open-dot,13,13,pentagon,113,113,pentagon-open,213,213,pentagon-dot,313,313,pentagon-open-dot,14,14,hexagon,114,114,hexagon-open,214,214,hexagon-dot,314,314,hexagon-open-dot,15,15,hexagon2,115,115,hexagon2-open,215,215,hexagon2-dot,315,315,hexagon2-open-dot,16,16,octagon,116,116,octagon-open,216,216,octagon-dot,316,316,octagon-open-dot,17,17,star,117,117,star-open,217,217,star-dot,317,317,star-open-dot,18,18,hexagram,118,118,hexagram-open,218,218,hexagram-dot,318,318,hexagram-open-dot,19,19,star-triangle-up,119,119,star-triangle-up-open,219,219,star-triangle-up-dot,319,319,star-triangle-up-open-dot,20,20,star-triangle-down,120,120,star-triangle-down-open,220,220,star-triangle-down-dot,320,320,star-triangle-down-open-dot,21,21,star-square,121,121,star-square-open,221,221,star-square-dot,321,321,star-square-open-dot,22,22,star-diamond,122,122,star-diamond-open,222,222,star-diamond-dot,322,322,star-diamond-open-dot,23,23,diamond-tall,123,123,diamond-tall-open,223,223,diamond-tall-dot,323,323,diamond-tall-open-dot,24,24,diamond-wide,124,124,diamond-wide-open,224,224,diamond-wide-dot,324,324,diamond-wide-open-dot,25,25,hourglass,125,125,hourglass-open,26,26,bowtie,126,126,bowtie-open,27,27,circle-cross,127,127,circle-cross-open,28,28,circle-x,128,128,circle-x-open,29,29,square-cross,129,129,square-cross-open,30,30,square-x,130,130,square-x-open,31,31,diamond-cross,131,131,diamond-cross-open,32,32,diamond-x,132,132,diamond-x-open,33,33,cross-thin,133,133,cross-thin-open,34,34,x-thin,134,134,x-thin-open,35,35,asterisk,135,135,asterisk-open,36,36,hash,136,136,hash-open,236,236,hash-dot,336,336,hash-open-dot,37,37,y-up,137,137,y-up-open,38,38,y-down,138,138,y-down-open,39,39,y-left,139,139,y-left-open,40,40,y-right,140,140,y-right-open,41,41,line-ew,141,141,line-ew-open,42,42,line-ns,142,142,line-ns-open,43,43,line-ne,143,143,line-ne-open,44,44,line-nw,144,144,line-nw-open,45,45,arrow-up,145,145,arrow-up-open,46,46,arrow-down,146,146,arrow-down-open,47,47,arrow-left,147,147,arrow-left-open,48,48,arrow-right,148,148,arrow-right-open,49,49,arrow-bar-up,149,149,arrow-bar-up-open,50,50,arrow-bar-down,150,150,arrow-bar-down-open,51,51,arrow-bar-left,151,151,arrow-bar-left-open,52,52,arrow-bar-right,152,152,arrow-bar-right-open,53,53,arrow,153,153,arrow-open,54,54,arrow-wide,154,154,arrow-wide-open
Documentation: Sets the marker symbol type. Adding 100 is equivalent to appending -open to a symbol name. Adding 200 is equivalent to appending -dot to a symbol name. Adding 300 is equivalent to appending -open-dot or dot-open to a symbol name.
Path: data.index.marker.symbol
Fill Options
Fill
Type: enumerated
Enum Options: none,tozeroy,tozerox,tonexty,tonextx,toself,tonext
Documentation: Sets the area to fill with a solid color. Defaults to none unless this trace is stacked, then it gets tonexty (tonextx) if orientation
is v (h) Use with fillcolor
if not none. tozerox and tozeroy fill to x=0 and y=0 respectively. tonextx and tonexty fill between the endpoints of this trace and the endpoints of the trace before it, connecting those endpoints with straight lines (to make a stacked area graph); if there is no trace before it, they behave like tozerox and tozeroy. toself connects the endpoints of the trace (or each segment of the trace if it has gaps) into a closed shape. tonext fills the space between two traces if one completely encloses the other (eg consecutive contour lines), and behaves like toself if there is no trace before it. tonext should not be used if one trace does not enclose the other. Traces in a stackgroup
will only fill to (or be filled to) other traces in the same group. With multiple stackgroup
s or some traces stacked and some not, if fill-linked traces are not already consecutive, the later ones will be pushed down in the drawing order.
Path: data.index.fill
Fill Color
Type: color
Documentation: Sets the fill color. Defaults to a half-transparent variant of the line color, marker color, or marker line color, whichever is available.
Path: data.index.fillcolor
Fg Color
Type: color
Accept List: true
Documentation: When there is no colorscale sets the color of foreground pattern fill. Defaults to a marker.color
background when fillmode
is replace. Otherwise, defaults to dark grey or white to increase contrast with the bgcolor
.
Path: data.index.fillpattern.fgcolor
Fg Opacity
Type: number
Min: 0
Max: 1
Documentation: Sets the opacity of the foreground pattern fill. Defaults to a 0.5 when fillmode
is overlay. Otherwise, defaults to 1.
Path: data.index.fillpattern.fgopacity
Fill Mode
Default Value: replace
Type: enumerated
Enum Options: replace,overlay
Documentation: Determines whether marker.color
should be used as a default to bgcolor
or a fgcolor
.
Path: data.index.fillpattern.fillmode
Shape
Default Value:
Type: enumerated
Accept List: true
Enum Options: ,/,,x,-,|,+,.
Documentation: Sets the shape of the pattern fill. By default, no pattern is used for filling the area.
Path: data.index.fillpattern.shape
Size
Default Value: 8
Type: number
Accept List: true
Min: 0
Documentation: Sets the size of unit squares of the pattern fill in pixels, which corresponds to the interval of repetition of the pattern.
Path: data.index.fillpattern.size
Calendar Options
X Calendar
Default Value: gregorian
Type: enumerated
Enum Options: chinese,coptic,discworld,ethiopian,gregorian,hebrew,islamic,jalali,julian,mayan,nanakshahi,nepali,persian,taiwan,thai,ummalqura
Documentation: Sets the calendar system to use with x
date data.
Path: data.index.xcalendar
X Period
Default Value: 0
Type: any
Documentation: Only relevant when the axis type
is date. Sets the period positioning in milliseconds or M on the x axis. Special values in the form of M could be used to declare the number of months. In this case n
must be a positive integer.
Path: data.index.xperiod
X Period Alignment
Default Value: middle
Type: enumerated
Enum Options: start,middle,end
Documentation: Only relevant when the axis type
is date. Sets the alignment of data points on the x axis.
Path: data.index.xperiodalignment
Text Formatting
Text Angle
Default Value: auto
Type: angle
Documentation: Sets the angle of the tick labels with respect to the bar. For example, a tickangle
of -90 draws the tick labels vertically. With auto the texts may automatically be rotated to fit with the maximum size in bars.
Path: data.index.textangle
Text Position
Default Value: auto
Type: enumerated
Accept List: true
Enum Options: inside,outside,auto,none
Documentation: Specifies the location of the text
. inside positions text
inside, next to the bar end (rotated and scaled if needed). outside positions text
outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside. auto tries to position text
inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside. If none, no text appears.
Path: data.index.textposition
Text Template
Default Value:
Type: string
Accept List: true
Documentation: Template string used for rendering the information text that appear on points. Note that this will override textinfo
. Variables are inserted using %{variable}, for example "y: %{y}". Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". 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: %{2019-01-01|%A}". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. Every attributes that can be specified per-point (the ones that are arrayOk: true
) are available. Finally, the template string has access to variables value
and label
.
Path: data.index.texttemplate
Inside Text Anchor
Default Value: end
Type: enumerated
Enum Options: end,middle,start
Documentation: Determines if texts are kept at center or start/end points in textposition
inside mode.
Path: data.index.insidetextanchor
Hover Formatting
Hover Info
Default Value: all
Type: flaglist
Accept List: true
Flag Options: x,y,z,text,name
Flag Single: all,none,skip
Documentation: Determines which trace information appear on hover. If none
or skip
are set, no information is displayed upon hovering. But, if none
is set, click and hover events are still fired.
Path: data.index.hoverinfo
Hover Template
Default Value:
Type: string
Accept List: true
Documentation: Template string used for rendering the information that appear on hover box. Note that this will override hoverinfo
. Variables are inserted using %{variable}, for example "y: %{y}" as well as %{xother}, {%xother}, {%xother}, {%xother}. When showing info for several points, xother will be added to those with different x positions from the first point. An underscore before or after (x|y)other will add a space on that side, only when this field is shown. Numbers are formatted using d3-format's syntax %{variable:d3-format}, for example "Price: %{y:$.2f}". 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: %{2019-01-01|%A}". https://github.com/d3/d3-time-format/tree/v2.2.3#locale_format for details on the date formatting syntax. The variables available in hovertemplate
are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data. Additionally, every attributes that can be specified per-point (the ones that are arrayOk: true
) are available. Finally, the template string has access to variables value
and label
. Anything contained in tag <extra>
is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag <extra></extra>
.
Path: data.index.hovertemplate
Last updated