plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

React Plotly.js in plotly.js

How to use the Plotly.js React component.

Use react-plotly.js to embed D3 charts in your web application. This React component takes the chart type, data, and styling as Plotly JSON in its data and layout props, then draws the chart using Plotly.js. See below about how to get started with react-plotly.js.

$ npm install react-plotly.js plotly.js

plotly.js is a peer dependency of react-plotly.js. If you would like to bundle plotly.js with the rest of your project and use it in this component, you must install it separately.

$ npm install -S react-plotly.js plotly.js

If you build your project using webpack, you'll have to follow these instructions in order to successfully bundle plotly.js.

import Plot from 'react-plotly.js'

render () {
  return 
}

In this case, we want to use react-plotly.js without building plotly.js and use a version of plotly.js that is already built (see building an external plotly.js). This demo app was built with create-react-app and there 3 basic steps:

  1. Import plotly.js in a </script> tag in public/index.html
  2. Declare Plotly as a global in App.js
  3. Use createPlotlyComponent() in App.js

This lets us skip the specific build configuration necessary to build plotly.js in webpack environments (create-react-app uses webpack under the hood).

If you wish to use a version of plotly.js that is not bundled with the rest of your project, whether a CDN version or through a static distribution bundle, you may skip installing plotly.js and ignore the peer dependency warning.

$ npm install -S react-plotly.js

For quick one-off demos on CodePen or JSFiddle, you may wish to just load the component directly as a script tag. We don't host the bundle directly, so you should never rely on this to work forever or in production, but you can use a third-party service to load the factory version of the component from, for example, https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js.

You can load the component with:

<script src="https://unpkg.com/react-plotly.js@1.0.1/dist/create-plotly-component.js"></script>
const Plot = createPlotlyComponent(Plotly);

ReactDOM.render(
  React.createElement(Plot, {
    data: [{x: [1, 2, 3], y: [2, 1, 3]}]
  }),
  document.getElementById('root')
);

API

Click here for more information about Props and Event Handlers.

Click here for more information about Plotly Chart Types and Attributes.

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.