[Feat] Make charts transparent when used inside dashboard (#1005)

vizro-core/changelog.d/20250210_184928_huong_li_nguyen_make_charts_transparent.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Removed
+
+- Remove export png button from modebar inside `Graph`. ([#1005](https://github.com/mckinsey/vizro/pull/1005))
+
+
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Make chart background transparent when used inside dashboard. ([#1005](https://github.com/mckinsey/vizro/pull/1005))
+
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/docs/pages/user-guides/custom-css.md

@@ -355,7 +355,7 @@ By default, the logo appears in the top left corner of the dashboard. You can mo
 
 If you want to make the subsections of your dashboard stand out more, you can do this by placing your components inside a [Container](container.md) and changing the container's styling, for example, background color, borders, padding, etc.
 
-To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on [identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the `Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`.
+To do this, you need to change the container's CSS class. Using the DevTool, as explained in the section on [identifying the correct CSS selector](#identify-the-correct-css-selector), you'll find that the CSS class for the `Container` is `page-component-container`. You can then use this class to set a new `background-color` and `padding`. Chart backgrounds are transparent so they automatically match the background color of the container.
 
 !!! example "Style a container"
     === "custom.css"
@@ -439,31 +439,6 @@ To do this, you need to change the container's CSS class. Using the DevTool, as
     === "Result"
         [![StyleContainer]][stylecontainer]
 
-You will notice that the background colors of the charts are different. To align it with the colors of the container, you can make the charts' background transparent.
-
-To make the background of all charts transparent:
-
-```py
-import plotly.io as pio
-
-pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-```
-
-To make the background of selected charts transparent:
-
-```py
-@capture(graph)
-def custom_chart(data_frame):
-    ...
-    fig.update_layout(paper_bgcolor="rgba(0, 0, 0, 0)", plot_bgcolor="rgba(0, 0, 0, 0)")
-    return fig
-```
-
-![Transparent charts](../../assets/user_guides/custom_css/transparent-charts.png)
-
 [assetscss]: ../../assets/user_guides/assets/css_change.png
 [cardcss]: ../../assets/user_guides/assets/css_change_card.png
 [pagetitle]: ../../assets/user_guides/assets/css_page_title.png

vizro-core/examples/scratch_dev/app.py

@@ -4,8 +4,21 @@
 import vizro.plotly.express as px
 from vizro import Vizro
 
+iris = px.data.iris()
+
 page = vm.Page(
-    title="foo", components=[vm.Graph(figure=px.scatter(data_frame=px.data.iris(), x="sepal_width", y="sepal_length"))]
+    title="Page with subsections",
+    layout=vm.Layout(grid=[[0, 1]]),
+    components=[
+        vm.Container(
+            title="Container I",
+            components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
+        ),
+        vm.Container(
+            title="Container II",
+            components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
+        ),
+    ],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/examples/scratch_dev/assets/css/custom.css

@@ -1,3 +1,17 @@
 #page-header {
   padding-left: 8px;
 }
+
+[data-bs-theme="dark"] {
+            --container-bg-color: #232632;
+}
+
+[data-bs-theme="light"] {
+    --container-bg-color: #F5F6F6;
+}
+
+/* Use the custom variable var(--container-bg-color) */
+.page-component-container {
+    background: var(--container-bg-color);
+    padding: 12px;
+}

vizro-core/examples/scratch_dev/yaml_version/app.py

@@ -3,7 +3,6 @@
 from pathlib import Path
 
 import pandas as pd
-import plotly.io as pio
 import vizro.plotly.express as px
 import yaml
 from vizro import Vizro
@@ -15,10 +14,6 @@
 data_manager["gapminder_2007"] = px.data.gapminder().query("year == 2007")
 data_manager["tips"] = px.data.tips()
 
-pio.templates["vizro_dark"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_light"]["layout"]["paper_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_dark"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
-pio.templates["vizro_light"]["layout"]["plot_bgcolor"] = "rgba(0, 0, 0, 0)"
 
 df_stocks_long = pd.melt(
     px.data.stocks(datetimes=True),

vizro-core/src/vizro/_themes/_colors.py

@@ -165,4 +165,5 @@ def get_colors():
             "#f781bf",
             "#52733e",
         ],
+        "TRANSPARENT": "rgba(0, 0, 0, 0)",
     }

vizro-core/src/vizro/_themes/_common_template.py

@@ -13,80 +13,87 @@ def create_template_common() -> go.layout.Template:
     COLORS = get_colors()
     template_common = go.layout.Template()
     template_common.layout = go.Layout(
+        annotationdefaults_font_size=14,
+        annotationdefaults_showarrow=False,
+        bargroupgap=0.1,
+        coloraxis_autocolorscale=False,  # Set to False as otherwise users cannot customize via `color_continous_scale`
+        coloraxis_colorbar_outlinewidth=0,
+        coloraxis_colorbar_showticklabels=True,
+        coloraxis_colorbar_thickness=20,
+        coloraxis_colorbar_tickfont_size=14,
+        coloraxis_colorbar_ticklabelposition="outside",
+        coloraxis_colorbar_ticklen=8,
+        coloraxis_colorbar_ticks="outside",
+        coloraxis_colorbar_tickwidth=1,
+        coloraxis_colorbar_title_font_size=14,
+        # Diverging, sequential and sequentialminus colorscale will only be applied automatically if
+        # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales
+        # will be the color sequence applied to ["colorscale"]["sequential"].
+        colorscale_diverging=COLORS["DIVERGING_RED_CYAN"],
+        colorscale_sequential=COLORS["SEQUENTIAL_CYAN"],
+        colorscale_sequentialminus=COLORS["SEQUENTIAL_RED"][::-1],
+        colorway=COLORS["DISCRETE_10"],
         font_family="Inter, sans-serif, Arial",
         font_size=14,
-        title_font_size=20,
-        title_xref="container",
-        title_yref="container",
-        title_x=0,
-        title_y=1,
-        title_xanchor="left",
-        title_yanchor="top",
-        title_pad_l=24,
-        title_pad_r=24,
-        title_pad_t=24,
-        title_pad_b=0,
-        showlegend=True,
+        legend_bgcolor=COLORS["TRANSPARENT"],
         legend_font_size=14,
         legend_orientation="h",
-        legend_y=-0.20,
         legend_title_font_size=14,
-        legend_bgcolor="rgba(0,0,0,0)",
+        legend_y=-0.20,
+        map_style="carto-darkmatter",
+        margin_autoexpand=True,
+        margin_b=64,
         margin_l=80,
+        margin_pad=0,
         margin_r=24,
         margin_t=64,
-        margin_b=64,
-        margin_pad=0,
-        margin_autoexpand=True,
-        # Diverging, sequential and sequentialminus colorscale will only be applied automatically if
-        # `coloraxis_autocolorscale=True`. Otherwise, they have no effect, and the default for continuous color scales
-        # will be the color sequence applied to ["colorscale"]["sequential"].
-        colorway=COLORS["DISCRETE_10"],
-        colorscale_diverging=COLORS["DIVERGING_RED_CYAN"],
-        colorscale_sequential=COLORS["SEQUENTIAL_CYAN"],
-        colorscale_sequentialminus=COLORS["SEQUENTIAL_RED"][::-1],
-        coloraxis_autocolorscale=False,  # Set to False as otherwise users cannot customize via `color_continous_scale`
-        coloraxis_colorbar_outlinewidth=0,
-        coloraxis_colorbar_thickness=20,
-        coloraxis_colorbar_showticklabels=True,
-        coloraxis_colorbar_ticks="outside",
-        coloraxis_colorbar_tickwidth=1,
-        coloraxis_colorbar_ticklen=8,
-        coloraxis_colorbar_tickfont_size=14,
-        coloraxis_colorbar_ticklabelposition="outside",
-        coloraxis_colorbar_title_font_size=14,
-        bargroupgap=0.1,
+        # Normally, we should use the primary and secondary color for activecolor and color.
+        # However, our rgba values are not displayed correctly with a transparent bg color.
+        # Hence, we use darkgrey and dimgrey for now, which seems to work fine.
+        modebar_activecolor="darkgrey",
+        modebar_bgcolor=COLORS["TRANSPARENT"],
+        modebar_color="dimgrey",
+        showlegend=True,
+        title_font_size=20,
+        title_pad_b=0,
+        title_pad_l=24,
+        title_pad_r=24,
+        title_pad_t=24,
+        title_x=0,
+        title_xanchor="left",
+        title_xref="container",
+        title_y=1,
+        title_yanchor="top",
+        title_yref="container",
         uniformtext_minsize=12,
         uniformtext_mode="hide",
-        xaxis_visible=True,
-        xaxis_title_font_size=16,
-        xaxis_title_standoff=8,
-        xaxis_ticklabelposition="outside",
-        xaxis_ticks="outside",
-        xaxis_ticklen=8,
-        xaxis_tickwidth=1,
-        xaxis_showticklabels=True,
         xaxis_automargin=True,
-        xaxis_tickfont_size=14,
-        xaxis_showline=True,
         xaxis_layer="below traces",
         xaxis_linewidth=1,
+        xaxis_showline=True,
+        xaxis_showticklabels=True,
+        xaxis_tickfont_size=14,
+        xaxis_ticklabelposition="outside",
+        xaxis_ticklen=8,
+        xaxis_ticks="outside",
+        xaxis_tickwidth=1,
+        xaxis_title_font_size=16,
+        xaxis_title_standoff=8,
+        xaxis_visible=True,
         xaxis_zeroline=False,
-        yaxis_visible=True,
-        yaxis_title_font_size=16,
-        yaxis_title_standoff=8,
-        yaxis_ticklabelposition="outside",
-        yaxis_ticks="outside",
-        yaxis_ticklen=8,
-        yaxis_tickwidth=1,
-        yaxis_showticklabels=True,
         yaxis_automargin=True,
-        yaxis_tickfont_size=14,
-        yaxis_showline=False,
         yaxis_layer="below traces",
         yaxis_linewidth=1,
+        yaxis_showline=False,
+        yaxis_showticklabels=True,
+        yaxis_tickfont_size=14,
+        yaxis_ticklabelposition="outside",
+        yaxis_ticklen=8,
+        yaxis_ticks="outside",
+        yaxis_tickwidth=1,
+        yaxis_title_font_size=16,
+        yaxis_title_standoff=8,
+        yaxis_visible=True,
         yaxis_zeroline=False,
-        annotationdefaults_showarrow=False,
-        annotationdefaults_font_size=14,
     )
     return template_common

vizro-core/src/vizro/_themes/generate_plotly_templates.py

@@ -59,42 +59,41 @@ def generate_json_template(extracted_values: dict[str, str]) -> go.layout.Templa
     template = create_template_common()
     layout = template.layout
     layout.update(
+        annotationdefaults_font_color=FONT_COLOR_PRIMARY,
+        coloraxis_colorbar_tickcolor=AXIS_COLOR,
+        coloraxis_colorbar_tickfont_color=FONT_COLOR_SECONDARY,
+        coloraxis_colorbar_title_font_color=FONT_COLOR_SECONDARY,
         font_color=FONT_COLOR_PRIMARY,
-        title_font_color=FONT_COLOR_PRIMARY,
+        geo_bgcolor=BG_COLOR,
+        geo_lakecolor=BG_COLOR,
+        geo_landcolor=BG_COLOR,
         legend_font_color=FONT_COLOR_PRIMARY,
         legend_title_font_color=FONT_COLOR_PRIMARY,
         paper_bgcolor=BG_COLOR,
         plot_bgcolor=BG_COLOR,
-        geo_bgcolor=BG_COLOR,
-        geo_lakecolor=BG_COLOR,
-        geo_landcolor=BG_COLOR,
-        polar_bgcolor=BG_COLOR,
         polar_angularaxis_gridcolor=GRID_COLOR,
         polar_angularaxis_linecolor=AXIS_COLOR,
+        polar_bgcolor=BG_COLOR,
         polar_radialaxis_gridcolor=GRID_COLOR,
         polar_radialaxis_linecolor=AXIS_COLOR,
-        ternary_bgcolor=BG_COLOR,
         ternary_aaxis_gridcolor=GRID_COLOR,
         ternary_aaxis_linecolor=AXIS_COLOR,
         ternary_baxis_gridcolor=GRID_COLOR,
         ternary_baxis_linecolor=AXIS_COLOR,
+        ternary_bgcolor=BG_COLOR,
         ternary_caxis_gridcolor=GRID_COLOR,
         ternary_caxis_linecolor=AXIS_COLOR,
-        coloraxis_colorbar_tickcolor=AXIS_COLOR,
-        coloraxis_colorbar_tickfont_color=FONT_COLOR_SECONDARY,
-        coloraxis_colorbar_title_font_color=FONT_COLOR_SECONDARY,
-        xaxis_title_font_color=FONT_COLOR_PRIMARY,
+        title_font_color=FONT_COLOR_PRIMARY,
+        xaxis_gridcolor=GRID_COLOR,
+        xaxis_linecolor=AXIS_COLOR,
         xaxis_tickcolor=AXIS_COLOR,
         xaxis_tickfont_color=FONT_COLOR_SECONDARY,
-        xaxis_linecolor=AXIS_COLOR,
-        xaxis_gridcolor=GRID_COLOR,
-        yaxis_title_font_color=FONT_COLOR_PRIMARY,
+        xaxis_title_font_color=FONT_COLOR_PRIMARY,
+        yaxis_gridcolor=GRID_COLOR,
+        yaxis_linecolor=AXIS_COLOR,
         yaxis_tickcolor=AXIS_COLOR,
         yaxis_tickfont_color=FONT_COLOR_SECONDARY,
-        yaxis_linecolor=AXIS_COLOR,
-        yaxis_gridcolor=GRID_COLOR,
-        annotationdefaults_font_color=FONT_COLOR_PRIMARY,
-        map_style="carto-darkmatter",
+        yaxis_title_font_color=FONT_COLOR_PRIMARY,
     )
     template.data.bar = [go.Bar(marker_line_color=BG_COLOR)]
     template.data.waterfall = [

vizro-core/src/vizro/_themes/template_dashboard_overrides.py

@@ -2,6 +2,20 @@
 
 import plotly.graph_objs as go
 
-dashboard_overrides = go.layout.Template(
-    layout={"title": {"pad_l": 0, "pad_r": 0}, "margin_l": 24, "margin_t": 24, "margin_b": 16}
+TRANSPARENT = "rgba(0, 0, 0, 0)"
+
+dashboard_overrides = go.layout.Template()
+dashboard_overrides.layout = go.Layout(
+    geo_bgcolor=TRANSPARENT,
+    geo_lakecolor=TRANSPARENT,
+    geo_landcolor=TRANSPARENT,
+    margin_b=16,
+    margin_l=24,
+    margin_t=24,
+    paper_bgcolor=TRANSPARENT,
+    plot_bgcolor=TRANSPARENT,
+    polar_bgcolor=TRANSPARENT,
+    ternary_bgcolor=TRANSPARENT,
+    title_pad_l=0,
+    title_pad_r=0,
 )