search

David-Desmaisons / vue-plotly

📈 vue wrapper for plotly.js
https://david-desmaisons.github.io/vue-plotly/
MIT License
255 stars 74 forks source link

Update to layout property does not trigger react or relayout #20

Open gaojunxuan opened 4 years ago

gaojunxuan commented 4 years ago

The component does not react to changes to the layout property. I was trying to add and remove plot annotations by changing the layout prop, but the component does not react to the change.

For example, I have a Plotly component whose data and layout properties are bind to this.data and this.layout

<Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>

In a separate method, I tried to remove all annotations from the plot.

this.$delete(this.layout, 'annotations');

However, in order for the change to be reflected in the Plotly component, I have to somehow reload the data prop like so

this.$delete(this.layout, 'annotations');
this.data = [...this.data]

In the documentation for poltly.js, it mentioned that certain changes to the layout property do require calling Plotly.react or Plotly.relayout

acommend commented 3 years ago

I've encountered the same issue. The problem manifests for me when trying to toggle the visibility of a plotly chart legend. Initially I tried to reset only the layout but found that when resizing the browser that the chart was no longer responsive. Forcing the data to reset whenever I reset the layout seems to fix the issue.

vue-plotly: 1.1.0 vue: 2.6.11 vuetify: 2.3.8

soichih commented 3 years ago

It looks like layout object is not being watch with "deep: true". I believe this can be fixed by setting it to true like it does for data:

https://github.com/David-Desmaisons/vue-plotly/blob/master/src/components/Plotly.vue#L48