Creating basic charts with Plotly.js

Plotly.js supports many basic charts that can be quickly used to convey information. Some examples of basic charts available in Plotly are scatter plots, line, bar, pie and bubble charts, dot plots, treemaps, tables, and so on. You can find a complete list of supported basic charts here: https://plotly.com/javascript/basic-charts/.

In this section, we will cover some basic charts such as scatter plots, bar charts, and bubble charts.

First, we'll start with scatter plots.

Creating a scatter plot with Plotly.js

A scatter plot is typically used to plot two variables against each other. The plot is displayed as a collection of points, hence the name scatter plot. The following screenshot shows an example of a scatter plot:

Figure 5.15 – Example of a scatter plot showing Fare against Age margin

To make a scatter plot using Plotly, you simply specify the plot type, as we show in the following example...