Skip to main content

Styling - General

When you have added your data and chosen the right trace type, it is time to style your plot.

In this section, we will explain the general styling features which you can apply to all traces. Most elements of each chart (e.g. background, axes, title, etc.) and trace (e.g. line color, point size, etc.) can be independently styled. Different trace types share most of the style parameters, but some traces have additional unique styling options.

Defaults#

In the default section, you can alter the universal appearance of the plot, including background color, text features, and automatic colorscales for multiple traces. Customize the background color of both the plot and margin by clicking the color circle. You can either fill in a color hex code or play with the interactive color picker.

Plot Background#

Choose the background color of your plot using the colorpicker. The default color is set to white.

Margin Color#

Choose the margin color of your plot using the colorpicker. The margin background is everything surrounding the plot itself. The default color is set to white.

Colorscales#

Use (different) colors to represent continues and/or categorical data.

  • Categorical colorscales are designed to visually distinguish datasets from one another. Use this colorscale when your data set is divided into groups.
  • Sequential colorscales are gradients from light to dark (or dark to light in negative sequential colorscales) and can be applied to consecutive data.
  • Diverging colorscales encompass two gradients of colors that meet in the center. This colorscale can be used when your data set has two extremes with a baseline in the middle.

When clicking on the colors of a colorscale, for example Categorical, a menu drops down with multiple color variations you can choose from.

Text#

The text section controls all text of your plot such as plot title, axes, and legend labels.

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 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.

Base 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]

Number Format#

In the number format you can choose how to display decimal numbers in your plot. Commas and points can be used with large numbers to assist the reader.

  • 1,234.56 A comma is shown for every 3 decimal places. The decimal point is shown with a period. This way of presenting your data is common in countries such as US, UK, and China.
  • 1 234.56 A space is shown for every 3 decimal places. The decimal point is shown with a period.
  • 1 234,56 A space is shown for every 3 decimal places. The decimal point is shown with a comma.
  • 1.234,56 A point is shown for every 3 decimal places. The decimal point is shown with a comma. This way of presenting your data is common in most of Europe.

Uniform Text Mode#

Text can be made uniform by turning on uniform text mode. Click 'Show' in the drop down menu to activate this option. A new setting will pop up where you can set the minimum size for all text.

Title#

Enter your title in either Rich Text or Latex mode.

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 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 the title text can be chosen using the default Color picker[link]

Horizontal Position#

The title can be positioned horizontally relative to the plot area: align it to the left (0), position it in the middle (0.5), or right-align (1).

Modebar#

Modebar

Modebar is a set of tools that is automatically added along the top or right edge of each FiglinQ chart to allow viewers interaction with that chart.

Modebar is often hidden, only appearing when you hover over the chart area in the right place.

When you hover your mouse over the top right corner of the chart, athe modebar will appear harbouring several options, from left to right:

  • Download Plot as PNG
  • Zoom
  • Pan
  • Box Select
  • Lasso Select
  • Zoom In
  • Zoom Out
  • Autoscale
  • Reset Axes
  • Toggle Spike Lines displays x-axis and y-axis lines when you hover over your plot.
  • Show closest data on hover
  • Compare data on hover
  • Produced with Plotly
  • Zoom in lets you zoom in on your plot. Click Autoscale, Reset axes or double click to return to original size.
  • Zoom out lets you zoom out on your plot. Click Autoscale, Reset axes or double click to return to original size.
  • Autoscale sets your plot to an optimal scale.
  • Reset axes sets the axes on your plot to the original state.
  • Plotly logo mark will direct you to the plotly website.

Orientation#

The orientation of the modebar can be set either horizontal or vertical.

Icon Color#

The color of the icons can be set at Icon Color using the default Color picker[link].

Active Icon Color#

When activating (clicking) or hovering over the icons, the selected icon will display a different color. This color can be chosen using the default Color picker[link].

Background Color#

The modebar background color can be set using the default Color picker[link].

Size and Margins#

Here you can set the canvas size, margins and padding for your plot.

Canvas is the entire working area of the plot, including the plot itself and margins around it.

As FiglinQ is predominantly focusing on electronic media, all dimensions are given in pixels (px), rather than millimeters or inches. As a consequence, if you wish to print a chart or figure on a sheet of paper, the printed dimension will depend on the size (in pixels) and resolution of the document.

  • Canvas size. In auto mode, canvas size is determined by the size of the plot container (e.g. HTML element of a web page). In custom mode, you can manually enter the width and height of the plot in pixels (px). Note that plot elements such as annotations or legends cannot be positioned beyond the canvas.
  • Margins. The top, bottom, left and right margins of the plot determine the distance of the plot exes from the respective canvas edges. in effect, margins, together with canvas size, determine the size of the actual plot together. Larger margins are useful when plot elements need to be positioned outside of the plot area.

Interactions#

You can control plot interactions for multiple mouse actions: dragging, clicking, and hovering.

Drag#

You can choose different modes for dragging that have different actions on your plot: zoom, select, pan, lasso (for selecting multiple data points), orbit and, turntable. To drag, press and hold the left mouse button and move the mouse while still holding the button down.

Mode#

Determines the mode of drag interactions. Select abd Lasso apply only to scatter traces with markers or text. Orbit and Turntable apply only to 3D scenes. Double click to undo your interaction.

  • Zoom lets you zoom in on a region you selected by dragging your mouse of the plot. Select 'Autoscale' in the modebar to go back to the original scale or double click to zoom-out completely.
  • Select lets you select data points of a rectangle region you selected by dragging your mouse over the plot. Applies only to scatter traces with markers or text.
  • Pan lets you drag the plot when clicking.
  • Lasso lets you select data points using the lasso tool. Applies only to 3D scenes.
  • Orbit lets you orbit around your 3D plot when clicking. Applies only to 3D scenes.
  • Turntable Applies only to scatter traces with markers or text.

Click#

Determines the mode of single click interactions.

Mode#

  • Click event. This option is for advanced use and determines whether a mouse click event within the plot will be signalled to the web browser.
  • Select data point. Determines whether a click within a plot area will select a nearby data point.

Hover#

This section controls the behavior of plots when a mouse pointer is hovered over plot elements.

Mode#

The hovering mode will choose which box of information in shown when the user hovers over data points:

  • Closest will only show information of the x-y coordinates of the closest data point.
  • X-axis will show information of the x-y coordinates of the closest data point, show a marker for this data point on the x-axis and additional x-axis information, which is trace-specific.
  • Y-axis will show information of the x-y coordinates of the closest data point, show a marker for this data point on the y-axis and additional y-axis information, which is trace-specific.
  • Disabled will disable the hover functionality.

Text Alignment#

The shown text while hovering over data points, as described in Hover can be aligned:

  • Auto will automatically align your text. It wil either align the text left or right based on the optimal position for your plot.
  • Left will right-align the text
  • Right will left-align the text

Background color#

Determines the background color of the textbox when hovering over data points. This color is computed from other parts of the figure but you can override it. By clicking the 'override it' link, a color picker will appear.

Border color#

Determines the border color of the textbox when hovering over data points. This color is computed from other parts of the figure but you can override it. By clicking the 'override it' link, a color picker will appear.

Typeface#

Set a typeface of the textbox appearing when hovering over a data point.

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 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#

Set a fontsize of the textbox appearing when hovering over a data point.

Size of the typeface in pixels.

Font Color#

Set a font color of the textbox appearing when hovering over a data point using the default color picker [link].

Meta text#

This functionality allows you to select a column of data in the data grid that can be referred to in text field of any other plot element (e.g. plot or axis title).

For example, if you select a column of data containing the following three elements: "Apple", "Banana", "Orange", you can produce the text "Banana" in any text field by typing %{meta[2]}.