Part II of the Plotly.js Tutorial Series
Covers Plotly.js Titles and Axis Labels
By default, Plotly.js plots are sized with the minimum and maximum X and Y values as the entire range. This default can often result in a graph without the X and Y axes visible initially unless you zoom in.
While a simple graph can have a single trace, you can easily add numerous traces to a plot. As part of Plotly.js defaults, the plots will assign a different color for each trace. The graph’s title, a legend, and titles for the X and Y axes can also be added with minimal code.
This second part of my Plotly.js tutorial series will cover making multiple traces, adding and changing title text, and updating graphs dynamically.
For this part of the tutorial we will make some changes to the test.html file and the test.js file. So, make new versions of the files as test2.html, and test2.js. You will also need to change there html command linking to the test.js to link to test2.js. Again, these files will be in my GitHub repository.
Showing Plotly.js Axes
If you change the test.js file to the following:
var trace1 = {
x: [0, 2, 3, 4, 5],
y: [0, 10, 15, 13, 17],
type: ‘scatter’
};
var data = [trace1];
Plotly.newPlot(‘myDiv’, data);
You will see the X-axis and the Y-axis.
If, however, you change it to:
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 10, 15, 13, 17],
type: ‘scatter’
};
var data = [trace1];
Plotly.newPlot(‘myDiv’, data);
The X-axis will start at one by default. On the other hand, the Y-axis will start at zero by default.
Putting the points out of order does something strange to the lines. For example:
var trace1 = {
x: [6, 2, 3, 4, 5],
y: [6, 10, 15, 13, 17],
type: ‘scatter’
};
var data = [trace1];
Plotly.newPlot(‘myDiv’, data);
draws a line first from the point (6, 6) to (2, 10), then (3, 15), etc. This arrangement makes it draw the graph, not like a function, but a dot-to-dot trace where certain sections of the graph have more than one Y value for a given X value.
Now let’s see what happens when you have two traces:
let trace1 = {
x: [0, 2, 3, 4, 5],
y: [1, 10, 15, 13, 17],
type: ‘scatter’
};
let trace2 = {
x: [0, 2, 3, 4, 5],
y: [0, 6, 11, 3, 7],
type: ‘scatter’
};
let data = [trace1, trace2];
Plotly.newPlot(‘myDiv’, data);
In this case, two lines were formed; one blue and one orange. I did not explicitly choose blue and orange. Plotly.js chose for me.
You will also notice that the names of the traces become the default text in the legend. I decided to change the variable declarations from var to let because that is the best practice among many developers in the Javascript. Let variable declarations are only local, but var variable declarations are global by default. This behavior does not concern us in this example, but it might in the future.
If you want to change the text of the legend, you will have to add
name to the trace variable and set it equal to the text you want in quotes.
For example:
let trace1 = {
x: [0, 2, 3, 4, 5],
y: [1, 10, 15, 13, 17],
type: ‘scatter’
name: ‘Name of Trace 1’,
};
let trace2 = {
x: [0, 2, 3, 4, 5],
y: [0, 6, 11, 3, 7],
type: ‘scatter’,
name: ‘Name of Trace 2’,
};
let data = [trace1, trace2];
Plotly.newPlot(‘myDiv’, data);
will have a legend with “Name of Trace 1”, and “Name of Trace 2”.
If you forget to put the comma after ‘scatter’ and before name, it will not make a plot. The comma after ‘Name of Trace 1’ is optional.
Plotly.js Layout Variable
To add a title and text for each axis, you will have to have a layout variable. The variable doesn’t have to be called layout, but calling it layout makes programming plots much more consistent.
Like other things in Javascript, layout has a list of numerous graph features that can be included. In this case we want to have settings for the title of the graph explicitly written with the text, and font.
The layout variable is a bit tricky with brackets. The layout variable has an opening and closing bracket. Other bracketed sections within layout include title. The title section within the layout variable features text and font. Font has its own set of brackets that enclose family and size.
let layout ={
title: {
text:’Plot Title’,
font: {
family: ‘Times New Roman’,
size: 24
},
},
}
The one other thing to change to make this layout variable part of the plot is to add it to the Plotly.newplot.
Plotly.newPlot(‘myDiv’, data, layout);
Plotly.js Axis Labels
Now, if you want to add labels for the x and y axes, these can also be added to layout. They should be added after the second to last bracket and comma so they are outside of the section about title.
Again, have to be careful about the commas and brackets.
let layout ={
title: {
text:’Plot Title’,
font: {
family: ‘Times New Roman’,
size: 24
},
},
xaxis: {
title: {
text: ‘x Axis’,
font: {
family: ‘Courier New, monospace’,
size: 18,
color: ‘#7f7f7f’
}
}
},
yaxis: {
title: {
text: ‘y Axis’,
font: {
family: ‘Courier New, monospace’,
size: 18,
color: ‘#7f7f7f’
}
}
}
}
You have to have a comma before the xaxis portion, and a comma after the xaxis portion (after three closing brackets). Xaxis is spelled without a space or a hyphen in the code. If any comma is missing that you have to have, the plot won’t show.
Stylewise, these font choices are not the best, but they show how plotly.js works. Notably, the default color for text is black, if no color is given.
Reference
“Setting the Title, Legend Entries, and Axis Titles in JavaScript”, plotly.com. Retrieved from https://plotly.com/javascript/figure-labels/
on June 25, 2020.