Styling - Axes
Axes, both vertical (Y-ax) and horizontal (X-ax) are required for every chartand 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 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 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 chart. 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 setting a min and max value
Zoom interactivity
Zoom interactivity lets the user drag its mouse across the chart 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 chart. The most important being the axes lines for a readable chart. 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 chart 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 chart 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 chart, 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 chart 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 chart, but still want the viewer to properly interpret your data points' exact values in online charts, you can consider spike lines or enable hover. Spike lines are guidelines that appear when you hover over the chart and can thus replace grid lines. When you enable ‘Hover’, the chart will show information (x and y coordinates) about the closest data point when you hover over the chart.
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 chart 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 chart 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 chart, 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.
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!