React Plotly.js in JavaScript

How to use the Plotly.js React component.

New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

Use react-plotly.js to embed D3 charts in your React-powered web application. This React component takes the chart type, data, and styling as Plotly JSON in its data and layout props, then draws the chart using Plotly.js. See below about how to get started with react-plotly.js.

$ npm install react-plotly.js plotly.js

The easiest way to use this component is to import and pass data to a plot component:

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

class App extends React.Component {
  render() {
    return (
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        layout={ {width: 320, height: 240, title: 'A Fancy Plot'} }

For information on more advanced usage patterns such as State Management or Customizing the plotly.js bundle please see the ReadMe for react-plotly.js.

More information about Props and Event Handlers can be found in the ReadMe for react-plotly.js.

Click here for more information about Plotly Chart Types and Attributes.

Share you Plotly chart with a link for free

To save your chart online for free, please to retrieve your free API key.

To save private charts (not discoverable or viewable by anyone but you and trusted collaborators), there is a $14/month hosting option (billed annually). Revenue from private chart hosting on Chart Studio also supports the open-source development team maintaining the Plotly Python library.

Please click "Upgrade" in the Chart Creator if you wish to support our work!