plotly / plotly/react-plotly.js
Graphs do not render in PopOS React App
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.1k
- Forks
- 138
- Avg merge
- 3d 2h
- Merged PRs (30d)
- 4
Description
I am making a React app using Plotly connected to a flask backend. However, my graphs only display as white squares that when hovered over display the plotly toolbar.
This is a picture of what it looks like: here
When I use the command npm start, I get this message which might have something to do with it:
WARNING in ./node_modules/plotly.js/dist/plotly.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map' file: Error: ENOENT: no such file or directory, open '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map'
Can anyone help me figure out why my plotly graphs are not displaying at all?
My code seems relatively straightforward as I hard coded the numbers to begin with just to get something going:
import React from 'react';
import Plot from 'react-plotly.js'
function Portfolio() {
const growthPortfolio = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const valuePortfolio = [{
values: [30, 40, 30],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const totalPortfolio = [{
values: [45, 35, 20],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
return (
<div>
<Plot data={growthPortfolio} />
<Plot data={valuePortfolio} />
<Plot data={totalPortfolio}/>
</div>
);
}
export default Portfolio;
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the React component containing the three elements and reproduce the blank charts with npm start on the reported Pop!_OS setup. Check the browser output and determine whether the source-map warning is related to the rendering failure. Done means the hard-coded pie charts render visibly and the cause is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100