Responsiveness of 2 graphs on the same page

[ped59430]

Hi, I am under the impression that there are special cases when 2 graphs cannot update their width at the same time. I have a Vue page with 2 graphs. The size of the graph 2 is not updating. If I remove the graph 1, then the graph 2 updates properly. I really cannot figure out why !

[ped59430]

What I mean by special is:

• I use element-ui
• It happens when I set a fixed height to both graphs, either by style="height:600px" or in the layout object with height : 600.
• It only happens in a Tab component
• When the Tab is not the default first active Tab

Would you have any knowledge on the responsive mechanism that would explain this behaviour?

[ped59430]

In src/components/Plotly.vue, I have seen: return Object.assign(optionsFromAttrs, { responsive: false });

Is there a reason that on any passed option responsive is set to false?

[ped59430]

For some unknow reasons, the autosize: true attribute is not passed to the innerLayout of the second graph.

When I force it in my layout:

layout: {
  autosize: true
}

I have:

And the graph extends to the current window size graph ! But it is not yet responsive to changes.

And I still have:

[ped59430]

I removed any custom heights for the moment. I hope it is possible to see

For the record, without any options, and my graphs being really responsive, I still have:

[Codermar]

In src/components/Plotly.vue, I have seen: return Object.assign(optionsFromAttrs, { responsive: false });

Is there a reason that on any passed option responsive is set to false?

I am not sure why but I also need to be able to pass the responsive option in. I'll create a PR for that

[Codermar]

Added https://github.com/David-Desmaisons/vue-plotly/pull/12 Dependency updates and remove responsive: false override

[David-Desmaisons]

@Codermar responsive is set to false because responsiveness is provided by vue-resize that offers reactivity based on resize on the main element (plotty responsiveness only reacts to window size changes - at least at the tim at testesd it). So you would not need to set { responsive: true } as a plotly options. Try the online example https://david-desmaisons.github.io/vue-plotly/ it resize without problem.

So to make yopur component responsive you just need to include it in a responsive container and it will work.

[Codermar]

@David-Desmaisons I did try and it does not work for me actually. It does a resize on expanding the page but not on resize down and my container is responsive so something must be going on there. Maybe it is related to the fact that my code applies data and layout dynamically and the resize down does not get triggered. Regardless, I think forcing the option to false in the component goes against the claim that options are transparent though. Perhaps it can be set only if the user did not specify it.

[David-Desmaisons]

@Codermar I don't remenber why but I had to set the responsive to false because it was not playing well with the resize provided by the directive.

Maybe it is related to the fact that my code applies data and layout dynamically and the resize down does not get triggered.

Could you provide an animated gif of the scenario with and without changing responsive to true. I am curious of you user case.

Perhaps it can be set only if the user did not specify it.

Definitivelly a better option than forcing it to true.

[Codermar]

Sure, I just emailed you the animated gif that show the issue. In the meantime though, can you check this alternative code in my PR which will fix my problem and will be compatible with the existing implementation? https://github.com/David-Desmaisons/vue-plotly/pull/12/commits/20dbf4f4b0a17ca231bf761972b32077a14585a8 Then merge and publish if you are ok with it. Thanks

[David-Desmaisons]

With responsive option set to false:

With responsive option set to true:

[David-Desmaisons]

Fixed in version 1.1.0