# 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
X **Type**: any **Accept List**: true **Documentation**: Sets the x coordinates. **Path**: data.index.x
Y **Type**: any **Accept List**: true **Documentation**: Sets the y coordinates. **Path**: data.index.y
*** ### Lines Styling
Color **Type**: color **Documentation**: Sets the line color. **Path**: data.index.line.color
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
Color **Type**: color **Accept List**: true **Path**: data.index.textfont.color
Size **Type**: number **Accept List**: true **Min**: 1 **Path**: data.index.textfont.size
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}". 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}". 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}". 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}". for details on the date formatting syntax. The variables available in `hovertemplate` are the ones emitted as event data described at this link . 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 `` is displayed in the secondary box, for example "{fullData.name}". To hide the secondary box completely, use an empty tag ``. **Path**: data.index.hovertemplate