I have 2 side by side bar charts, one has 2 levels and one has 3. I want to control the ordering at all the levels and have it be the same for the common levels of the 2 charts. It seems I can only control the ordering at the top level.
Here are what the 2 charts are rending as:
I want the landing zones (Dynamic Container, Public Cloud, Static Container, etc.) to be in the same order on both charts, and within each landing zone, the R* bars (Refactor, Rhost, etc.) to be in the same order. How can I do this?
You still can’t do that per se, BUT, given your data, there is a possible hack: change the order in which the colors are processed.
Explanation:
- Plotly will plot traces one after the other (in your case, on your right chart, Load Balancer, then Mobile Application, etc)
- Here, what happens is that ‘Load balancer’ has only (‘Public Cloud’, ‘Rehost’) and (‘Static container’, ‘Revise’)
- Thus, Plotly will put, in each subcategory, first Rehost, then Revise
- Iteratively, you’ll find out the order in which the different entries of the X-axes are inserted
Now the issue of the hack is to find the order of the colors such that both the two levels have the expected order
I think ‘Mobile Application’, then ‘Other’, then whatever order for the remaining colors, does the trick
EDIT: An other solution is to artificially add all possible second-level keys (Rebuilt, Refactor, etc) to the combination (first first level-key, first color) you want to display (here, [Dynamic container, Load balancer]), with a value of 0. This will force Plotly to draw everything with right order. The drawback is that you will have empty slots in your bar chart…
Hoping a real solution will be implemented soon 
