[Demo] Fix diverging stacked bar

[huong-li-nguyen]

Description

• Fix order of traces to be consistent with legend order
• A couple of open questions / thoughts I would like to discuss later @antonymilne

Screenshot

Before:

After:

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2024-11-13 14:09:33 UTC
Commit: c452232

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[huong-li-nguyen]

This previously worked fine, but now it currently does not work anymore 🤔 It just changes the range of the positive side. Is there another way of doing this now? Without this, the chart is actually misleading. The bars of the negative side look longer than the ones on the positive side, even though the actual value is smaller. They need to share the same axes range, otherwise it's visually confusing.

[huong-li-nguyen]

Declutter chart - axes labels and legend titles are redundant here

[huong-li-nguyen]

@antonymilne to double-check range

[antonymilne]

Suggested change

fig.update_xaxes(ticksuffix="%", range=[0, 100])

This is what we want instead of lines 296-299 above. We were right to try and set the range in reverse as [100, 0] earlier. The problem before was that autorange="reversed" was overriding that.

    fig.update_layout({f"{x_or_y}axis": {"ticksuffix": "%"}})
    fig.update_layout({f"{x_or_y}axis2": fig.layout[f"{x_or_y}axis"]})
    fig.update_layout(
        {
            f"{x_or_y}axis": {"domain": [0, 0.5], "range": [100, 0]},
            f"{x_or_y}axis2": {"domain": [0.5, 1], "range": [0, 100]},
        }
    )

I think maximum range of 100 makes more sense than 80 for this plot as a general thing and it looks ok for the example given so I'd go for that. Otherwise we'd need to calculate it dynamically by finding the maximum of x values shown and it's not worth the effort.

[antonymilne]

Suggested change

fig.update_xaxes(ticksuffix="%", range=[0, 100])

This is what we want instead of lines 296-299 above. We were right to try and set the range in reverse as [100, 0] earlier. The problem before was that autorange="reversed" was overriding that.

    fig.update_layout({f"{x_or_y}axis": {"ticksuffix": "%"}})
    fig.update_layout({f"{x_or_y}axis2": fig.layout[f"{x_or_y}axis"]})
    fig.update_layout(
        {
            f"{x_or_y}axis": {"domain": [0, 0.5], "range": [100, 0]},
            f"{x_or_y}axis2": {"domain": [0.5, 1], "range": [0, 100]},
        }
    )

I think maximum range of 100 makes more sense than 80 for this plot as a general thing and it looks ok for the example given so I'd go for that. Otherwise we'd need to calculate it dynamically by finding the maximum of x values shown and it's not worth the effort.