React-native-plotly NPM

react-native-plotly

Use plotly.js in React Native! (plotly.js v2.8.1)

Installation

$ npm install react-native-plotly

How

Under the hood, react-native-plotly is just a webview that has plotly.js injected into it. The plotly.js code is stored on the device, so it will work offline. react-native-plotly also provides methods for calling into the webview with updates to the chart data and layout.

Limitations

The plotly.js code is loaded into the webview using injectJavaScript. This adds some latency between when the component is initially rendered, and when you first see the chart (usually 1-3 seconds).

Compatability

The latest version of this library depends on react-native-webview (tested with v11.2.3). v1.0.0 of this library and below used the webview from react-native.

Usage

import Plotly from 'react-native-plotly';

render() {
  const data = {
    x: [1, 2, 3, 4, 5],
    y: [1, 2, 3, 4, 8],
    type: 'scatter',
  };
  const layout = { title: 'My cool chart!' };

  return (
    <Plotly
      data={data}
      layout={layout}
    />
  )
}

Props

key	value	description
data	plotly.js Data[]	(required) Chart data
layout	plotly.js Layout	Chart layout
config?	plotly.js Config	Chart config
style?	style	Style to be applied to the WebView (default is { flex: 1 })
onLoad?	fn()	Called when the plot loads for the first time
enableFullPlotly?	boolean	Setting this to true will load the full plotly bundle instead of the basic bundle. May cause problems and slower load times, particularly on versions of RN < 60
debug?	boolean	If true, if any errors occur in the webview, they will show up on the chart
update?	fn()	described below

By default, every time the Plotly component's props change, the chart is updated using Plotly.react. If you want to override this behavior, you can pass a function as the update prop, and manually call the plotly update functions. The update function signature is:

function update(
  currentProps: UpdateProps,
  nextProps: UpdateProps,
  updateFns: UpdateFunctions
);

type UpdateProps = {
  data: Data[];
  layout: Layout | undefined;
  config: Config | undefined;
};

type UpdateFunctions = {
  react: (data: Data[], layout?: Layout, config?: Config) => void;
  relayout: (layout: Layout) => void;
  restyle: (data: Data, index: number) => void;
};

currentProps is the current data, layout, and config props

nextProps is the upcoming data, layout, and config props

updateFns is an object with three properties: react, relayout and restyle. You can call these functions to update the chart. Details about what these functions do can be found here