Chart re-size not working

plotly.js
1

I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn’t change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.

I applied useResizeHandler property and have set autosize to true. But that doesn’t make any difference either.
<Plot
useResizeHandler
style={{ width: ‘100%’ }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={‘scatter’}
layout={this.layout} />

     const layout = {
          autosize: true,
          dragmode: true,
          margin: {
            l: 5,
            r: 5,
            t: 10,
            b: 10,
            pad: 0,
            autoexpand: true
          },
          hovermode: 'closest',
          hoverlabel: {
            bgcolor: 'rgba(0,0,0,1)',
            bordercolor: 'rgba(200,200,200,1)'
          },
          height: '650',
          yaxis: {
            visible: false
          },
          xaxis: {
            autorange: false,
            showline: true,
            fixedrange: false, // true disables range selection on main graph
            rangeslider: {
              range: this.state.sliderRange,
              visible: true,
              borderwidth: 1,
              bordercolor: '#000'
            }
          }
        };
      }

34%20PM
Screen Shot 2019-05-08 at 5.41.34 PM.png2127×874 134 KB

As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.

Can I customize svg-container or main-svg ? I see that when it does re-size(by force), the width is randomly set for both the div elements. What part of the code is responsible for it ? I tried applying the value of width in css file but that doesn’t work either. It uses programmatically generated value only.

2

Thanks for reporting.

To help us out, could you try to replicate the problem in a jsFiddle/jsBin or codepen? Thank you!