Plotly.js React Tutorial

Plotly.js React Code Example

This example demonstrates how to create a simple line chart using Plotly.js within a React application. Plotly.js is a versatile charting library that provides an easy way to create interactive, high-quality charts. To integrate Plotly.js in a React app, we'll use the `react-plotly.js` wrapper, which simplifies the process of creating Plotly charts in React.

First, ensure you have the necessary packages installed in your project. You can add them by running:

npm install react-plotly.js plotly.js


Next, here’s how you could set up a simple line chart component:

import React from 'react';
import Plot from 'react-plotly.js';

const LineChart = () => {
 // Sample data for the chart
 const xValues = [1, 2, 3, 4, 5];
 const yValues = [2, 3, 2, 4, 5];

 return (
   <Plot
     data={[
       {
         x: xValues,
         y: yValues,
         type: 'scatter',  // Defines the chart type
         mode: 'lines+markers', // Visualization mode
         marker: {color: 'blue'}, // Marker properties
       },
     ]}
     layout={{width: 720, height: 440, title: 'A Simple Line Chart'}}
   />
 );
};

export default LineChart;


Finally, you can import and use the LineChart component in your application as follows:

import React from 'react';
import LineChart from './LineChart';

const App = () => {
 return (
   <div>
     <h2>My React Plotly Chart</h2>
     <LineChart />
   </div>
 );
};

export default App;


This example showcases the ease with which you can integrate Plotly.js into a React application to create dynamic and interactive charts. You can further customize the chart by exploring the vast array of settings and options provided by Plotly.js.