react-plotly.js
Advanced tools
The react-plotly.js package is a React wrapper for Plotly.js, a popular graphing library. It allows you to create a wide variety of interactive charts and visualizations in a React application.
Basic Line Chart
This code demonstrates how to create a basic line chart using react-plotly.js. The chart includes both lines and markers, and it is customized with a title and specific dimensions.
import React from 'react';
import Plot from 'react-plotly.js';
const LineChart = () => (
<Plot
data={[
{
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter',
mode: 'lines+markers',
marker: {color: 'red'},
},
]}
layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
/>
);
export default LineChart;Bar Chart
This code demonstrates how to create a bar chart using react-plotly.js. The chart displays the number of different animals and is customized with a title and specific dimensions.
import React from 'react';
import Plot from 'react-plotly.js';
const BarChart = () => (
<Plot
data={[
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar',
},
]}
layout={{width: 320, height: 240, title: 'Bar Chart'}}
/>
);
export default BarChart;Pie Chart
This code demonstrates how to create a pie chart using react-plotly.js. The chart displays the distribution of different categories and is customized with a title and specific dimensions.
import React from 'react';
import Plot from 'react-plotly.js';
const PieChart = () => (
<Plot
data={[
{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
},
]}
layout={{width: 320, height: 240, title: 'Pie Chart'}}
/>
);
export default PieChart;react-chartjs-2 is a React wrapper for Chart.js, another popular charting library. It offers a wide range of chart types and is known for its simplicity and ease of use. Compared to react-plotly.js, react-chartjs-2 may be easier to set up for simple charts but might lack some of the advanced features and customization options available in Plotly.js.
Recharts is a composable charting library built on React components. It is designed to be highly customizable and easy to integrate into React applications. Recharts offers a variety of chart types and is known for its flexibility and ease of use. Compared to react-plotly.js, Recharts provides a more React-centric approach to building charts but may not offer the same level of interactivity and advanced features as Plotly.js.
Victory is a collection of composable React components for building interactive data visualizations. It is designed to be highly customizable and easy to use. Victory offers a wide range of chart types and is known for its flexibility and ease of integration into React applications. Compared to react-plotly.js, Victory provides a more React-centric approach to building charts but may not offer the same level of interactivity and advanced features as Plotly.js.
A plotly.js React component from Plotly. The basis of Plotly's React component suite.
👉 DEMO
$ npm install react-plotly.js plotly.js
The easiest way to use this component is to import and pass data to a plot component. To import the component,
import Plot from 'react-plotly.js'
Then to render a plot,
render () {
return (
<Plot
data={[
{
type: 'scatter',
mode: 'lines+points',
x: [1, 2, 3],
y: [2, 6, 3],
marker: {color: 'red'}
},
{
type: 'bar',
x: [1, 2, 3],
y: [2, 5, 3]
}
]}
layout={{
width: 320,
height: 240,
title: 'A Fancy Plot'
}}
/>
);
}
You should see a plot like this:
For a full description of Plotly chart types and attributes see the following resources:
Using this component inside a larger application may require some additional considerations in addition to the simple usage example above. The following sections detail two basic use-cases.
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
Since plotly.js is a peer dependency, you do not need to require it separately to use it:
import Plot from 'react-plotly.js'
render () {
return <Plot
data={...}
layout={...}
frames={...}
config={...}
/>
}
If you build your project using webpack, you'll have to follow these instructions in order to successfully bundle plotly.js.
If you are building with Webpack but do not have access to the Webpack configuration (i.e. you are using create-react-app) or if you don't want to configure webpack see next section.
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
Given perhaps a script tag that has loaded a CDN version of plotly.js,
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
you may then inject Plotly and use the returned React component:
/* global Plotly:true */
import createPlotlyComponent from 'react-plotly.js/factory'
/* (Note that Plotly is already defined from loading plotly.js through a <script> tag) */
const Plot = createPlotlyComponent(Plotly);
render () {
return <Plot
data={...}
layout={...}
frames={...}
config={...}
/>
}
Note: You must ensure Plotly is available before your React app tries to render the component. That could mean perhaps using script tag (without async or defer) or a utility like load-script.
create-react-appIf you are using create-react-app you will not have access to the Webpack configuration unless you choose to eject.
eject, you must use an external plotly.js using the instructions immediately above. This demo app was built with create-react-app using this approach.create-react-app with a local plotly.js, you will need to eject and follow the Webpack instructions above.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>
And instantiate the component with
const Plot = createPlotlyComponent(Plotly);
ReactDOM.render(
React.createElement(Plot, {
data: [{x: [1, 2, 3], y: [2, 1, 3]}]
}),
document.getElementById('root')
);
You can see an example of this method in action here.
Note: for the time being, this component may mutate its layout and data props in response to user input, going against React rules. This behaviour will change in the near future.
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | [] | list of trace objects |
layout | Object | undefined | layout object |
config | Object | undefined | config object |
style | Object | {position: 'relative', display: 'inline-block'} | used to style the <div> into which the plot is rendered |
className | string | undefined | applied to the <div> into which the plot is rendered |
frames | Array | undefined | list of frame objects |
useResizeHandler | Boolean | false | When true, adds a call to Plotly.Plot.resize() as a window.resize event handler |
revision | Number | undefined | When provided, causes the plot to update only when the revision is incremented. |
debug | Boolean | false | Assign the graph div to window.gd for debugging |
onInitialized | Function | undefined | Callback executed after plot is initialized |
onPurge | Function | undefined | Callback executed when component unmounts. Unmounting triggers a Plotly.purge event which strips the graphDiv of all plotly.js related information including data and layout. This hook gives application writers a chance to pull data and layout off the DOM. |
onUpdate | Function | undefined | Callback executed when a plotly.js API method resolves |
onError | Function | undefined | Callback executed when a plotly.js API method rejects |
fit | Boolean | false | deprecated When true, will set layout.height and layout.width to the component's parent's size if they are unspecified, and will update them on window.resize |
To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use style or className to set the dimensions of the element (i.e. using width: 100%; height: 100% or some similar values) and set useResizeHandler to true while setting layout.autosize to true and leaving layout.height and layout.width undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/
Event handlers for plotly.js events may be attached through the following props.
| Prop | Type | Plotly Event |
|---|---|---|
onAfterExport | Function | plotly_afterexport |
onAfterPlot | Function | plotly_afterplot |
onAnimated | Function | plotly_animated |
onAnimatingFrame | Function | plotly_animatingframe |
onAnimationInterrupted | Function | plotly_animationinterrupted |
onAutoSize | Function | plotly_autosize |
onBeforeExport | Function | plotly_beforeexport |
onButtonClicked | Function | plotly_buttonclicked |
onClick | Function | plotly_click |
onClickAnnotation | Function | plotly_clickannotation |
onDeselect | Function | plotly_deselect |
onDoubleClick | Function | plotly_doubleclick |
onFramework | Function | plotly_framework |
onHover | Function | plotly_hover |
onRelayout | Function | plotly_relayout |
onRestyle | Function | plotly_restyle |
onRedraw | Function | plotly_redraw |
onSelected | Function | plotly_selected |
onSelecting | Function | plotly_selecting |
onSliderChange | Function | plotly_sliderchange |
onSliderEnd | Function | plotly_sliderend |
onSliderStart | Function | plotly_sliderstart |
onTransitioning | Function | plotly_transitioning |
onTransitionInterrupted | Function | plotly_transitioninterrupted |
onUnhover | Function | plotly_unhover |
This component currently creates a new plot every time the input changes. That makes it stable and good enough for production use, but plotly.js will soon gain react-style support for computing and drawing changes incrementally. What does that mean for you? That means you can expect to keep using this component with little modification but that the plotting will simply happen much faster when you upgrade to the first version of plotly.js to support this feature. If this component requires any significant changes, a new major version will be released at the same time to ensure stability. See plotly/react-plotly.js#2 for more information about this feature.
To get started:
$ npm install
$ npm start
To transpile from ES2015 + JSX into the ES5 npm-distributed version:
$ npm run prepublishOnly
To run the tests:
$ npm run test
© 2017 Plotly, Inc. MIT License.
FAQs
A plotly.js react component from Plotly
The npm package react-plotly.js receives a total of 147,956 weekly downloads. As such, react-plotly.js popularity was classified as popular.
We found that react-plotly.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.