Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError : fullLayout is undefined #23

Open
benjaminh opened this issue Sep 1, 2020 · 1 comment
Open

TypeError : fullLayout is undefined #23

benjaminh opened this issue Sep 1, 2020 · 1 comment

Comments

@benjaminh
Copy link

Hello,

I'm using vue-plotly for simple plots but I get a recurrent error in console :

Uncaught (in promise) TypeError: fullLayout is undefined
    emitAfterPlot vue-plotly.umd.js:140916
    plot vue-plotly.umd.js:140908

I've managed to reduce my component to a minimal example to help you reproduce the error and hopefully guide me through the resolution of this issue.

Here is my component MyPlot.vue:

<template>
      <Plotly 
          v-if='!loading'
          :data.sync="data"
          :layout="layout"
      ></Plotly>
      <div 
          v-else
          class="text-center"
      >
        <v-progress-circular
          indeterminate
          color="primary"
        ></v-progress-circular>
      </div>
</template>

<script>
import { Plotly } from 'vue-plotly'

export default {
  components: {
    Plotly
  },
  data () {
      return {
        data: [],
        layout:{
            title: "My graph",
            showlegend: true,
        },
        loading:false
      }
  },
  mounted () {
    this.loading = true;
    this.loadData().then(data => {
      this.data = Object.seal(data);
      this.loading = false;
    });
  },
  methods: {
      loadData () {
        return new Promise((resolve) => {
          let data = [{
            x: [1,2,3,4],
            y: [10,15,13,17],
            type:"scatter"
          }];
          resolve(data);
        });
      }
  }
}
</script>

The mounting part may be overkill but this is relevant to my use case as I call my Vuex store and do some processing before plotting data.
It looks like the problem comes from the combination of the v-if/v-else template, and the way I load my data using promise. Indeed, removing one part or the other seems to work.
What vue-plotly is complaining about ? Sorry if this is a rookie error, I'm still learning vuejs.

Any ideas to solve/investigate this error ?

@WenyinWei
Copy link

WenyinWei commented Nov 9, 2020

vue_plotly_conflicts_with_electron-builder

Seems that I also have similar trouble, when I use vue-cli-plugin-electron-builder to help me build an app. vue-plotly works well under npm run electron:server mode, however, it turns out that pages containing vue-plotly are all blank as a result of application create by npm run electron:build. I guess there is some conflict between vue-plotly and chunk-vendors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants