Show Sidebar Hide Sidebar

Creating Views in Plotly 2.0

Mobile-Friendly Views in Plotly 2.0

Step 1

Introduction

If you create a chart you may want to embed it in a mobile-friendly website. With Plotly 2.0, you can do this by simply creating a new 'View', allowing you to customise the layout properties and as a consequence an embedded plot will be responsive to changes in webpage width. To illustrate, in this tutorial we will create mutliple views of a histogram.

Step 2

Try an Example

You can also use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.

Open data

Step 3

Add Data

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. For this tutorial, copy the Walmart dataset URL (https://raw.githubusercontent.com/plotly/datasets/master/1962_2006_walmart_store_openings.csv) and then in the workspace select 'import data' by 'URL', and paste the URL link in the text box.

If you decide to use another dataset, keep in mind that Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

insert

Step 4

Create Chart

From the ‘Create’ tab within the ‘GRAPH’, select chart type, such as ‘Histogram’, from the ‘Chart Type’ dropdown.

insert

Now, immediately below select the variable in the ‘Values’ dropdown. You ought to see a histogram binned by year.

insert

Step 5

Style Chart

Before we create a new ‘View’, we want to apply any global features – that is features that are present irrespective of ‘View’. In this tutorial, we will simply change the colour of the trace by clicking the ‘Traces’ tab under ‘STYLE’ and editing the fill colour.

insert

Step 6

Create View

Now, that we have a made a chart, we can now create a new “View”. Below the ‘STYLE’ tab, select ‘Mobile’. Also note, that the instructions on mobile views appear in the panel to the immediate right.

insert

To begin, click the blue ‘+ View’ button situated at the top of the panel. Notice that when you click the button, multiple views (‘view 1’ and ‘view 2’) will open immediately below. ‘View 1’ will range between 0px – 320px whereas ‘View 2’ will be applied to widths greater than 320px.

insert

If you choose to have more than two views, simply click the ‘+ View’ again. By default, this will create three views which will range between 0-320px, 321-640px, and greater than 640px.

insert

You have the option of editing the ranges of each view. This can be done by adjusting the ‘Max Width’ inside each ‘View’ box. For the purpose of this tutorial, we have select to set the ‘Views’ at 0-400px, 401-800px, and greater than 800px, respectively.

insert

Now that we have defined the sizing parameters, you can make individual edits to each view. That is, you can select ‘View 1’ and make changes to the layout and then select another ‘View’ making different changes. We will look at this step in greater detail.

insert

Step 7

Style View

First, between the plot and the grid, select the dropdown with the title ‘View’. Here, you can select which ‘View’ to edit. For the purpose of this tutorial, we will select the first view – ‘View 1: 0px – 400px’. Next, select ‘Layout’ under ‘STYLE’ and in the ‘Canvas’ box change the ‘Plot Background’ to grey. What this means is that when the container width is between 0-400px, the background of the plot will be gray.

insert

After changing the plot background, you can adjust the margin and padding for this smaller view. Click ‘Layout’ under the ‘STYLE’ tab, and in the ‘Margins and Padding’ box set the values to 25, 50, 50, 25, and 0px respectively.

insert

Secondly, again between the plot and the grid, select the dropdown with the title ‘View’. Here, you can select ‘View 2: 401px – 800px’. Next, select ‘Layout’ under ‘STYLE’ and in the ‘Canvas’ box change the ‘Plot Background’ to another color. Now, if the container width is between 401-800px the background of the plot will be the selected color for 'View 2'.

insert

To create further style edits, consult the 'STYLE' tab. For this tutorial, click 'Axes' and then the 'Lines' panel. Here, you can toggle the grid lines on or off by clicking 'Hide'.

insert

For the last view, again between the plot and the grid, select the dropdown with the title ‘View’. Here, you can select 'View 3: 800px and greater'. Next, click 'Axes' and then the 'Lines' panel. Here, like before, you can toggle the grid lines on or off by clicking 'Hide'.

insert

Another style edit to consider is altering the title. To do this, you can simply click and edit the title box in the plot or click 'Layout' under the 'STYLE' tab, then select the 'Title and Fonts' panel. In this tutorial, we have used html text and additionally changed the title color.

insert

Now you have created three different views (0-400px, 401-800px, 800px+), each with different styles that'll be invoked be webpage width. These examples above are only an introduction and there is more extensive edits possible in Plotly 2.0

Step 8

Save and Share

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

insert

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.

insert

Still need help?
Contact Us

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