React Plotly.js Users Guide

2 min readMar 11, 2021

Plotly JS graphing library is a great way to present graphical data to users. Featured in two of my Flatiron School projects, I used Plotly to represent portfolio value and distribution, as well as charting real time cryptocurrency prices using a third party API.

Plotly working in conjunction with with a react application can elevate your projects and or web applications to new heights, with helpful built in functionality like hover effects, and plenty of freedom to customize the charts to your liking.

To install Plotly in react, run:

npm install react-plotly.js plotly.js

Import the library into your application:

import Plot from 'react-plotly.js';

After importation, you can now use a Plot component in your react application.

<Plot
  data={[
    {
      x: [1,2,3],
      y: [2,4,6],
      type: "scatter",
      fill: "tozeroy",
      mode: "lines+markers",
      marker: { color: "#2d5c9f", size: 2 },
    },
  ]}
  layout={{
    title: {
      text: "Plot Title",
      font: {
        size: 16,
        color: "#c0c0c0",
      },
    },
    width: 736,
    height: 450,
    paper_bgcolor: "rgba(0,0,0,0)",
    plot_bgcolor: "rgba(0,0,0,0)",
    xaxis: {
      showgrid: false,
      visible: true,
    },
    yaxis: {
      showgrid: true,
      showline: false,
      gridcolor: "#3d4042",
    },
  }}
/>

Included above is an example of a lines+markers scatter plot graph, perfect for tracking something like an assets value over time. Each point is connected with a line, and can be used as a boilerplate for any sort of application that requires such a graph.

Stepping through the customizations already applied, the most obvious feature is setting the values of the graph. The x-values will be an array included inside of the data portion, as will the y-values. After the values, the type of graph is listed. This graph being a scatter plot, the type is scatter. Examples of more graphs are “bar”, “pie” , etc. These can be found in the Plotly documentation. Following the type is the fill. This can be ignored if you do not want a color fill below your line, as it will also stretch the y axis to include visibility all the way to 0 y. The marker has customizable attributes, where the color can be manipulated and the size of each point on the graph can be changed. I made them small in this graph so it resembled a line instead of large points connected by one. The layout allows you to customize the title, and other features, like the size of the graph, the background color, and more. Finally each axis has its own attributes, such as boolean values to display or not display the grid, the labels, and the grid colors.

Many Plotly graphs have similar structures, with slight differences including where the data is stored and differing data attributes. All are created inside of a <Plot /> tag and will have data and layout attributes.

Graphs can be daunting subjects in React. Look no further than Plotly.js for intuitive graphing data of all kinds.This quick guide can act as a template to get your graphics up and running, giving you more time to figure out the more difficult portions of your project or application. Happy graphing!

React Plotly.js Users Guide

Written by Dain Brownlow