Увеличение диаграммы не работает в Reaction-plotly.js

Question

Я создал гистограмму с помощью rangelider, используя response-plotly.js. Я хочу включить функцию перетаскивания и масштабирования в области диаграммы, как это предусмотрено библиотекой. Но эта функция не работает для меня. Атрибут fixedRange макета неверен. Курсор изменится на курсор с двойной стрелкой, но когда я выполняю перетаскивание, ничего не происходит. Выбранная область не выделяется и даже не увеличивается. Но когда я дважды щелкаю, область уменьшается. Мои настройки макета выглядят так:

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
          }
        } 

Я даже попробовал атрибут scrollZoom, но он тоже не работает. Я использую версию plotly.js и Reaction-plotly.js:

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

Должен ли я также добавить некоторые настройки CSS к нему? Пожалуйста, помогите.

Answer 1

вместо того, чтобы положить scrollZoom: true в макет, попробуйте поместить его в дерево конфигурации, например:

const Plot = createPlotlyComponent(Plotly);

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