Autoscale automatic does not work!

plotly.js
1

Team Plotly,

I am using ReactJS to prepare a Dashboard. Each component on the Dashboard is a different type of graph, as shown below:

image.png1128×848 34.4 KB

The problem is with the Scatter/Line plot at the bottom. When the page loads, the Scatter plot is blank with the axes centered at (0,0), whereas my actual data points start around (18.2, 10). I have to manually click on the autoscale button on the Scatter graph to make it look like the image shown above.

One of the posts in the forum suggested using relayout as shown below.

This does not seem to work in my case!

code: https://github.com/dineshauti/ReactDashboard/blob/master/src/components/scatter.js

Any help would be appreciated :slight_smile:

2

This is just a guess, but I might try importing Plotly by its npm package (instead of the CDN in your index.html)?

Like this:

3

Thanks for the feedback Jack!
Get this error:

image.png1524×351 42.2 KB

4

Got rid of the above error. The code compiles but with a warning:

image.png1517×149 11.6 KB

5

Hi Dinesh, we cloned your repo and the HTTP request for fetching the data didn’t work, have you got a branch that has mock data i.e. no external dependency? Even better if you can isolate the specific chart and just pass on a mock {data: […], layout: {…}} example i.e. a minimally reproducing problem case with a couple of data points.

1 Like