Fix: Pass additional color specifications to charts (streamlit#7061)

Handles column specification in altair charts by passing header defaults for fonts/colors to both default and streamlit chart themes in CustomTheme.tsx

e2e/scripts/st_arrow_altair_chart.py

@@ -48,12 +48,6 @@
 
 chart = alt.Chart(data).mark_bar().encode(x="a", y="b")
 
-st.write("Bar chart with default theme:")
-st._arrow_altair_chart(chart)
-
-st.write("Bar chart with streamlit theme:")
-st._arrow_altair_chart(chart, theme="streamlit")
-
 st.write("Bar chart with overwritten theme props:")
 st._arrow_altair_chart(chart.configure_mark(color="black"), theme="streamlit")
 
@@ -77,3 +71,20 @@
 
     st.write("Pie Chart with more than 4 Legend items")
     st._arrow_altair_chart(chart, theme="streamlit")
+
+# taken from vega_datasets barley example
+barley = alt.UrlData(
+    "https://cdn.jsdelivr.net/npm/vega-datasets@v2.7.0/data/barley.json"
+)
+
+barley_chart = (
+    alt.Chart(barley)
+    .mark_bar()
+    .encode(x="year:O", y="sum(yield):Q", color="year:N", column="site:N")
+)
+
+st.write("Grouped Bar Chart with default theme:")
+st.altair_chart(barley_chart, theme=None)
+
+st.write("Grouped Bar Chart with streamlit theme:")
+st.altair_chart(barley_chart, theme="streamlit")

frontend/lib/src/components/elements/ArrowVegaLiteChart/CustomTheme.tsx

@@ -46,6 +46,16 @@ export function applyStreamlitTheme(config: any, theme: EmotionTheme): any {
       orient: "top",
       offset: 26,
     },
+    header: {
+      titleFontWeight: theme.fontWeights.normal,
+      titleFontSize: theme.fontSizes.mdPx,
+      titleColor: getGray70(theme),
+      titleFontStyle: "normal",
+      labelFontSize: theme.fontSizes.twoSmPx,
+      labelFontWeight: theme.fontWeights.normal,
+      labelColor: getGray70(theme),
+      labelFontStyle: "normal",
+    },
     axis: {
       labelFontSize: theme.fontSizes.twoSmPx,
       labelFontWeight: theme.fontWeights.normal,
@@ -165,8 +175,11 @@ export function applyThemeDefaults(config: any, theme: EmotionTheme): any {
     },
     header: {
       labelColor: colors.bodyText,
+      titleColor: colors.bodyText,
+      ...themeFonts,
     },
     view: {
+      stroke: getGray30(theme),
       continuousHeight: 350,
       continuousWidth: 400,
     },