Hello. I have been trying to use plotly charts in React. I have defined the component given below, and have used it simply using in the render() method of another component.
Upon starting the server using node run dev, I see the chart once, but upon reloading, I get the following error. I desperately need some help around this. Thanks
ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.58
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (9085:9)
o
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:631)
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:682)
Object.503…/constants/numerical
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (128767:10)
o
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:631)
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:682)
Object.1…/src/lib
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (10:11)
o
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:631)
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (7:682)
Object.481…/build/plotcss
file:///C:/Users/gawad/OneDrive/Desktop/526/Project/material-kit-react-main/bikelytics-mui/bikelytics-mui/node_modules/plotly.js/dist/plotly.js (125575:1)
import React from “react”;
import Plot from “react-plotly.js”;
class ScatterMap extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [{
values: [19, 26, 55],
labels: [‘Residential’, ‘Non-Residential’, ‘Utility’],
type: ‘pie’
}],
layout: {
height: 400,
width: 500,
title: “Pie chart”
}
};
}
render() {
return (
<div style={{ width: “100%”, height: “100%” }}>
<Plot
data={this.state.data}
layout={this.state.layout}
onInitialized={(figure) => this.setState(figure)}
onUpdate={(figure) => this.setState(figure)}
/>
);
}
}
export default ScatterMap;