Layout does not update when the chart gets a different set of data - revision and layout.datarevision don't work

[GeorgeFlorian]

I am trying to update a whole bar chart using Plotly React. First I have a bar chart with bars on vertical, then after I click wherever on the chart I would like to rotate the chart 90 degrees and have the bars on horizontal with different data. So X axis becames Y and vice-versa.

I have tried using the revision prop of the <Plot /> component and the layout.dataverision property but it doesn't work. When I click on the chart, it just empties.

I have

  const onUpdate = (event) => {
    console.log('update', event);
  };

which logs the appropriate data and layout in console before and after the click.

Basically the data updates but the layout does not and the issue comes from the x and y axis trying to display the same type data and not assessing what is the new data.

// here xaxis thinks it has to display strings
// and yaxis thinks it has to display numbers
// which is correct only for the first set of data
xaxis: {autorange: true, range: Array(2), type: "category"},
yaxis: {autorange: true, range: Array(2), type: "linear"}
// the second set of data reverses the x and y axes, so the new properties should be:
xaxis: {autorange: true, range: Array(2), type: "linear"},
yaxis: {autorange: true, range: Array(2), type: "category"}

How can I make Plotly asses the new data and update the layout accordingly ?

Thank you.

https://codesandbox.io/s/elegant-williams-jofx90?file=/src/BarChart.js

import { useEffect, useState } from "react";
import Plot from "react-plotly.js";

export default function BarChart() {
  const [chart, setChart] = useState({
    data: [],
    layout: {
      title: "Some BarChart",
      showlegend: true,
      legend: {
        x: 0,
        y: -0.4,
        orientation: "h"
      },
      autosize: true,
      barmode: "stack",
      datarevision: 0
    },
    config: { responive: true },
    revision: 0
  });

  useEffect(() => {
    const farm1 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [10, 12, 14, 16],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };
    const farm2 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [8, 10, 12, 14],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: { ...prevState.layout }
    }));
  }, [setChart]);

  const onUpdate = (event) => {
    console.log("update", event);
  };

  const onClick = (event) => {
    const farm1 = {
      x: [10, 12, 14, 16],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    const farm2 = {
      x: [8, 10, 12, 14],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: {
        ...prevState.layout,
        datarevision: prevState.layout.datarevision + 1
      },
      revision: prevState.revision + 1
    }));

    console.log(event.points[0].x.replaceAll("<br>", " ").trim());
  };

  return (
    <Plot
      data={chart.data}
      layout={chart.layout}
      config={chart.config}
      revision={chart.revision}
      style={{ width: "100%", height: "100%" }}
      useResizeHandler
      onClick={onClick}
      onUpdate={onUpdate}
    />
  );
}