Skip to main content

Styling - Axes

Axes, both vertical (Y-ax) and horizontal (X-ax) are required for every plot and can be added and styled as described below. 'Axes' includes sections that relate to the axes titles, range, lines, tick markers, and tick labels. In addition, you can add a range slider and spike lines (guidelines) to help the reader identify your data points more specifically.

Titles#

In this section, you can add titles to your x- and y-axes. You can change the font, font color, and font size per axis title, or click ‘All’ to change it collectively. When no title is entered, in light grey 'Click to enter X/Y-axis title' is displayed in your canvas. Click on this text to add an axis title. When you have already entered a title, you can also edit this text by clicking it directly in your canvas

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

Range#

Here you can change the range of both axes and enable zoom interactivity, which allows the user to zoom in on a specific part of your plot. The range of an axis is determined by the beginning (lowest value) and the end(highest value) of the data. You can change the range of the axes in this sub-tap individually by clicking ‘X’ or ‘Y’, or collectively by clicking ‘All’

Range#

Type#

First, choose the axes type. The data can be presented:

  • Linearly.

  • Log scale

  • Date

  • Categorical

  • Multicategorical

Range#

By default, Figlinq decides a range that presents your data at best, using the minimum and maximum values. However, you can change this range by clicking ‘Custom’ and set a min and max value

Zoom interactivity#

Zoom interactivity lets the user drag its mouse across the plot and zooming in on that part of the chart. The ability to zoom in by the user can be enabled and disabled for both axes independently.

Lines#

There are multiple lines with different purposes to add to your plot. The most important being the axes lines for a readable plot. In addition, you can add gridlines and a zero line to help users interpret data points more precisely

Axis Line#

The line of an axis shows the border of the plot and can show the range together with axis ticks and labels.

First, choose if you want to ‘Show’ or ‘Hide’ the axis line. When you choose to show them you can alter the thickness and color of the line. In addition, for the x-axis, you can choose to position it ‘Top’ or ‘Bottom’, and for the y-axis ‘Left’ or ‘Right’. If you want both positions, choose to mirror the axes

Grid Line#

Gridlines are lines across the plot and an extension of the axis labels. It helps the user to define values of data points that have no label. When you enable ‘Hover’, it will show you the coordinates without the need for grid lines.

Gridlines are lines drawn across the plot, and an extension of the axis labels. They help the viewer to define values of data points that have no label.

Horizontal ‘X’ and vertical ‘Y’ lines can be inserted into your plot by enabling the grid lines. Their thickness and color can be adjusted. The grid lines can be aligned with the labels (recommended) or boundaries of the labels. By default, the grid spacing is determined automatically, and adjusted by providing the number of lines. It can also be set manually by providing the step offset and step size

If you don’t want gridlines in your plot, but still want the viewer to properly interpret your data points' exact values in online plots, you can consider spike lines or enable hover. Spike lines are guidelines that appear when you hover over the plot and can thus replace grid lines. When you enable ‘Hover’, the plot will show information (x and y coordinates) about the closest data point when you hover over the plot.

Zero Line#

A zero line is a line that at 0 can be convenient when you have negative data. This line can be added for both the x-axis and the y-axis. When clicking ‘Show’ you can also alter the thickness and color of the line.

Tick Labels#

Tick labels are text frames that correspond to the tick markers tick markers and can be category names or specific numeric values The tick labels can be altered for x-ax ‘X’ and y-ax ‘Y’ independently or collectively ‘All’

When you choose to ‘Show’ the tick markers, you can choose to position it ‘Top’ or ‘Bottom’, and for y-axes ‘Left’ or ‘Right’ The margins of the ticks will be automatically determined by clicking ‘True’ at Auto Margins. This way the ticks will not interfere with axes titles. The font, size, color of the ticks can be changed manually. Sometimes, it is recommended to angle your ticks for readability, the ticks can be angled 45, 90, 135, and 180 degrees

Tick Markers#

The tick markers are short lines between the axes and the tick labels. Equally to the tick labels, the markers can be altered for each ax independently or collectively. You can position the markers facing the inwards of the plot or facing outwards, or choose to not show them at all. When you do choose to show the markers, you can also choose the position for x-ax, top or bottom, and for y-ax, left or right. The tick marker length, width, and color can be adjusted. The tick spacing can be customized with your offset preference. To limit the number of ticks (including labels and markers), you can set a maximum number of markers.

Range Sliders#

In the case of a plot with a lot of data points, a range slider can be useful for the user. The user can slide through a zoomed part of the chart, while still having an overview of the chart as a whole. When you choose to show the range slider, you can alter the height (size), background color, border width, and border color.

Spike Lines#

Spike lanes are guidelines that appear when you hover over the plot, these lines start from the point of your mouse and end at the chosen axes. In addition, it shows the exact coordinate. You can choose to show these spike lines for only the x-ax or y-ax, or show them both. You can alter the thickness of the lines.

If you want the lines to be static and alternative could be to add grid lines.

Incomplete documentation!

This part of the website is under construction. Until we're ready, for a more complete documentation of this feature please visit Plotly's help pages!