Using Plotly.js with React
Tags: plotly, react
Published: 2023-11-17 15:17:21

In this lesson, we will go through the steps of using [Plotly.js](https://plotly.com/javascript/) in [React](https://react.dev/). Plotly.js is an Open Source Graphing Library. At the end of this lesson, you should be able to do a simple plot with Plotly.js.

**Prerequisite**

- Must be familiar with JavaScript
- Must be familiar with installing NPM packages
- Must have React installed

**Procedure**
Create a new react project called **react-plotly** by typing the following in the command terminal.
```
npx create-react-app react-plotly
```

Navigate into the **react-plotly** project folder by typing the following in the command terminal.
```
cd react-plotly
```

Install Plotly.js for React by typing the following in the command terminal.

```
npm install react-plotly.js plotly.js
```

Consider a fictional scenario, where a doctor or nurse needs to see the growth rate of boys. In this example we will be plotting this data. The x-axis contains the age and the y-axis contains the height.

Clear the styling of the React app by opening the **App.css** file and deleting all the contents.

Replace the contents in the **App.js** file with the code below. (**Note**: The values are fictional).

```
import "./App.css";
import Plot from "react-plotly.js";

function App() {
  return (
    <div
      className="App"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <Plot
        data={[
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
            mode: "markers",
            type: "scatter",
          },
        ]}
        layout={{
          title: "Growth Rate in Boys",
          xaxis: {
            title: "Age (years)",
          },
          yaxis: {
            title: "Height (inches)",
          },
        }}
      />
    </div>
  );
}

export default App;
```

Run the React app typing the following in the command terminal.

```
npm start
```

On the browser go to http://localhost:3000. You will see the following graph in the middle of the screen.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqx0zxr8kqp58a3mg5xn.png)

The **data** property contains the **x** data, **y** data, the **mode** and the **type**. In this example, the **x** array contains the ages and the **y** array contains the heights. The mode is set to **markers**. Some other modes are **lines**, **lines+markers**, **markers+text** and **none**. The type is set to **scatter**. Some other types are **bar**, **pie** and **sunburst**. The **layout** property sets the title of the plot, x-axis label and y-axis label. For example, the x-label is set using the following code snippet.

```
xaxis: {
  title: "Age (years)",
},
```

There are other types of charts which can be found [here](https://plotly.com/javascript/basic-charts/).

Multiple plots can be displayed on the same graph. In this example, we will include the growth rate of girls.

In order to distinguish the two plots add the **name** property under **type** as shown below. This will be shown in the legend.

```
{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
  mode: "markers",
  type: "scatter",
  name: "Boys",
}
```

Add the following snippet of code in the **data** property as shown below. The age and height data for the girls are added. (**Note**: The values are fictional). Plotly.js automatically assigns different colors for each plot. The color for the plot can be changed. In this example, the color for the girls’ data was changed to red.

```
{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
  mode: "markers",
  type: "scatter",
  name: "Boys",
},
{
  x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
  y: [30, 36, 39, 42, 48, 53, 58, 62, 67.5, 68, 68.5],
  mode: "lines+markers",
  type: "scatter",
  name: "Girls",
  marker: { color: "red" },
},
```

The size of the plot can be changed. Edit the **width** and **height** as seen below.

```
layout={{
  title: "Growth Rate in Boys",
  xaxis: {
    title: "Age (years)",
  },
  yaxis: {
    title: "Height (inches)",
  },
  width: 600,
  height: 500,
}}
```

The entire should look like this. The title was changed to **Growth Rate in Children**.

```
import "./App.css";
import Plot from "react-plotly.js";

function App() {
  return (
    <div
      className="App"
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <Plot
        data={[
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [32, 37, 40.5, 43, 49, 54, 59, 63.5, 69.5, 73, 74],
            mode: "markers",
            type: "scatter",
            name: "Boys",
          },
          {
            x: [1, 2, 3, 4, 6, 8, 10, 12, 14, 16, 18],
            y: [30, 36, 39, 42, 48, 53, 58, 62, 67.5, 68, 68.5],
            mode: "lines+markers",
            type: "scatter",
            name: "Girls",
            marker: { color: "red" },
          },
        ]}
        layout={{
          title: "Growth Rate in Children",
          xaxis: {
            title: "Age (years)",
          },
          yaxis: {
            title: "Height (inches)",
          },
          width: 600,
          height: 500,
        }}
      />
    </div>
  );
}

export default App;
```

On the browser go to http://localhost:3000. You will see the following graph in the middle of the screen.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6k61rn2k69t0h1lcat9.png)

If you hover over the plot, there are some controls at the top as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg3swn6dt9u9ewh911kw.png)

These allow you to download the plot as a png, zoom, pan, select, zoom in, zoom out, auto-scale and reset axes. You can also hover the points to see their values.

This concludes our lesson. For more information on Plotly.js, check the documentation [here](https://plotly.com/javascript/).