Apache Superset 6.0.0 Global echartsOptionsOverrides and specific echartsOptionsOverridesByChartType

[Yashh-p]

🐞 Issue: Custom Theme Tokens Not Applying to Charts in Superset 6.0.0

Environment

• Apache Superset: 6.0.0
• Theme Type: Custom UI Theme (via UI Theme Administration)
• Rendering Engine: Ant Design (UI) + ECharts (Charts)

---

📸 Screenshots

UI Theme Applied (No Visible Change in Chart Typography / Layout)

Chart-Level Overrides Not Reflected

---

📝 Description

I have created and applied a custom UI theme in Apache Superset 6.0.0 using the Theme Administration interface.

While the theme is successfully saved and activated:

• Font size changes (heading tokens) are not reflected in the UI
• ECharts overrides (both global and chart-type-specific) are not visible in rendered charts
• No errors are shown in the browser console or Superset logs

This creates ambiguity around:

• which tokens are actually supported
• which UI elements consume Ant Design tokens
• which chart elements consume ECharts overrides

---

🧩 Theme Configuration Used

{
  "token": {
    "fontFamily": "Monsieur La Doulaise, cursive",
    "fontUrls": [
      "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Monsieur+La+Doulaise&display=swap"
    ],

    "fontSizeHeading1": 40,
    "fontSizeHeading2": 32,
    "fontSizeHeading3": 26,
    "fontSizeHeading4": 22,
    "fontSizeHeading5": 18,

    "lineHeight": 2,
    "lineHeightHeading1": 1.5,
    "lineHeightHeading2": 1.38,
    "lineHeightHeading3": 1.26,
    "lineHeightHeading4": 1.12,
    "lineHeightHeading5": 1,

    "colorPrimary": "#b12cfe",
    "colorSuccessBg": "#5ac189",
    "colorWarningBg": "#f4d35e",
    "colorErrorBg": "#ff6b6b"
  },

  "echartsOptionsOverrides": {
    "grid": {
      "left": "10%",
      "right": "10%"
    },
    "tooltip": {
      "backgroundColor": "#000000"
    }
  },

  "echartsOptionsOverridesByChartType": {
    "echarts_pie": {
      "legend": {
        "orient": "vertical",
        "right": 10
      }
    }
  }
}

---

❓ Observed Behavior

• UI typography (titles, headers, filters, chart titles) does not reflect configured font sizes
• Chart layout and tooltip styles ignore ECharts overrides
• Behavior is consistent across browsers and dashboards
• Theme activation works, but token consumption appears partial or undocumented

---

✅ Expected Behavior

• Ant Design tokens such as fontSizeHeading*, lineHeight*, and fontFamily should visibly affect:

  • Page headers
  • Dashboard titles
  • Chart titles
  • Control labels

• echartsOptionsOverrides and echartsOptionsOverridesByChartType should apply to:

  • Legends
  • Tooltips
  • Grid spacing
  • Chart-specific elements (e.g. pie legend orientation)

---

📌 Request / Ask

Could the maintainers please provide:

1. An authoritative list of UI elements that consume Ant Design theme tokens, such as:

   • Page headers
   • Dashboard titles
   • Chart titles
   • Subheaders
   • Filters
   • Modals
   • Tables

2. A definitive mapping of chart elements → supported ECharts options, for example:

   • Chart title
   • Subtitle
   • Legend
   • Tooltip
   • Axis labels
   • Data labels
   • Grid / padding
   • Annotations

3. Clarification on:

   • Which tokens are intentionally ignored
   • Which tokens are UI-only vs chart-only
   • Whether additional configuration (feature flags, rebuild, cache busting) is required

---

🎨 Design Input

If this behavior is expected, clearer documentation would significantly improve:

• Theme adoption
• Brand customization
• Enterprise design consistency

Suggested labels:

• bug
• theme
• charts
• design:suggest
• documentation

---

Thank you for the guidance — clarity here would unlock meaningful theming capabilities for Superset users.

[dosubot]

Hi @Yashh-p! I'm Dosu and I’m helping the superset team.

Here's what Superset 6.0.0 supports for theming and chart overrides:

Ant Design theme tokens only affect core UI elements—navigation, menus, buttons, modals, and some table controls. Tokens like fontFamily, fontSizeHeading1-5, lineHeightHeading1-5, and color tokens are supported, but they do not impact dashboard content, chart titles, or chart visuals. Dashboard and chart card appearance are not styled by Ant Design tokens; for those, you need to use the CSS module or custom CSS [docs].

Authoritative list of UI elements consuming Ant Design tokens:

• Navigation bar
• Menus
• Buttons
• Modals
• Table controls
• Some filter controls
  Elements like dashboard titles, chart titles, and dashboard content are not affected [source].

ECharts options overrides:

• echartsOptionsOverrides (global) and echartsOptionsOverridesByChartType (per chart type) apply only to ECharts-based visualizations.
• These overrides affect all charts of a given type, not individual chart instances.
• Supported chart types for per-type overrides (as of 6.0.0): BigNumber with trendline, BoxPlot, Gantt, Graph, Heatmap, Histogram, MixedTimeseries, Sankey, Sunburst, Tree, Treemap, Waterfall.
• Example: setting backgroundColor for box_plot in echartsOptionsOverridesByChartType will apply to all BoxPlot charts [PR #36389].
• There is no built-in way to target a specific chart instance; for that, you would need custom code or a chart plugin [discussion].

Tokens intentionally ignored:

• Any property not in the allowed Ant Design token list (e.g., custom chartColors) is ignored by the theme system [source].
• ECharts overrides in the theme JSON are not processed by the UI theme system for non-ECharts charts.

UI-only vs chart-only tokens:

• Ant Design tokens are UI-only.
• ECharts overrides are chart-only and only for supported ECharts chart types.

Configuration requirements:

• For live theme editing, enable the THEME_ALLOW_THEME_EDITOR_BETA feature flag.
• For instance-wide changes, update superset_config.py and restart Superset.
• No cache busting is required for font URLs; fonts load at runtime via CSS @import if from allowed domains [PR #36317].
• Enhanced theme validation and error handling are available via the ENHANCED_THEME_VALIDATION feature flag [PR #35349].

Limitations:

• No visible changes to dashboard or chart visuals from Ant Design tokens.
• ECharts overrides cannot be applied per chart instance.
• For advanced chart theming, use dashboard CSS or custom chart plugins.

If you need a full mapping of allowed Ant Design tokens, see the source code. For ECharts options, refer to the chart plugin code and ECharts documentation for supported option keys.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[SupersetOdT]

The tokens available for configuring the Superset 6.0.0 UI can be viewed here.

[SupersetOdT]

Here is a list of tokens (global) and components (specific) working on my Superset. This list is obviously not exhaustive but already allows for advanced customization.

{
"token": {
  "fontFamily": "'Inter', Helvetica, Arial",
  "fontSize": 16,
  "fontSizeSM": 14,
  "fontSizeLG": 18,
  "fontSizeXL": 24,
  "colorText": "#434343E0",
  "colorTextSecondary": "#636363E0",
  "colorTextTertiary": "#545454",
  "colorTextQuaternary": "#b8b8b8",
  "colorTextHeading": "#434343E0",
  "colorTextBase": "#c3c3c3bb",
  "colorLink": "5797ab",
  "colorLinkHover": "#17BECF",
  "colorBgBase": "#ffffff",
  "colorBgContainer": "#ffffff",
  "colorBgMask": "#ffffff00",
  "colorBgSpotlight": "#114a5bc0",
  "sizeStep": 4,
  "sizeUnit": 4,
  "transitionTiming": 0.2,
  "brandIconMaxWidth": 120,
  "brandLogoHeight": "35px",
  "brandLogoMargin": "10px 150px 10px 0px",
  "brandLogoUrl" : "/static/assets/images/my_logo.svg",
  "brandLogoHref": "https://my.domain.com"
  },
"components": {
  "Menu": {
    "fontSize": 16,
    "colorText": "#747474",
    "colorPrimary": "#2893B3f0",
    "groupTitleFontSize": 16,
    "groupTitleColor": "#49A8BF",
    "iconSize": 20,
    "iconMarginInlineEnd": 30
    },
  "Table": {
    "fontSize": 15,
    "colorText": "#a5a5a5",
    "fontWeightStrong": "530",
    "headerColor": "#646464",
    "headerBg": "#ededed",
    "headerSortActiveBg": "#e8e8e8",
    "bodySortBg": "#fafafa",
    "rowHoverBg": "#F0Fbff",
    "lineWidth": 1,
    "borderColor": "#74747410",
    "fontSizeIcon": 16
    },
  "Card": {
    "colorTextHeading": "#434343E0",
    "fontSizeLG": 16,
    "colorTextDescription": "#939393E0",
    "fontSize": 11
    },
  "Button": {
    "colorTextLightSolid": "#ffffff",
    "colorPrimary": "#2893B3f0",
    "colorPrimaryHover": "#17BECF",
    "colorPrimaryBg": "#E4f1f2",
    "colorPrimaryBgHover": "#AEF1F2",
    "colorTextQuaternary": "#990000",
    "lineWidth": 5
    },
  "Layout": {
    "fontSize": 14,
    "colorText": "#434343a6",
    "colorBgLayout": "#e4f1f2b1"
    },
  "Input": {
    "fontSize": 14
    },
  "Select": {
    "fontSize": 14
    },
  "Switch": {
    "fontSize": 12,
    "colorPrimary": "#2893B3"
    },
  "Tooltip": {
    "colorTextLightSolid": "#ffffff",
    "colorBgSpotlight": "#47b3bfbb"
    },
  "Tag": {
    "borderRadiusSM": 20,
    "fontSizeSM": 11
    },
  "Typography": {
    "colorText": "#434343"
    },
  "Icon": {
    "fontSize": 30
    },
  "Alert": {
    "colorError": "#e04355",
    "colorErrorBg": "#fff2f0",
    "colorInfo": "#66bcfe",
    "colorInfoBg": "#f0fBff",
    "colorSuccess": "#5ac189",
    "colorSuccessBg": "#f6ffed",
    "colorWarning": "#fcc700",
    "colorWarningBg": "#fffbe6",
    "colorBgElevated": "#fffbe6"    
    },
  "Pagination": {
    "colorTextPlaceholder": "#a1a1a1",
    "colorPrimary": "#a1a1a1",
    "itemActiveBg": "#f1f1f1"
    }
  },
"algorithm": "default"
}