Show Sidebar Hide Sidebar

JSON Viewer/Editor in Plotly 2.0

How to use the JSON Viewer/Editor in Plotly 2.0

Step 1

Getting to Know JSON

JSON, which stands for JavaScript Object Notation, is an open-standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs.

What does this mean? It's a way to store information in an organized, easy-to-access manner. It also provides us a human-readable collection of data that we can access in a really clear manner.

The new online workspace not only lets you view your plot's attributes through JSON, but opening the JSON panel also allows you to edit most of your plot's properties. This is especially cool if you're new to coding.

Step 2

The JSON Panel

The first step is to head to Plotly's new online workspace and add your data.

For this tutorial, we're using Plotly's box plot example, as well as a few of our own projects. To find the box plot example, select 'Box plot' under 'Chart Type', and click the 'try an example' button. As you can see, the data's already been added, and the plot has been styled. This is a great way to get yourself acquainted with not only the JSON editor, but the entire workspace as well.

Example after

You can plot and style your graph as you wish, by using the STYLE tab on the left-hands side, or by using the JSON tab.

JSON tab

Once you've opened this tab, a panel will open to reveal the JSON code. If you're new to coding, it may look a little overwhelming, but it's not as scary as it seems.

JSON panel

As you're going through the attributes in this panel, it's a good idea to have this reference opened to help you out in case you need an explanation about a certain attribute.

As you scroll down this panel, you'll see that the 'object' consists of two sections: 'data' and 'layout'.

Step 3

The Data Section

Although this sub-tab is labeled 'data', it's important to note that you aren't able to edit your data here, but you can by following this step. This is actually referring to the attributes that belong to your traces, the same ones that are in the 'Traces' section under STYLE.

There are three parts to this 'data' sub-tab because when this plot was created, three traces were added to it. All the elements will be the same in each of these 'traces', but depending on what you want each of these 'traces' to look like, they'll be filled differently.

This is where you can change the labels of your traces, and depending on your chart type, you can change the thickness of your lines, the symbols and diameter of your points, and the colors of these attributes.

Let's say we want to change the point symbol from an open diamond to a cross. This is where that reference page comes in handy! We can use any of these symbols in a 3D scatter, and it looks like 'cross' is on that list! We'll go right ahead and change it, as well as the size.

Traces image

How do you change them? Hover your mouse over the fields next to the attributes to type into a field, or select/unselect an item. See the image below for a quick example.

Hover over trace

Why would you select or unselect an item? If you want something to appear on your plot, select the box corresponding to that specific attribute and check it to make it 'true'. You can also hide something by clicking it (so it's no longer checked off) and it appears as 'false'.

True or false

Step 4

The Layout Section

This is the section that covers the rest of the plot, including the title, annotations, and legend positioning. Unlike the 'data' section, this isn't divided by the traces, but by the sections of the plot.

The 'annotations' section allows you to edit your notes, and by looking at the image below, you can see that we have three annotations on our plot. We can change the text, color, and font of these notes. Although you can't add any annotations in the JSON editor, you can do so by going to the 'Notes' section by clicking STYLE. Visit this tutorial if you need help getting started.


Let's say you want to edit the width, height, or anchoring of the legend; scroll until you find 'legend', then click on the arrow next to it to see the attributes belonging to the legend. Click on the fields that you wish to change. You can follow the same steps for the 'margin'. By doing this, you can edit the positioning and padding of the margins."

Legend and margins

To edit the axis properties, scroll to the bottom of this category. This is where you can change the axes labels, but also the characteristics belonging to the ticks (labels, markers, formats, angles, and fonts to name a few), as well as the grid lines and zero lines. It's a good idea to look at both the x-axis and y-axis parts of this section, to make sure you don't miss anything. Let's say you want to remove the grid lines from your plot; you have to unselect the 'grid line' in both axes so they both appear as 'false'. Otherwise, you'll be left with either horizontal or vertical lines behind your plot.

Axes attributes

Although you can't add new attributes to your plot using the JSON editor, in some cases you still have a little more control by setting things specifically to your liking, rather than just using the tabs in the workspace. Happy plotting!

Still need help?
Contact Us

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