{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-plotly.js"],"cli":null},"imports":["import Plot from 'react-plotly.js';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}