Trace Styling
The Style menu displays various applicable options to style a chosen trace type. Not all options are visible for every trace type, like the Axes and Legend being absent for Table-style traces. Below, per trace type styling features are explained. The ubiquitous Color style element has its own entry in this list.
Scatter
The scatter trace type encompasses line charts, scatter charts, text charts, and bubble charts. The data visualized as scatter point or lines is taken from the data grid. Text (appearing either on the chart or on hover only) is set via the Text field. Bubble charts are achieved by setting the Point s size to Variable and use data from a grid column as bubble size .
Name
Sets the trace name. The trace name appears as the legend item and on hover.
In the Name text box, the name can be entered and formatted. This is automatically reflected in the Structure > Traces[link] section and in the legend[link] of the chart. The trace name can be also edited directly by double-clicking the trace name in the chart legend.
HTML tags and CSS formatting can be used to enrich text styling.
The trace name appears in the Traces column, as the legend item and on hover.
Legend
Only available when two or more traces are present.
The legend is a box in the chart that shows the name and appearance of the trace. Although Legend[link] has its own Style entry, in the Traces > Individual tab, legend can be hidden or shown.
Sometimes (a bug we're working on[link]) the legend pane may disappear from the Style > Traces menu; it can be reactivated through the Styles > Legend[link] menu.
Show In Legend
Only available whenStyle > Legend button is enabled.
- Show Displays the trace name in the legend; reveals Legend Group popup.
- Hide Removes the name of the trace from the legend.
Legend Group
Only available when option Show in Show In Legend above is selected.
Sets the legend group for this trace. Traces that are part of the same legend group hide/show at the same time when toggling legend items.
Width
Sets the width of the box in data coordinates. If "0" (default value) the width is automatically selected based on the positions of other traces in the same subchart. Chosing 1 puts each box into a separate column, using 2 makes boxes overlap.
Display
- Point[link] determines whether to show or hide trace points.
- Lines[link] determines whether to show or hide trace lines.
- Text[link] determines whether to show or hide trace text.
The three tick boxes enable or disable extra settings. Depending on the trace type, Points[link], Lines[link] and Text[link] can be styled. For styling each of these elements, see the documentation below.
If the ticked boxes in Display include "text" then the Text elements appear near the data points in the chart. 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".
Points
Only available when in Display[link] Points is ticked.
Color
- Constant The color of points in a trace can be set as a constant using the color picker[link].
- Variable Allows colors for each point to be defined in a grid column[link].
- Choose data... Pick a grid column holding the color values with the syntax explained in the standard color picker.
Choose data... option is only available when Variable is chosen first.
Data from a grid column can also be used to specify a color for many chart elements. When color values (syntax as described in Constant) are provided in the grid cells, they will be used to style the elements. When the data in the grid is numerical, categorical color bars will be used.
Colorscale Direction
Only available when Color is set to Variable.
- Normal shows increasing values in the chart according to increasing colorscale values.
- Reversed shows increasing values in the chart according to decreasing colorscale values.
Colorscale Range
Only available when Color is set to Variable.
- Auto lets the system map colors to the entire range in the chosen grid area.
- Custom maps the colorscale between the given min and max, projecting higher values on max and lower values on min.
Min
Only available when Colorscale Range is set to Custom.
Determines which number is connected to the lower end of the colorscale.
Max
Only available when Colorscale Range is set to Custom.
Determines which number is connected to the upper end of the colorscale.
Point Opacity
- % influences the opacity (transparency) of the chosen color and is combined with the Alpha value of the color[link].
Size
- Constant The Constant size is entered in pixel units. Either use the up and down arrows, which uses one-pixel increments, or type into the size text box to enter fractional sizes.
- Variable Clicking Variable size opens new set of options, which only become visible after a grid column is chosen. Click Variable, then choose a numerical grid column from the pulldown menu.
This reveals Size Scale[link], Size Mode[link] and Minimum Size[link].
Size Scale
Only available when picking a Data column at Points > Size > Variable[link].
- factor Sets the scale factor used to determine the rendered size of marker points. Only available when a grid column has been selected in Variable mode. To scale the point size in the grid column for the entire trace click the up and down arrows, which use one-pixel increments, or type into the size scale text box to enter fractional size scale.
Size Mode
Only available when picking a Data column at Points > Size > Variable[link].
- Area Points represent numerical values by area, a root scale.
- Diameter Points represent numerical values by diameter.
Minimum Size
Only available when picking a Data column at Points > Size > Variable[link].
Only available when a grid column has been selected in Variable mode, to prevent points that represent small numbers from becoming invisible. Enter a minimum size in the text area of this field, or use the up- and down buttons for one-pixel increments.
Symbol
Use this option to select the shape or symbol representing each data point.
Border Width
Sets the width of point borders.
Border Color
Sets the color of point borders.
Max Number Of Points
To prevent traces from becoming overcrowded, the maximum number of visible points for this trace can be set using this option.
Stacking
Set several scatter traces (on the same subchart) to the same Stack Group in order to add up their y values (or their x values if orientation is Horizontal). If blank or omitted, this trace will not be stacked. Stacking also turns fill on by default, and sets the default mode to lines, irrespective of point count. You can only stack on a numeric (linear or log) axis. Traces in a stackgroup will only fill to (or be filled to) other traces in the same group. With multiple Stack Groups (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.
Group
- None All traces are charted individually.
- 'Other choice' Set several scatter traces (on the same subchart) to the same Stack Group in order to add their y values (or their x values if orientation is Horizontal). If blank or omitted, this trace will not be stacked. Stacking also turns fill on by default and sets the default mode to lines, irrespective of point count. You can only stack on a numeric (linear or log) axis. Traces in a stackgroup will only fill to (or be filled to) other traces in the same group. With multiple Stack Groups (or with 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.
Gaps
Only available when an option different from None is chosen under Group .
Determines whether or not missing data (i.e. 'nan' or missing values) in the provided grid columns are included.
- Infer Zero will simulate a zero value here.
- Interpolate will linearly interpolate between existing values and extrapolate a constant beyond the existing values.
Orientation
Only relevant when Stack Group is used, and only the first orientation found in the Stack Group will be used. Sets the stacking direction.
- Horizontal The x values of subsequent traces are added. Also affects the default value of Filled Area.
- Vertical The y values of subsequent traces are added. Also affects the default value of Filled Area.
Normalization
Sets the normalization for the sum of this Stack Group.
- None Raw values will be charted.
- Fraction The value of each trace at each location is divided by the sum of all trace values at that location.
- Percent is the same as Fraction, but multiplied by 100 to show percentages.
Lines
Width
The width of the line connecting the trace data points can be specified using the up- and down arrows for one-pixel increments, or enter the width directly in the text box, which allows fractional pixel values. Values smaller than 0.1 points are effectively invisible on pixel-based devices.
Color
The line color can be set using this popup menu.
Type
Continuous, dashed or dotted line types can be set using this popup menu.
Shape
Various shapes of the lines connecting the data points can be selected here.
Connect Gaps
- Connect connects the two data points on either side of a data gap caused by missing or NaN (not a number) data.
- Blank Missing values will break the line and appear as a gap.
Filled Area
Sets the fill color of the trace area. Defaults to 'none', unless this trace is stacked.
Fill To
Traces in a Stack Group will only fill to (or be filled to) other traces in the same group. With multiple Stack Groups (or some traces stacked and some not), the later ones will be pushed down in the drawing order.
- None Only the lines are shown.
- Y = 0 The trace area is filled to the x-axis in a Horizontal stacking trace and Y=0 is chosen.
- X = 0 The trace area is filled to the y-axis in a Vertical stacking trace and X=0 is chosen.
- Previous Y The trace area is filled 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 chart).
- Previous X fills 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 chart). If there is no trace before it, they behave like Y=0 and X=0.
Color
Only available if Fill To is not set to None.
The color of the filled area can be set aysing the default color picker[link].
Text
Only available when in [Display][link] Text is ticked.
Sets text elements associated with each (x,y) pair. If trace hoverinfo option "text" is ticked and Text > Text is not set, these elements will be seen in the hover labels.
Text Position
Sets the positions of the Text elements with respects to the (x,y) coordinates. Options are pairs chosen from [Top, Middle, Bottom] and [Left, Center, Right].
-
All makes the string appear at the same relative position for all data points
-
Custom uses items from the selected grid column for placing the text relative to this trace's (x,y) coordinates.
Mode
Either show information as plain values, or uses formatting options from a template.
-
Values uses text strings from grid cells in the column chosen at Text below.
-
- Template shows an edit panel for the template string used for rendering the information text. 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}". Dates and times are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".
Text
The grid column[link], holding the text to be shown for each item on hover, can be chosen here. Only data-containing columns can be selected.
Typeface
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 in which it operates. Plotly has a set of standard fonts available on all platforms, containing Arial, Balto, Courier New, Droid Sans, Droid Serif, Droid Sans Mono, Gravitas One, Old Standard TT, Open Sans, Overpass, PT Sans Narrow, Raleway and Times New Roman.
Font Size
Size of the typeface in pixels.
Font Color
The color of the text in the trace can be chosen using the default Color picker[link]
Clip On Axes
Determines whether or not markers and text nodes are clipped about the subchart axes
-
Yes clips markers
-
No lets markers flow over axes
Hover/Tooltip
Extra information is shown when the viewer hovers the mouse over trace components. This information is taken from the Text[link] field above.
When the mouse cursor is hovered over various trace components, extra information can be shown as tooltip as defined in the fields below.
Hover On
Do the hover effects highlight individual points (markers or line points) or do they highlight filled regions, or both?
Mode
- Values will display the values (as plain text) from data grid, as defined in Text settings above.
- Template shows an edit panel for the template string used for rendering the information text. 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}". Dates and times are formatted using d3-time-format's syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".
Show
When under Text >Text[link] a grid area is chosen, Text appears as an extra option in the Show menu to be displayed when hovering over the chart. When hovering over a trace, each of the values from the grid are shown for X, Y, a text column and the name[link] of the trace if their box is ticked.
Text Alignment
Sets the horizontal alignment of the text content within the hover label box. Has an effect only if the hover label text spans two or more lines. Alignment of Hover/Tooltip can be set to Auto, Left or Right.
Error Bars X
Determines the rule used to generate the error bars in X-direction
- None will not draw any error bars.
- Symmetric will draw an error bar centered around the data points.
- Asymmetric will draw separarate bars for +error and -error taken from two data grid columns.
Error Type
Appears when Symmetric or Asymmetric are chosen.
- % the bar lengths correspond to a percentage of underlying data. Set this percentage in the Value field.
- Constant will use a bar length of constant value. Set this constant in Value field.
- √ will use the square root of the underlying data for bar length; only available with Symmetric error bars.
- Data uses grid column values for the length of the error bars. One grid column is sufficient for Symmetric error bars, two grid columns are necessary for Asymmetric error bars.
Color
Appears on any error bar option except for None.
Determines the color of the error bar.
Thickness
Appears on any error bar option except for None.
Sets the thickness (in pixels) of the error bars.Crossbar Width
Appears on any error bar option except for None.
Sets the width (in px) of the cross-bar at both ends of the error bar.Error Bars Y
Determines the rule used to generate the error bars in Y-direction
- None will not draw any error bars.
- Symmetric will draw an error bar centered around the data points.
- Asymmetric will draw separarate bars for +error and -error taken from two data grid columns.
Error Type
Appears when Symmetric or Asymmetric are chosen.
- % the bar lengths correspond to a percentage of underlying data. Set this percentage in the Value field.
- Constant will use a bar length of constant value. Set this constant in Value field.
- √ will use the square root of the underlying data for bar length; only available with Symmetric error bars.
- Data uses grid column values for the length of the error bars. One grid column is sufficient for Symmetric error bars, two grid columns are necessary for Asymmetric error bars.
Color
Appears on any error bar option except for None.
Determines the color of the error bar.
Thickness
Appears on any error bar option except for None.
Sets the thickness (in pixels) of the error bars.Crossbar Width
Appears on any error bar option except for None.
Sets the width (in px) of the cross-bar at both ends of the error bar.Bar
A bar chart[link] contains an x-axis that represents categories or given values, and a y-axis which represent the measured value. Three types of bar charts can be distinguished. The simplest version has only one grid column[link], the second form uses exactly two grid columns[link], the third form uses more than two grid columns[link].
- Single grid column
By definition, the bar chart will be categorical. When no x-values are given, the y-values will get a sequentially enumerated category (0, 1, 2, 3..) and the y-values will be charted parallel to the Y-axis. Conversely, when only an x-value is given, the values will be charted parallel to the x-axis and the y values will be enumerated. - Two grid columns
The next level is two grid columns. When from the grid one column is chosen for x-values and one column is used for y-values, it depends on the cell contents in the y-axis if text categories or numerical categories will be used. In the latter case, the numbers in the grid cells dictate the spacing across the x-axis. - More than three grid columns
Combining one axis with given values and more than one measured values opens the option for grouping bars of the measured values. When two or more measured values are placed on an axis, the Bar Mode option Grouped places the bars of the data sets adjacent, while Stacked uses one value as an extension of the other value in one three different ways.
Name
Sets the trace name. The trace name appears as the legend item and on hover.
In the Name text box, the name can be entered and formatted. This is automatically reflected in the Structure > Traces[link] section and in the legend[link] of the chart. The trace name can be also edited directly by double-clicking the trace name in the chart legend.
HTML tags and CSS formatting can be used to enrich text styling.
Trace Opacity
Sets the opacity (transparency) of the trace.
Legend
Only available when multiple traces ares present ánd grid columns have been chosen for both bar traces.
Only available when two or more traces are present.
The legend is a box in the chart that shows the name and appearance of the trace. Although Legend[link] has its own Style entry, in the Traces > Individual tab, legend can be hidden or shown.
Sometimes (a bug we're working on[link]) the legend pane may disappear from the Style > Traces menu; it can be reactivated through the Styles > Legend[link] menu.
Show In Legend
Only available whenStyle > Legend button is enabled.
- Show Displays the trace name in the legend; reveals Legend Group popup.
- Hide Removes the name of the trace from the legend.
Legend Group
Only available when option Show in Show In Legend above is selected.
Sets the legend group for this trace. Traces that are part of the same legend group hide/show at the same time when toggling legend items.
Width
Sets the width of the box in data coordinates. If "0" (default value) the width is automatically selected based on the positions of other traces in the same subchart. Chosing 1 puts each box into a separate column, using 2 makes boxes overlap.
Bar Grouping, Sizing And Spacing
Only available when more than 1 bar trace has been created.
Bar Mode
Only available when a data set for a bar trace has been selected in Structure > Traces.
- Grouped Places bars adjacent; width and gap between bars are set in any trace but setting width (bug[link]) or padding (bug[link]) sets these parameters for all traces.
- Positive/Negative Stacked When both negative and positive values are in the selected grid column(s), the bars are charted atop one another, such that negative values are charted below the 0-axis; the bars 'start at the axis'.
- Strict Sum Stacked Bars are placed head-to-toe, with negative values pulling subsequent bars down; two adjacent bar values of e.g. -2 and +3 result in the latter bar extending from -2 to +1, entirely covering the former bar. The bars 'start at the end of the previous bar'.
- Overlaid Places the bars on top of one another, the first trace in the Trace column being behind all others, the latter traces in the Trace column being placed in front of the previous one (possibly obscuring it).