deck.gl categorical legend swatch renders black in Chromium (emoji-font presentation of U+25FC ignores CSS color)

[alex-poor]

Bug description

The category color swatch in deck.gl chart legends renders as a black square in Chromium-based browsers (Chrome/Edge/Chromium) instead of the category's color. It renders correctly in Firefox on the same machine (CachyOS). Colleagues (@FullStackChef) on windows note it occurs in Firefox as well.

Root cause: The legend swatch is the Unicode glyph ◼ (U+25FC BLACK MEDIUM SQUARE) / ◻ (U+25FB WHITE MEDIUM SQUARE), tinted only via CSS color on its <span>:

// superset-frontend/plugins/preset-chart-deckgl/src/components/Legend.tsx:108-125
const style = { color: `rgba(${v.color?.join(', ')})` };
const icon = v.enabled ? '\u25FC' : '\u25FB';
...
<span style={style}>{icon}</span> {formatCategoryLabel(k)}

U+25FC is in Unicode's Emoji set but lacks Emoji_Presentation, so presentation is browser/OS-decided with no variation selector. Chromium resolves it to a color-emoji font (Noto Color Emoji / Segoe UI Emoji / Apple Color Emoji), whose glyphs carry baked-in color and ignore CSS color resulting in black square. Firefox uses a monochrome text glyph that honors color → correct tint.

Affected charts: Polygon, Scatterplot, Arc, Path (all share components/Legend.tsx).

How to reproduce

1. On a machine with a color-emoji font installed (default on Windows/macOS/most Linux desktops), open Chrome/Edge/Chromium.
2. Create a deck.gl Polygon (or Scatterplot/Arc/Path) chart with a categorical color so the legend shows category swatches.
3. Observe the swatch left of each category label.

Minimal standalone repro (no Superset):
<span style="color: rgb(40,151,191); font-family: 'Noto Color Emoji','Segoe UI Emoji',sans-serif;">&#x25FC;</span>
→ black square in Chromium; correct blue in Firefox or with the emoji font removed.

Expected results

Swatch matches the category color (as in Firefox).

Actual results

Swatch is a black/dark square regardless of category color.

Screenshots/recordings

Firefox on CachyOS working properly:

Chromium on CachyOS showing glyph issue:

Superset version

master / latest-dev

Python version

3.11

Node version

16

Browser

Chrome

Additional context

• Reproduced on latest master
• Searched the issue tracker (closest are [DECK.GL SCATTERPLOT] Wrong legend color #20458 / [Deck.GL scatterplot] Chart has wrong legend colors when placed on a dashboard after 4.1.2 update #32841, but those are color-mapping/count bugs, not this)

Provenance.

The ◼/◻ glyph tinted only by a CSS color on its was introduced in 2019 by PR #7188 ("fix: deck.gl polygon tooltip") and has been copied unchanged through every subsequent refactor: the TS conversion in #24933 (Kamil Gabryjelski / kgabryje, Aug 2023, which also added the stray className="dupa") and the deck.gl/MapLibre modernization in #38035 (Birk Skyum, merged to master as commit c496415, 2026), where the file was duplicated verbatim into the current preset-chart-deckgl plugin. So it's a ~7-year-old latent bug, not a recent regression.

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

Great bug report — the root cause analysis is spot-on. I can confirm the relevant code in Legend.tsx:

const style = { color: `rgba(${v.color?.join(', ')})` };
const icon = v.enabled ? '\u25FC' : '\u25FB';
...
<span style={style}>{icon}</span> {formatCategoryLabel(k)}

The fix is straightforward. A few options in order of robustness:

1. Add text-presentation variation selector — append \uFE0E (VS15) after the glyph to force text presentation:

   const icon = v.enabled ? '\u25FC\uFE0E' : '\u25FB\uFE0E';

   This tells the browser to use the monochrome text glyph rather than the color-emoji glyph, so CSS color applies normally.

2. Replace the Unicode glyph with a small inline <span> styled as a colored box (more resilient to cross-platform font differences):

   <span style={{
     display: 'inline-block',
     width: '0.75em',
     height: '0.75em',
     backgroundColor: `rgba(${v.color?.join(', ')})`,
     marginRight: theme.gridUnit,
   }} />

3. Set font-family on the swatch <span> to a known monochrome/text font (e.g. sans-serif) and add font-variant-emoji: text — though browser support for font-variant-emoji is still limited.

Option 1 is the smallest change; option 2 is the most bulletproof since it removes font/glyph dependencies entirely.

No existing PRs or issues addressing this specific emoji-presentation rendering problem were found in the repo, so this is indeed a fresh report of a long-standing latent bug.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.