Registry / web-framework / react-plotly.js

react-plotly.js

library2.6.0jsnpmunverified

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.

web-framework

npm install react-plotly.js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-PLOTLY.JS

react-plotly.js

web-frameworkjavascriptv2.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Plot

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

✗ import { Plot } from 'react-plotly.js'; const Plot = require('react-plotly.js');

The main Plot component is exported as a default export. CommonJS users need to access it via `.default`.

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;

Debug

Known issues

breakingVersion 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.

affects: >=2.3.0

gotchaThe 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.

affects: >=0.1.0

gotchaPlot 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.

affects: >=0.1.0

breakingThe 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.

affects: >=0.1.0

Errors

Common errors & fixes

Plot does not update or reflect user interactions after data changes.

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'

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;`.

Upgrade

Version history

2.6.0latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for the React component.

plotly.jsrequiredCore graphing library that react-plotly.js wraps; required as a peer dependency.

Agent activity

5 hits · last 30 days

gptbot

script

Resources

githubhttps://github.com/plotly/react-plotly.js ↗

packagehttps://www.npmjs.com/package/react-plotly.js ↗

homepagehttps://plotly.com/javascript/react ↗