Show Sidebar Hide Sidebar

How to Make Multiple X-Axes Plots in Plotly 2.0

Create a plot with multiple x-axes using the Plotly 2.0 data visualization tool

Step 1

Introduction

This second horizontal axis will be set on top on your graph, making it a cool feature to use when you have mixed types of data or varying ranges.

Step 2

Add Your Data to Plotly

The first step is to head to Plotly’s new online workspace and add your data. It's also a good idea to name your columns beforehand (either by adding your data using Plotly 1.0, or naming them in the CSV or Excel file that you're uploading), and label your axes. This will make selecting specific traces easier.

Import data

Step 3

Create a Plot

After adding your data, go to GRAPH on the left-hand side, then 'Create'. Choose your 'Chart type', and add your traces using the X and Y dropdown (this section is different depending on the chart type. We'll use the scatter plot for this tutorial.

Subplot Trace

Step 4

Select a Subplot

The next trace is where we'll introduce the multiple x-axes feature. We'll click the blue '+Trace' button on the right-hand side of the panel to add the second trace, select our x and y values, then click on 'Subplot and Multiple Axes'.

Second trace

This will open a section where you can select an arrangement for your subplot.

Subplot arrangement

We'll select the 'Top X-Axis' arrangement for this trace. This will add a second x-axis on the top of the plot, but the traces will still be displayed in the same space with the same y-axis. We'll also label our axes right away. This will make it easier as we select the position using the 'Current Subplot' dropdown menu. The plot you select from this dropdown will act as the base for the subplot we're adding. Finally, select CONFIRM.

Current subplot

If you select an arrangement and then change your mind, the 'Undo' button will cancel the last arrangement selection only. This is very important to remember.

Undo button

Step 5

Style a Plot

We've styled this plot by playing with the colors, adding grid lines and adjusting the margins of our plot. We also removed the x-axes labels since we don't need them anymore. For more styling tips, consult this page.

Final plot

If you like the way we've styled our plot, see this great tutorial.

Step 6

Save and Share

Your plot is now done! Click SAVE on the left-hand side.

Save main

Give your PLOT and DATA a filename and select the privacy setting. For more information on how sharing works, including the difference between private, public, and secret sharing, visit this page.

Save pop-up

Step 7

Tips and Tricks

As you're creating a plot with multiple axes, you may notice that the grid doesn't quite align. If you want the axes mapped to one another so the grid overlaps, you can edit the range of both x-axes.

If you do want to keep the x-axes labels (we removed ours, if you recall), you may have to adjust the margins and padding so the top x-axis label doesn't hide behind the main plot's title or subtitle.

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.