Plotly.js in a React Native Webview

react-native-plotly Use plotly.js in React Native! (plotly.js v1.50.1)


$ npm install react-native-plotly


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.


  • 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).


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


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 (


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

Download Details:

Author: rynobax

Live Demo:


#react-native #programming #reactjs

Plotly.js in a React Native Webview
12.90 GEEK