{"id":11828,"library":"react-plotly.js","title":"React Plotly.js Component","description":"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.","status":"active","version":"2.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/plotly/react-plotly.js","tags":["javascript","graphing","plotting","data","visualization","plotly","react"],"install":[{"cmd":"npm install react-plotly.js","lang":"bash","label":"npm"},{"cmd":"yarn add react-plotly.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-plotly.js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the React component.","package":"react","optional":false},{"reason":"Core graphing library that react-plotly.js wraps; required as a peer dependency.","package":"plotly.js","optional":false}],"imports":[{"note":"The main Plot component is exported as a default export. CommonJS users need to access it via `.default`.","wrong":"import { Plot } from 'react-plotly.js';\nconst Plot = require('react-plotly.js');","symbol":"Plot","correct":"import Plot from 'react-plotly.js';"}],"quickstart":{"code":"import React from 'react';\nimport Plot from 'react-plotly.js';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <Plot\n        data={[\n          {\n            x: [1, 2, 3],\n            y: [2, 6, 3],\n            type: 'scatter',\n            mode: 'lines+markers',\n            marker: {color: 'red'},\n          },\n          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},\n        ]}\n        layout={{width: 720, height: 480, title: 'A Fancy Plot'}}\n        config={{displayModeBar: true, responsive: true}}\n      />\n    );\n  }\n}\n\nexport default App;","lang":"javascript","description":"Demonstrates how to render a basic scatter and bar chart using the Plot component with static data and layout, enabling the mode bar."},"warnings":[{"fix":"Update your React components to use modern lifecycle methods or hooks as recommended by React's documentation.","message":"Version 2.3.0 removed deprecated React methods. Applications relying on older React lifecycle methods might break upon upgrade.","severity":"breaking","affected_versions":">=2.3.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Plot updates require immutable data changes or explicit revisioning. Modifying `data` or `layout` properties in place (mutably) will not trigger a plot refresh.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"The component is 'dumb' and expects immutable updates to props, or explicit revisioning for plot refreshes.","error":"Plot does not update or reflect user interactions after data changes."},{"fix":"Use `import Plot from 'react-plotly.js';` for ES Modules. If using CommonJS, use `const Plot = require('react-plotly.js').default;`.","cause":"Incorrect import statement for the `Plot` component, especially when mixing CommonJS `require` with a default ESM export.","error":"TypeError: Cannot read properties of undefined (reading 'default') or 'react_plotly_js__WEBPACK_IMPORTED_MODULE_2__.Plot is not a constructor'"}],"ecosystem":"npm"}