Native chart animations not working in Vizro but in pure Dash

[maxschulz-COL]

Description

Chart animations of for e.g. the px.icicle (https://plotly.com/python/icicle-charts/#icicle-of-a-rectangular-dataframe-with-continuous-color-argument-in-pxicicle) do not work in Vizro, but in pure Dash.

Expected behavior

Would expect chart animation to work, and by that I mean the transitions one observes in the docs. One can also notice that the text size is not variable here in this example, but it is in the docs.

Which package?

vizro

Package version

0.1.18

Python version

3.11

OS

Mac

How to Reproduce

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
import numpy as np

df = px.data.gapminder().query("year == 2007")

page = vm.Page(
    title="My first page",
    components=[
        vm.Graph(
            figure=px.icicle(df, path=[px.Constant("world"), 'continent', 'country'], values='pop',
                color='lifeExp', hover_data=['iso_alpha'],
                color_continuous_scale='RdBu',
                color_continuous_midpoint=np.average(df['lifeExp'], weights=df['pop'])),
        ),
    ],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()

Output

No response

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[huong-li-nguyen]

Hello,

Could you explain what you mean by "native chart animation not working?" Do you refer to the font sizes not changing and the labels being hidden for certain areas? I've run the example above, but it runs as intended based on our chosen defaults.

It's important to note that we do not allow changing font sizes from a design best practice, as consistency in font sizes and setting a minimum font size for readability are important. To clarify the Vizro example works as this Dash example: https://plotly.com/python/icicle-charts/#controlling-text-fontsize-with-uniformtext

These are the defaults that cause that behaviour if you take a look at our template defaults 😊 :

  uniformtext_minsize=12,
  uniformtext_mode="hide"

I would not recommend to have changing font sizes, but if you want more labels to be visible, you can control it by changing the default for the above arguments, e.g., by creating a custom chart and changing the minimum font size allowed or always showing the labels: fig.update_layout(uniformtext=dict(minsize=11, mode="hide")).

[maxschulz-COL]

@huong-li-nguyen

Expected behavior Would expect chart animation to work, and by that I mean the transitions one observes in the docs. One can also notice that the text size is not variable here in this example, but it is in the docs.

I see - I have to admit that this is a bit confusing as I suspected a bug on the Vizro side. I would generally expect charts to behave as in the plotly docs, especially when using px directly - maybe not from a coloring perspective, but certainly for chart animations when clicking into categories.

I understand that we are trying to follow design best practices, but in many cases this seems also a matter of taste, or at least there is no one size fits all approach - I would argue that the Vizro default for the px docs example looks less good and less clear than the example in the docs. Maybe something to think about relaxing? In the end the user can very easily add this back in 🤔 ?

[huong-li-nguyen]

In the end, Vizro is very opinionated when it comes to design decisions. If you are looking for UI best practices for minimum font sizes, 12-16px is the standard number, but going below 12px is not recommended (not only from us but more generically). Our designer decided this would be 12px, which is acceptable because you can barely see smaller font sizes on bigger screens.

So, in this case, I believe the current implementation is correct. We set our default minimum font size to 12px, and if the user wants to deviate from our design recommendation, they can go below, but they need to configure it themselves.

But if you strongly disagree, feel free to open a discussion :) I just wanted you to understand why we should not go below a certain font size. In this case, my preference for building dashboards is also our current default but open to changing it if our team agrees.

[maxschulz-COL]

I get why we do not want to go below a certain font size, that makes sense, but I wonder if this requirement is worth changing a px chart in such a fundamental way.

Again, I was so confused as to why animations did not work that I opened an issue on the plotly forums - I wonder if a template should have the right to be so opinionated when it comes to changes default behaviour of charts.

Besides that, less important, I also think that default simply does not look good - do you find the above posted example actually better and more readable?

Will definitely not start a discussion on that :) Was just something I observed when actually using this chart in Vizro.

[huong-li-nguyen]

Let's pick it up in the next call - I'll close that issue for now :)