Plotly.js with vue disappearing charts on resize and data change

1
votes

I'm using Ploty with Vue wrapper Vue-Plotly and I want to dynamically change the data on the plot I use a function that changes the value of the data that is sent to the Ploty plot (which is responsive).

methods: {
    changelayout() {
      this.data[1].x = [10];
    },
  }

It works well, the data is updated and plot is also updated. However there is some unexpected behavior happening, when I resize the window, the plot kind of collapses and other components cover it (it seems to collapse to the top, so when there are multiple plots they all collapse into one place). For instance if I have two plots positioned one above the other, the second one will cover the first one. You can see this behavior in action here:

https://codesandbox.io/s/vuetify-playground-xbgcv?file=/src/layout.vue

When you click on the button, and resize window this will happen ( or resize then click i think also works to reproduce the issue)

In the options I set the responsive to true for the plot and this is what seems to be breaking the chart:

  options: {
        displayModeBar: false,
        responsive: true,
      },

Is there a way to have the plot anchored so that it wont hide behind other components on window resize and still keeps being responsive?

1
cssvue.jsvuejs2plotlyvuetify.js

1 Answers

2
votes

The SVGs have position: absolute which means they take up no space in their parent divs. To compensate for that, their parent divs, .svg-container, have a fixed height of 90px (pixel).

After the button click .svg-container changes to height: 100% (percent), which is not fixed, so they shrink.

If you give them a fixed height (with !important) they will keep it:

.svg-container {
   height: 90px !important;
}