Zoom on chart not working in react-plotly.js

Question

I have created a bar chart with rangeslider using react-plotly.js. I want to enable drag and zoom feature on chart area as provided by the library. But that feature is not working for me. The fixedRange attribute of layout is not true. The cursor changes to the double arrow cursor but when I perform drag action, nothing happens. The area selected is not highlighted and not even zoomed in. But when I double click, the area get zoomed out. My layout settings looks like:

const layout = {
        title: this.state.chartTitle,
        autosize: true,
        dragmode: false,
        // showlegend: true,
        margin: {
          r: 0,
          t: 50,
          b: 100,
          pad: 0,
          autoexpand: true
        },
        scrollZoom: true,
        hoverlabel: {
          bgcolor: 'rgba(0,0,0,1)',
          bordercolor: 'rgba(200,200,200,1)'
        },
        width: this.state.layoutWidth,
        height: '750',
        yaxis: {
          title: this.state.yaxisTitle,
          type: 'linear',
          showgrid: true
        },
        xaxis: {
          title: this.props.intl.formatMessage(messages.xAxisTitle),
          type: this.state.xaxisType,
          autorange: false,
          showgrid: false,
          range: this.state.axisRange,
          rangeslider: {
            visible: true,
            range: this.state.sliderRange
          }
        }

I even tried scrollZoom attribute but that doesn't work either. The version of plotly.js and react-plotly.js that I am using is :

"plotly.js": "^1.41.3",
"react-plotly.js": "^2.2.0",
 "react-plotlyjs": "^0.4.4",

Am I suppose to also add some css settings to it ? Please help.

grenzbotin · Accepted Answer · 2019-01-15 20:56:00Z

1

Instead of putting scrollZoom: true to layout, please try to put it into the config tree, like:

const Plot = createPlotlyComponent(Plotly);

ReactDOM.render(
  React.createElement(Plot, {
    data: [...],
    layout: {...}, 
    config: {
      scrollZoom: true,
    }
  }),
  document.getElementById('root')
);

answered Jan 15, 2019 at 20:56

grenzbotin

2,5651 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2128 Over a year ago

Yup this solution worked. Also, when i changed dragmode to true the zoom started working. Not sure why though :)

Collectives™ on Stack Overflow

Zoom on chart not working in react-plotly.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related