Show Sidebar Hide Sidebar

Subplot Layouts in Plotly 2.0

Subplot Layouts in Plotly 2.0

Step 1

Introduction

In this tutorial we will look at how to control the layout of subplots.

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 mtcars 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, 'Scatter'.

Chart Type

Next, we need to define our trace values. To do so, use the dropdowns in the trace panel to select 'mpg' as the X value, 'drat' as the Y value, set 'A' as the 'Hover Text', and set the 'Size' as 'cyl.

Add Trace Values

Now, lets add a second plot. Click '+ Trace' button and when a new trace panel box appears change the Y value to 'qsec'.

Add Second Plot

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'.

Stacked Y Axis

Now, we can add a third subplot by repeating the previous process. Add another trace by clicking the '+ Trace' button and when a new trace panel box appears change the X value to 'wt' and the Y value to 'disp'.

Add Third Plot

Again, click the 'Subplot & Multiple Axes' button in the third trace panel where a selection of subplot arrangements ought to be presented. For this subplot, select 'Side By Side' and click 'Confirm'. You may notice that the layout isn't what you want but we will address this once we have added all the plots.

Side-by-Side

For the fourth subplot start by adding another trace by clicking the '+ Trace' button and when a new trace panel box appears change the chart type to 'Bar'

Add Fourth Plot

then the X value to 'A' and the Y value to 'hp'.

Fourth Plot Traces

Like previously, click the 'Subplot & Multiple Axes' button in the fourth trace panel where a selection of subplot arrangements ought to be presented. For this subplot, select 'Stacked' and click 'Confirm'. As previously mentioned, you may notice that the layout isn't what you want but we will address this once we have added all the plots.

Stacked

Step 4

Style Your Chart

Now that we have all the plots and subplots added we need to organise the subplot layouts. Thus, select 'Axes' under the STYLE tab and navigate to 'Layout'. Here, we'll make a serious of changes to each axis across all plots.

Axes Layout

By default, the 'X axis' ought to be selected and 'Mpg' ought to be the option in the 'X Axes dropdown'. Ensure that the axis width is set at a 'Start Position' of 0 and an 'End Position' of 45. Leave other values to their default settings.

Axis X 1

Now change to the 'Y axis' and in the 'Y Axes dropdown' ensure that 'Drat' is selected. Here, set the 'positions' to 40 and 65, respectively.

Axis Y 1

Switch back to the 'X axis' and select 'X Axis 2' from the 'X Axes dropdown'. Set the 'position' values to 55 and 100, respectively.

Axis X 2

Likewise, click the 'Y axis' and select 'Y Axis 2' form the 'Y Axes dropdown'. Enter the 'position' values of 70 and 95, respectively.

Axis Y 2

Again, back to the 'X axis', select the 'X Axis 3' from the 'X Axes dropdown' and then set the 'Start Position' to 0 and the 'End Position' to 100.

Axis X 3

Flick back to the 'Y axis' and select 'Y Axis 3' from the 'Y Axes dropdown' and enter the values 40 and 100, respectively. Hopefully, now you're beginning to see some organization.

Axis Y 3

Staying with the 'Y axis', select 'Y Axis 4' from the dropdown and set the 'Start Position' to 10 and the 'End Position' to 30.

Axis Y 4

Now, you ought to be seeing all the plots in the right locations so we can work on styling the plot a little more. 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.

Add Axis Title

Alternatively, you can simply edit these directly in the plot by clicking on the area where is says 'Click to Enter … Title'.

Add Directly

Before leaving the 'Axes' tab under 'STYLE', navigate to the 'Lines' box. Here, we can add lines to our axes by clicking the 'ALL' option and under 'Line' select 'Show'. Now, you ought to see 3 X axis lines and 4 Y axis lines (remember that the subplot in the top left-hand shares and X axis).

Show Line

In the same box, 'Lines', but immediately below set 'Zero Line' to 'Hide'. Somewhat self-evident, this removes the line on the axis at 0.

Zero Line

Lastly, we want to add a title to the plot. For this, navigate to 'Layout' under 'STYLE' and then select 'Titles and Fonts'. In the text box enter 'Subplot Layouts' or alternatively, like before, you can enter it directly in the plot where it says 'Click to Enter Plot Title'.

Add 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.