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.
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 ?
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 thelayout.dataverision
property but it doesn't work. When I click on the chart, it just empties.I have
which logs the appropriate
data
andlayout
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.
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