I’m using plotly.js to work on a bar chart and want to create two buttons to switch between horizontal and vertical views.

However, my code for the change in x-axis doesn’t seem to work.

Below are screenshots of the malfunction and my code:

Horizontal view image

Vertical view image (x-axis did not switch, y-axis not in counts but in categories)

    var data = [
    //horizontal graph
    {
      type: 'bar',
      x: xData2,
      y: yData2,
      marker: {
        color: 'rgba(255, 100, 102, 0.7)',
      },
      name:'Bar Chart',
      orientation:'h',
      xaxis: { title: 'Count' },
      yaxis: { title: xAxisAttribute },
      
    },
    //vertical graph
    {
      type: 'bar',
      y: yData,
      x: xData,
      orientation:'v',
      marker: {
        color: 'rgba(255, 100, 102, 0.7)',
      },
      name:'Bar Chart',
      visible: false
    }]
  var button_layer_2_height = 1.2;
  var updatemenus=[
      {
          buttons: [
              {
                  args: [{'visible': [true, false]}],
                  label: 'Horizontal View',
                  method: 'update'
              },
              {
                  args: [{'visible': [false, true]}],
                  label: 'Vertical View',
                  method: 'update'
              },
          ],
          direction: 'left',
          pad: {'r': 10, 't': 10},
          showactive: true,
          type: 'buttons',
          x: 0.1,
          xanchor: 'left',
          y: button_layer_2_height,
          yanchor: 'top'
      },
  ]  
  let layout = {
    title: title || 'Untitled',
    autosize: true,
    hovermode:'closest',
    updatemenus: updatemenus,
    };

  return (
    <div>
      <Plot
        data ={data}
        layout = {layout}
        config = {config}
          />
      </div>
    ) 
    }

Thanks in advance!