Skip to main content

Styling - General

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

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 chart, including background color, text features, and automatic colorscales for multiple traces. Customize the background color of both the chart and margin by clicking the color circle. You can either fill in a color hex code or play with the interactive color picker.

Chart Background

Choose the background color of your chart using the color picker. The default color is set to white.

Margin Color

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

Colorscales

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

  • Categorical color scales are designed to visually distinguish datasets from one another. Use this color scale when your data set is divided into groups.
  • Sequential color scales are gradients from light to dark (or dark to light in negative sequential colorscales) and can be applied to consecutive data.
  • Diverging color scales encompass two gradients of colors that meet in the center. This color scale 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 chart such as chart 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 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.

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

Horizontal Position

The title can be positioned horizontally relative to the chart 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 Chart 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 chart.
  • Show the closest data on hover
  • Compare data on hover
  • Produced with Plotly
  • Zoom in lets you zoom in on your chart. Click Autoscale, Reset axes or double click to return to original size.
  • Zoom out lets you zoom out on your chart. Click Autoscale, Reset axes or double click to return to original size.
  • Autoscale sets your chart to an optimal scale.
  • Reset axes sets the axes on your chart 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 chart.

Canvas is the entire working area of the chart, including the chart 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 chart container (e.g. HTML element of a web page). In custom mode, you can manually enter the width and height of the chart in pixels (px). Note that chart elements such as annotations or legends cannot be positioned beyond the canvas.
  • Margins. The top, bottom, left and right margins of the chart determine the distance of the chart axes from the respective canvas edges. in effect, margins, together with canvas size, determine the size of the actual chart together. Larger margins are useful when chart elements need to be positioned outside of the chart area.

Interactions

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

Drag

You can choose different modes for dragging that have different actions on your chart: 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 and 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 chart. 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 chart. Applies only to scatter traces with markers or text.
  • Pan lets you drag the chart when clicking.
  • Lasso lets you select data points using the lasso tool. Applies only to 3D scenes.
  • Orbit lets you orbit around your 3D chart 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 chart will be signaled to the web browser.
  • Select data point. Determines whether a click within a chart area will select a nearby data point.

Hover

This section controls the behavior of charts when a mouse pointer is hovered over chart elements.

Mode

The hovering mode will choose which box of information is 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:

  • The Auto will automatically align your text. It will either align the text left or right based on the optimal position for your chart.
  • The Left will right-align the text
  • The 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 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

Set a font size 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 chart element (e.g. chart 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]}.