Show Sidebar Hide Sidebar

Shared X-Axis Subplots in Plotly 2.0

Shared X-Axis Subplots in Plotly 2.0

Step 1

Introduction

In this tutorial we will look at how to create subplots with a shared x-axis.

Step 2

Add Your Data to Plotly

Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

For this tutorial, we'll use the NZ Weather dataset which can be found here. Simply, copy the URL from Github. Now, returning to the workspace select 'IMPORT' and then 'By URL'. Here, you just paste the URL from Github.

Add Data

Step 3

Create Your Chart

Now that the data has been added, we can select our chart types. Here, we will use a single trace for each subplot. First, we will use the default chart type, 'Time Series'.

Chart Type

Next, we need to define our trace values. To do so, use the dropdowns in the trace panel to select 'DATE' as the X value, 'Auckland' as the Y value, set 'Auckland' as the 'Hover Text'.

Add Trace Values

Now that we have the first trace, lets add the second. Simply, click the blue '+ Trace' button and then use the dropdowns in the new trace panel to change the Y value and 'Hover Text' value to 'Dunedin'.

Add 2nd Trace

At the bottom of the panel click the 'Subplot & Multiple Axes' button where a selection of subplot arrangements ought to be presented. For this tutorial, select 'Stacked-Y-Axis' - also referred to as shared x-axis - and click 'Confirm'.

Add Subplot

If you make a mistake when selected the subplot layout, you can simply click 'UNDO', which is situated immediately below 'Confirm'.

Undo Mistakes

Step 4

Style Your Chart

Now we can style our plot! Under STYLE select 'Traces', then click individual at the top of the panel - this will enable you to customize each trace. Here, select the 'Dunedin' trace and then click color, which will force a color panel to appear. For the purpose of this tutorial we picked one of the preselected colors at the bottom.

Trace Color

Now, navigate to 'Axes', again under the STYLE tab, and select the 'Lines' panel. At the top of the panel click Y and then select 'Y Axis 2' from the 'Y Axes' dropdown. At the bottom of the panel, change 'Zeroline' to 'Hide'. You ought to notice that the line on the top subplot is now gone.

Hide Lines

Staying in the 'Axes' tab under 'STYLE', select the 'Titles' box and then utilise the 'X' and 'Y' options and the dropdown to navigate which axis you wish to title using the textbox. First, select 'X' and enter the title in the textbox like below.

X-Axis Title

You can repeat the process for the y axis or alternatively try editing the axis title directly on the plot like below.

Y-Axis Title

For the chart title, you can navigate to 'Layout' under the STYLE tab and select 'Titles and Fonts'. Below the textbox you can select 'Edit in HTML'. Alternatively, like the axes' title, you can edit directly on the plot.

Chart Title

Step 5

Save and Share

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

Save Button

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.

Save Modal

Still need help?
Contact Us

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