David-Desmaisons / vue-plotly

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

Rangeslider not working in fullscreen #9

Closed alexmario74 closed 5 years ago

alexmario74 commented 5 years ago

I'm working on a multiple tracks graph that should appear in fullscreen.

The graph works fine with zoom and selectors, but when open in fullscreen the rangeslider is not working.

When I come back from fullscreen it works again, and some times the mouse is attached to the rangeslider as moving the mouse implies moving the rangeslider selector.

If I change the size of the window the graph works pretty well, it resize and then I can use the rangeslider with no issue.

Just on fullscreen it doesn't work.

Here is the component:

  <Plotly
      :data="tracks"
      :layout="layout"
      :displaylogo="false"
      :modeBarButtonsToRemove="[
        'sendDataToCloud','hoverCompareCartesian','hoverClosestCartesian',
        'autoScale2d', 'lasso2d','select2d','autoScale2d','toggleSpikelines',
        'home'
        ]"
    ></Plotly>

The layout:

...
    layout: {
        title: "Measure",
        responsive: true,
        showlegend: false,
        xaxis: {
          rangeselector: {
            buttons: [
              {
                step: "all"
              },
              {
                step: "day",
                stepmode: "backward",
                count: 3,
                label: "3 days"
              },
              {
                step: "day",
                stepmode: "backward",
                count: 1,
                label: "1 day"
              },
              {
                step: "hour",
                stepmode: "backward",
                count: 12,
                label: "12 hours"
              }
            ]
          },
          rangeslider: {}
        },
        yaxis: {
          zeroline: false
        },
        yaxis2: {
          range: [0, 300],
          side: "right",
          overlaying: "y",
          anchor: "x"
        }
...
David-Desmaisons commented 5 years ago

Please check the plotly repo, as vue-plotly only provides binding to vue.

alexmario74 commented 5 years ago

Ok, I just checked it is a Plotly.js issue.

Sorry, I'll close this, and open an issue the plotly project.

Thanks.