Search⌘ K
AI Features
Home
Courses
Learn React.js, Redux & Immutable.js while building a weather app

Creating a Plot component

Explore building a reusable Plot component in React using Plotly.js. Learn how to efficiently render graphs by leveraging component lifecycle methods and passing data through props to display dynamic forecast charts.

We'll cover the following...

Plot component

To show our plot on the webpage, we will create a component which we’ll call Plot (what a surprise!) so lets start by rendering just a div:

class Plot extends React.Component {
  render() {
    return (
      <div id="plot"></div>
    );
  }
}

As you can see, I’ve added a div with an ID of plot above. This is the DOM element we’ll reference in our Plotly.newPlot call!

Now, the problem we have here is that if we ...