Bar chart with `facet_row` only rendering data for one facet

[brylie]

I have a bar chart with a facet_row defined as follows, with example data.

Example code and data for `facet_row` bug

tmp_data = [
    {
        "date": "2022-04-17",
        "role_name": "Nurse",
        "work_type": "Cleaning",
        "daily_total_minutes": 45,
        "percent_of_daily_role_total_minutes": 0.41,  
    },
    {
        "date": "2022-04-17",
        "role_name": "Nurse",
        "work_type": "Food preparation",
        "percent_of_daily_role_total_minutes": 0.59,  
    },
    {
        "date": "2022-04-17",
        "role_name": "Volunteer",
        "work_type": "Cleaning",
        "percent_of_daily_role_total_minutes": 0.26,  
    },
    {
        "date": "2022-04-17",
        "role_name": "Volunteer",
        "work_type": "Food preparation",
        "percent_of_daily_role_total_minutes": 0.74,  
    },
    {
        "date": "2022-05-06",
        "role_name": "Volunteer",
        "work_type": "Food preparation",
        "percent_of_daily_role_total_minutes": 1.0,  
    },
    {
        "date": "2022-05-07",
        "role_name": "Volunteer",
        "work_type": "Cleaning",
        "percent_of_daily_role_total_minutes": 0.49,  
    },
    {
        "date": "2022-05-07",
        "role_name": "Volunteer",
        "work_type": "Food preparation",
        "percent_of_daily_role_total_minutes": 0.51,  
    },
]

daily_work_by_caregiver_role_and_type_with_percent_chart = px.bar(
    tmp_data,
    x="date",
    y="percent_of_daily_role_total_minutes",
    facet_row="role_name",
    color="work_type",
    title=_("Daily work percent by caregiver role and work type"),
    labels={
        "role_name": _("Caregiver role"),
        "percent_of_daily_role_total_minutes": _("Work percent"),
        "work_type": _("Type of work"),
    },
    text_auto=True,
)
daily_work_by_caregiver_role_and_type_with_percent_chart.layout.yaxis.tickformat = ",.0%"

# render the chart
daily_work_by_caregiver_role_and_type_with_percent_chart.to_html()

When rendering the chart, the x axis correctly determines the data are dates and the y-axis on the bottom facet is correctly formatted as a percentage with the data rendering. However, the top facet doesn't render any data.

I have tried both with and without specifying the yaxis.tickformat and get a similar result, where the first facet series doesn't render any data.

[brylie]

@nicolaskruchten, sorry to bother you. Could you see if there is an obvious error in my example code or if this might be a legitimate bug?

[nicolaskruchten]

So what's happening here is that the upper facet has only one day's worth of data in it, and the automatic calculation of the bar width results in a single extremely thin bar being shown around midnight of April 17 (the bar is less than a millisecond wide). This is pretty counter-intuitive but that's what's happening. You can force the bars to be one day wide by calling .update_traces(width=24*60*60*1000) on the figure.

@alexcjohnson I can see this being more or less reasonable behaviour for a single subplot, but for matched axes, I could also see the bar width being computed while taking into account all bars on the whole set of axes, no?

[alexcjohnson]

Right, in fact seems like any bar (or histogram) traces created by splitting a single data set via px should get matching bar widths. But I'm not sure it's quite as simple as "bar widths are based on all traces across all matching axes" - even on a single axis we don't harmonize all bar widths when we're in overlay mode, and outside of px there are various cases you might want different widths - one subplot has yearly bars, the next has quarterly, for example.

I'd have thought that alignmentgroup would do exactly this across subplots with matching axes, and I see that px does set alignmentgroup the same for all these traces. So perhaps with that addition your statement is correct - all bar traces with the same alignmentgroup across matching axes should be treated as a unit for the purpose of calculating bar widths?

[nicolaskruchten]

Yeah, I feel like we probably discussed this when implementing alignmentgroup but maybe we just focused a lot on categorical axes? Should we provisionally consider this one a bug you think @alexcjohnson? Certainly if we agree that there's some principled reason for alignmentgroup not doing this, we probably need yetanothergroup for it, because forcing users to force this is a pretty rough.

As an aside, I wonder if the automatic width couldn't be a biiiit smarter: if the date is at midnight, maybe make the width a day? if the date is at the hour, make it an hour etc?

[alexcjohnson]

Yes, let's consider this a bug, I don't see any reason alignmentgroup shouldn't cause matching widths across matching axes.

It's true, the current auto behavior is essentially never what anyone wants on a date axis. I'd be comfortable giving it a little more smarts, so the trace is less likely to look completely blank.

[nicolaskruchten]

Yes, let's consider this a bug, I don't see any reason alignmentgroup shouldn't cause matching widths across matching axes.

OK, I'll make a Plotly.js issue for it!

I'd be comfortable giving it a little more smarts, so the trace is less likely to look completely blank.

Cool. Probably would need to be opt-in for backwards-compatibility.

[alexcjohnson]

Cool. Probably would need to be opt-in for backwards-compatibility.

Let's just change to the "smarter" behavior. I bet there's literally nobody depending on this width to be 1ms.

[nicolaskruchten]

OK, followup issues created:

• Bars in the same alignmentgroup should have the same width plotly.js#6198
• Default bar width on date axes should be smarter plotly.js#6199

[brylie]

You can force the bars to be one day wide by calling .update_traces(width=24*60*60*1000) on the figure.

The update_traces suggestion is a great, temporary fix to this edge case.

However, there is a second issue with the chart where the y-axis formatting is not being applied to the sub-plots:

example code emphasizing y-axis formatting

daily_work_by_caregiver_role_and_type_with_percent_chart = px.bar(
    tmp_data,
    x="date",
    y="percent_of_daily_role_total_minutes",
    facet_row="role_name",
    color="work_type",
    title=_("Daily work percent by caregiver role and work type"),
)

# Format y-axis as percentages
# since this is declared on the top-level chart object
# it would seem intuitive that all sub-plots/facets would have the same tickformat
# as is the case with all other declarations like x/y-axis columns and color
daily_work_by_caregiver_role_and_type_with_percent_chart.layout.yaxis.tickformat = ",.0%"

In the code example, the y-axis tickformat is applied to the top-level chart layout. Intuitively, this tickformat would apply to all sub-plots/facets similarly to how the categorical colors are defined once and apply to the sub-plots.

Should the tickformat issue be split out from this discussion, if it hasn't been discussed previously (a quick issue search didn't turn up any relevant results)?

[nicolaskruchten]

So the issue is that this line daily_work_by_caregiver_role_and_type_with_percent_chart.layout.yaxis.tickformat = ",.0%" only applies the tick formatting to yaxis but there are two y axes in this plot: yaxis and yaxis2. In general when mutating the output of Plotly Express functions, you're best off using the .update_*() methods which can apply a mutation to add instances of *: .update_traces() or .update_yaxes() or .update_xaxes() etc.

So if you do daily_work_by_caregiver_role_and_type_with_percent_chart.update_yaxes(tickformat = ",.0%") then the tick formatting will be applied to all y axes, whether there are one, two or more :)