plotly is undefined in react

Question

i am creating a weather app in react which shows the weather forcast in a graph using the api but i am getting an error plotly is undefined although i have pasted cdn of plotly in my index.html

index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />


    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>


  </body>
</html>

plot.js

import React, { Component } from 'react'

export class Plot extends Component {

    drawPlot = () => {
        Plotly.newPlot('plot',[{
            x:this.props.xData,
            y:this.props.yData,
            type: this.props.type

        }],

Roman Unt · Accepted Answer · 2020-01-25 19:18:44Z

1

Because it is undefined in your global scope, try to console Plotly object outside of the component. If you're using Webpack for bundling try to install Plotly as an NPM package. Then import it to your project with ES6 import

answered Jan 25, 2020 at 19:18

Roman Unt

8937 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bushra Akram Over a year ago

i installed plotly using npm install plotly command in my folder but it is still giving me the same error

Roman Unt Over a year ago

You can also try to use react-plotly plot.ly/javascript/react as well

Daniyal Tariq · Accepted Answer · 2020-10-02 08:25:13Z

1

It is undefined in the global scope, install plotly by npm.

npm install plotly.js

And import it in your as

import Plotly from 'plotly.js';

GitHub Reference

answered Oct 2, 2020 at 8:25

Daniyal Tariq

2011 gold badge4 silver badges13 bronze badges

Comments

Mohammad Shawer Khandariya · Accepted Answer · 2022-04-22 05:00:35Z

0

Install "plotly.js-dist" package from npm npm install plotly.js-dist and than import Plotly from "plotly.js-dist"; in Plot.js component

answered Apr 22, 2022 at 5:00

Mohammad Shawer Khandariya

11 bronze badge

Collectives™ on Stack Overflow

plotly is undefined in react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related