[🐛 BUG] Default go.Figure title position overridden to center by dark mode theme

[arcanaxion]

What went wrong? 🤔

I have created a plotly figure with a title without specifying the title position. When I switch taipy to dark mode, the figure's theme is updated (which is great) but the title is undesirably centered.

Expected Behavior

Title position should be consistent between modes.

Steps to Reproduce Issue

import taipy.gui.builder as tgb
from taipy.gui import Gui
import pandas as pd
import plotly.express as px


df = pd.DataFrame({"x": range(1000)})
df["y"] = df["x"] ** 3

fig = px.line(df, x="x", y="y", title="Chart title")
# fig.update_layout(title=dict(text="Chart title", x=0, xanchor="left", xref="paper"))  # This is a workaround


with tgb.Page() as page:
    tgb.toggle(theme=True)
    tgb.text("# Chart title in dark mode", mode="md")
    with tgb.layout(columns="1 1", gap="1em"):
        with tgb.part():
            tgb.chart(figure="{fig}")
        with tgb.part():
            tgb.chart("{df}", x="x", y="y", layout={"title": "Chart title"}, mode="lines")


Gui(page).run(dark_mode=False)

Screenshots

1. Left chart: go.Figure
2. Right chart: Taipy syntax

Light mode:

Dark mode:

Title in the left chart was centered when switching to dark mode.

Browsers

Chrome, Firefox

OS

Windows, Linux

Version of Taipy

4.0.1

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[FredLL-Avaiga]

I didn't see any title positioning rule in the dark template used for plotly

taipy/frontend/taipy-gui/src/themes/darkThemeTemplate.ts

Line 1 in 880f343

export const darkThemeTemplate = {

[arcanaxion]

@FredLL-Avaiga

The default python plotly template is setting the title position:

> import plotly.io as pio
> pio.templates["plotly"]["layout"]["title"]
layout.Title({
    'x': 0.05
})

Might it be a good solution to nested merge fig.layout.template with the dark mode template and apply it?

[FredLL-Avaiga]

Good catch