react-plotly.js

A plotly.js React component from

Plotly.

Installation
Quick start
State management
Refreshing the Plot
API

- Basic props - Event handler props

Examples

- Responsive plot - Event handlers - TypeScript - Grabbing the graph div via ref

Customizing the plotly.js bundle
Loading from a

<pre><code class="lang-">React is pinned to 18 here because React 19 stopped shipping UMD builds; consumers wanting React 19 should load it via [importmap or use a bundler.

The factory is exposed as the global createPlotlyComponent. Build the component and mount it:</code></pre>javascript const Plot = createPlotlyComponent(Plotly); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( React.createElement(Plot, { data: [{x: [1, 2, 3], y: [2, 1, 3]}], }) ); <pre><code class="lang-">## Development

To get started:</code></pre>bash $ npm install <pre><code class="lang-">To build the published artifacts (dist/index.{mjs,cjs}, dist/factory.{mjs,cjs}, the UMD bundle, and the declaration files) via tsup:</code></pre>bash $ npm run build <pre><code class="lang-">To run lint + typecheck + jest:</code></pre>bash $ npm run test <pre><code class="lang-">To watch source files and rebuild on change:</code></pre>bash $ npm run watch `

Releases are cut from main per the steps in RELEASE.md`.

License

🔗 More in this category

react-plotly.js

Contents

License