React Plotly.js Component

2.6.0 · active · verified Sun Apr 19

react-plotly.js is the official React component wrapper for the plotly.js graphing library, currently at stable version 2.6.0. It provides a declarative way to render interactive charts within React applications. The library maintains an active release cadence, with minor updates addressing bug fixes and new plotly.js event support occurring every few months. A key differentiator is its design as a 'dumb' React component, meaning it does not internally manage plot interactions (like zooming or panning) as part of its state. Developers must explicitly capture and manage these changes using callback props like `onUpdate` or `onInitialized` to persist user interactions across re-renders. It requires `react` and `plotly.js` as peer dependencies, allowing users to control the plotly.js bundle size and version and integrate custom bundles. This component forms the basis of Plotly's React component suite.

Common errors

```
Plot does not update or reflect user interactions after data changes.
```
cause The component is 'dumb' and expects immutable updates to props, or explicit revisioning for plot refreshes.

fix Pass new object references for `data`, `layout`, or `config` props when they change, or increment the `revision` prop or `layout.datarevision` to force an update. Capture interactive changes via `onUpdate`.
```
TypeError: Cannot read properties of undefined (reading 'default') or 'react_plotly_js__WEBPACK_IMPORTED_MODULE_2__.Plot is not a constructor'
```
cause Incorrect import statement for the `Plot` component, especially when mixing CommonJS `require` with a default ESM export.

fix Use `import Plot from 'react-plotly.js';` for ES Modules. If using CommonJS, use `const Plot = require('react-plotly.js').default;`.

Warnings

breaking Version 2.3.0 removed deprecated React methods. Applications relying on older React lifecycle methods might break upon upgrade.
Fix: Update your React components to use modern lifecycle methods or hooks as recommended by React's documentation.
gotcha The component is 'dumb' and does not manage plot state internally. User interactions like zooming or panning are lost on re-render unless explicitly captured.
Fix: Use the `onInitialized` and `onUpdate` callback props to capture the plot's `figure` state (data, layout, frames, config) and store it in your parent component's state or a global store.
gotcha Plot updates require immutable data changes or explicit revisioning. Modifying `data` or `layout` properties in place (mutably) will not trigger a plot refresh.
Fix: Ensure `data`, `layout`, or `config` props change identity (shallow `===`) or explicitly update the `revision` prop or `layout.datarevision` to force a re-render. Consider using immutability helpers for complex state updates.
breaking The component may mutate its `layout` and `data` props internally in response to user interactions or plot updates. This is an anti-pattern in React and can lead to unexpected side effects if the original prop objects are expected to remain immutable.
Fix: Always pass copies of your `layout` and `data` objects as props to `Plot` if you need to ensure their original references are not modified by the component. For example, use spread syntax (`{...myLayout}`) or deep cloning if necessary.

Install

npm install react-plotly.js npm
yarn add react-plotly.js yarn
pnpm add react-plotly.js pnpm

Imports

Plot
wrong:
```
import { Plot } from 'react-plotly.js';
const Plot = require('react-plotly.js');
```
correct:
```
import Plot from 'react-plotly.js';
```
The main Plot component is exported as a default export. CommonJS users need to access it via `.default`.

Quickstart

Demonstrates how to render a basic scatter and bar chart using the Plot component with static data and layout, enabling the mode bar.

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

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            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: 720, height: 480, title: 'A Fancy Plot'}}
        config={{displayModeBar: true, responsive: true}}
      />
    );
  }
}

export default App;

view raw JSON →