A plotly.js React component from Plotly. The basis of Plotly's React component suite.
π DEMO
π Demo source code
- Installation
- Quick start
- State management
- Refreshing the Plot
- API
- Customizing the
plotly.js
bundle- Loading from a
<script>
tag- Development
$ npm install react-plotly.js plotly.jsThe easiest way to use this component is to import and pass data to a plot component:
import React from 'react'; import Plot from 'react-plotly.js'; class App extends React.Component { render() { return ( <Plot data={[ { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+markers', 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:
This is a "dumb" component that doesn't merge its internal state with any updates. This means that if a user interacts with the plot, by zooming or panning for example, any subsequent re-renders will lose this information unless it is captured and upstreamed via the
onUpdate
callback prop.Here is a simple example of how to capture and store state in a parent object:
class App extends React.Component { constructor(props) { super(props); this.state = {data: [], layout: {}, frames: [], config: {}}; } render() { return ( <Plot data={this.state.data} layout={this.state.layout} frames={this.state.frames} config={this.state.config} onInitialized={(figure) => this.setState(figure)} onUpdate={(figure) => this.setState(figure)} /> ); } }This component will refresh the plot via
Plotly.react
if any of the following are true:
- The
revision
prop is defined and has changed, OR;- One of
data
,layout
orconfig
has changed identity as checked via a shallow===
, OR;- The number of elements in
frames
has changedFurthermore, when called,
Plotly.react
will only refresh the data being plotted if the identity of the data arrays (e.g.x
,y
,marker.color
etc) has changed, or iflayout.datarevision
has changed.In short, this means that simply adding data points to a trace in
data
or changing a value inlayout
will not cause a plot to update unless this is done immutably via something like immutability-helper if performance considerations permit it, or unlessrevision
and/orlayout.datarevision
are used to force a rerender.Warning: for the time being, this component may mutate its
layout
anddata
props in response to user input, going against React rules. This behaviour will change in the near future once plotly/plotly.js#2389 is completed.
Prop Type Default Description data
Array
[]
list of trace objects (see https://plot.ly/javascript/reference/) layout
Object
undefined
layout object (see https://plot.ly/javascript/reference/#layout) frames
Array
undefined
list of frame objects (see https://plot.ly/javascript/reference/) config
Object
undefined
config object (see https://plot.ly/javascript/configuration-options/) revision
Number
undefined
When provided, causes the plot to update when the revision is incremented. onInitialized
Function(figure, graphDiv)
undefined
Callback executed after plot is initialized. See below for parameter information. onUpdate
Function(figure, graphDiv)
undefined
Callback executed when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. onPurge
Function(figure, graphDiv)
undefined
Callback executed when component unmounts, before Plotly.purge
strips thegraphDiv
of all private attributes. See below for parameter information.onError
Function(err)
undefined
Callback executed when a plotly.js API method rejects divId
string
undefined
id assigned to the <div>
into which the plot is rendered.className
string
undefined
applied to the <div>
into which the plot is renderedstyle
Object
{position: 'relative', display: 'inline-block'}
used to style the <div>
into which the plot is rendereddebug
Boolean
false
Assign the graph div to window.gd
for debugginguseResizeHandler
Boolean
false
When true, adds a call to Plotly.Plot.resize()
as awindow.resize
event handlerNote: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use
style
orclassName
to set the dimensions of the element (i.e. usingwidth: 100%; height: 100%
or some similar values) and setuseResizeHandler
totrue
while settinglayout.autosize
totrue
and leavinglayout.height
andlayout.width
undefined. This can be seen in action in this CodePen and will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/The
onInitialized
,onUpdate
andonPurge
props are all functions which will be called with two arguments:figure
andgraphDiv
.
figure
is a serializable object with three keys corresponding to input props:data
,layout
andframes
.
- As mentioned above, for the time being, this component may mutate its
layout
anddata
props in response to user input, going against React rules. This behaviour will change in the near future once plotly/plotly.js#2389 is completed.graphDiv
is a reference to the (unserializable) DOM node into which the figure was rendered.Event handlers for specific
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
onBeforeHover
Function
plotly_beforehover
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
onLegendClick
Function
plotly_legendclick
onLegendDoubleClick
Function
plotly_legenddoubleclick
onRelayout
Function
plotly_relayout
onRelayouting
Function
plotly_relayouting
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
onSunburstClick
Function
plotly_sunburstclick
onTransitioning
Function
plotly_transitioning
onTransitionInterrupted
Function
plotly_transitioninterrupted
onUnhover
Function
plotly_unhover
onWebGlContextLost
Function
plotly_webglcontextlost
By default, the
Plot
component exported by this library loads a precompiled version of all ofplotly.js
, soplotly.js
must be installed as a peer dependency. This bundle is around 6Mb unminified, and minifies to just over 2Mb.If you do not wish to use this version of
plotly.js
, e.g. if you want to use a different precompiled bundle or if your wish to assemble you own customized bundle, or if you wish to loadplotly.js
from a CDN, you can skip the installation of as a peer dependency (and ignore the resulting warning) and use thecreatePlotComponent
method to get aPlot
component, instead of importing it:// simplest method: uses precompiled complete bundle from `plotly.js` import Plot from 'react-plotly.js'; // customizable method: use your own `Plotly` object import createPlotlyComponent from 'react-plotly.js/factory'; const Plot = createPlotlyComponent(Plotly);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 plotly.js and the component factory with:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://unpkg.com/react-plotly.js@latest/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.
To get started:
$ npm installTo transpile from ES2015 + JSX into the ES5 npm-distributed version:
$ npm run prepublishOnlyTo run the tests:
$ npm run test
Β© 2017-2020 Plotly, Inc. MIT License.
forked from plotly/react-plotly.js
-
Notifications
You must be signed in to change notification settings - Fork 0
A plotly.js React component from Plotly π
License
sathoune/react-plotly.js
Β
Β
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Β | Β | |||
Repository files navigation
About
A plotly.js React component from Plotly π
Resources
License
Stars
Watchers
Forks
Packages 0
No packages published
Languages
- JavaScript 100.0%