Fundamentals of Plotly.js

One of the major advantages of using Plotly.js is the fact that it is easy to get started, and there are lots of configurations you can specify to make your plot better. In the section, we are going to cover some of the important configuration options available, and we'll also show you how to specify these options.

Before we go further, let's understand how to get data into Plotly.

Data format

To make a two-dimensional (2D) plot, which is the most common type of plot you'll be creating, you have to pass an object of arrays with x and y keys, as shown in the following code example:

const trace1 = { 
  x: [20, 30, 40],
  y: [2, 4, 6]
}

Note

A data point is normally called a trace in Plotly. This is because you can plot more than one data point in a single graph. An example of this is provided here:

var data = [trace1, trace2]

Plotly.newPlot("my_div", data);

The x and y arrays can contain...