vue-plotly
vue-plotly copied to clipboard
TypeError : fullLayout is undefined
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 ?
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.