Fix issue causing empty ScatterGL plots when using text elements by emilykl · Pull Request #7563 · plotly/plotly.js

emilykl · 2025-09-26T15:59:56Z

The error was Uncaught TypeError: systemFontKeywords.indexOf is not a function
This was due to a JSON file in the css-system-font-keywords (sub-)dependency not being included properly during the build process
It turns out the build step where we strip out some metadata attributes (to reduce bundle size) was also inadvertently causing JSON files to be processed as JavaScript files, which resulted in them showing up 'blank' in the final build
I've replaced that build step with a native ESBuild plugin with the same functionality
This also allows us to remove one dev dependency, which is a nice bonus

Thanks to @ayjayt for helping diagnose and to @WeisSeb and @pawel-paciorek-at-metrohm for reporting.

Minimal HTML/JS example demonstrating issue

(Based on @WeisSeb 's example in #7353)

<!DOCTYPE html>
<html>
<head>
    <title>Scattergl empty</title>
    <script src="dist/plotly.js"></script>
</head>
<body>
    <div id="graph" style="width:600px;height:400px;"></div>
    <script>
        Plotly.newPlot('graph', [{
            type: 'scattergl',
            x: [1],
            y: [1],
            text: 'some text',
            mode: 'text+markers',
            textposition: 'top center',
        },]);
    </script>
</body>
</html>

Should look like:

Steps for testing

Check out this branch
Run npm i && npm run build
Place the above HTML in a file in the root of your plotly.js/ directory and visit in your browser
The chart should look like the image above

emilykl · 2025-09-26T16:58:23Z

Also should resolve plotly/plotly.py#5336 but that won't be closed until this fix is included in Plotly.py.

camdecoster

This worked for me. I made a couple of small comments for formatting changes.

tasks/compress_attributes.js

camdecoster · 2025-09-26T19:29:54Z

tasks/compress_attributes.js

+    makeStringRegex('hrName')
+];
+
+var esbuildPluginStripMeta = {


Suggested change

var esbuildPluginStripMeta = {

const esbuildPluginStripMeta = {

emilykl · 2025-09-26T20:24:25Z

Another bonus: Possibly reduces build time

(this is just one data point, wanted to do a sanity check to make sure it wasn't massively slower)

time npm run build on master
npm run build 20.12s user 2.54s system 185% cpu 12.191 total

time npm run build on fix-missing-json-font-attrs
npm run build 13.88s user 1.99s system 131% cpu 12.086 total

gvwilson · 2025-09-26T20:32:10Z

faster is gooder

emilykl · 2025-09-26T22:09:12Z

This bug should have been caught by the CI, but it turns out that we weren't actually running the compress_attributes step in the CI build process 🤦. So the build in the CI did not experience this issue. I've pushed 33c46a4 to fix that.

(And the tests on this branch I just created prove that many baseline images fail to generate when we are using the correct build process in the CI.)

xzm9gqzc65-maker · 2025-12-03T12:03:25Z

Closes #7353 , #7441

The error was Uncaught TypeError: systemFontKeywords.indexOf is not a function

This was due to a JSON file in the css-system-font-keywords (sub-)dependency not being included properly during the build process

It turns out the build step where we strip out some metadata attributes (to reduce bundle size) was also inadvertently causing JSON files to be processed as JavaScript files, which resulted in them showing up 'blank' in the final build

I've replaced that build step with a native ESBuild plugin with the same functionality

This also allows us to remove one dev dependency, which is a nice bonus

Thanks to @ayjayt for helping diagnose and to @WeisSeb and @pawel-paciorek-at-metrohm for reporting.

Minimal HTML/JS example demonstrating issue

(Based on @WeisSeb 's example in #7353)
<!DOCTYPE html>
<html>
<head>
    <title>Scattergl empty</title>
    <script src="dist/plotly.js"></script>
</head>
<body>
    <div id="graph" style="width:600px;height:400px;"></div>
    <script>
        Plotly.newPlot('graph', [{
            type: 'scattergl',
            x: [1],
            y: [1],
            text: 'some text',
            mode: 'text+markers',
            textposition: 'top center',
        },]);
    </script>
</body>
</html>
Should look like:

Steps for testing

Check out this branch

Run npm i && npm run build

Place the above HTML in a file in the root of your plotly.js/ directory and visit in your browser

The chart should look like the image above

fix processing of JSON files in build pipeline

5f1f244

emilykl changed the title ~~Fix empty ScatterGL plots when using text elements~~ Fix issue causing empty ScatterGL plots when using text elements Sep 26, 2025

emilykl requested review from camdecoster and gvwilson September 26, 2025 16:51

update image mock to test text on scattergl

443b385

emilykl force-pushed the fix-missing-json-font-attrs branch from cdf9dcc to 443b385 Compare September 26, 2025 18:18

update image baseline

92d9a9c

camdecoster approved these changes Sep 26, 2025

View reviewed changes

biome formatter

7f18a75

emilykl added 2 commits September 26, 2025 16:44

add draftlog

860cdb6

ci build should pass same _bundle arguments as regular build

33c46a4

emilykl merged commit c624d3d into master Sep 26, 2025
6 checks passed

emilykl deleted the fix-missing-json-font-attrs branch September 26, 2025 22:13

This was referenced Oct 1, 2025

dcc.Graph with Scattergl renders empty after update to Plotly 6 plotly/plotly.py#5336

Closed

Scatter GL crashes with text (texttemplate) elements enabled #7441

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

Fix issue causing empty ScatterGL plots when using text elements #7563

Fix issue causing empty ScatterGL plots when using text elements #7563
emilykl merged 6 commits intomasterfrom
fix-missing-json-font-attrs

emilykl commented Sep 26, 2025 •

edited

Loading

Uh oh!

emilykl commented Sep 26, 2025

Uh oh!

camdecoster left a comment

Uh oh!

Uh oh!

camdecoster Sep 26, 2025

Uh oh!

emilykl commented Sep 26, 2025 •

edited

Loading

Uh oh!

gvwilson commented Sep 26, 2025

Uh oh!

emilykl commented Sep 26, 2025 •

edited

Loading

Uh oh!

Uh oh!

xzm9gqzc65-maker commented Dec 3, 2025

Minimal HTML/JS example demonstrating issue

Steps for testing

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	var esbuildPluginStripMeta = {
	const esbuildPluginStripMeta = {

Uh oh!

Comments

Conversation

emilykl commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Minimal HTML/JS example demonstrating issue

Steps for testing

Uh oh!

emilykl commented Sep 26, 2025

Uh oh!

camdecoster left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

camdecoster Sep 26, 2025

Choose a reason for hiding this comment

Uh oh!

emilykl commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gvwilson commented Sep 26, 2025

Uh oh!

emilykl commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

xzm9gqzc65-maker commented Dec 3, 2025

Minimal HTML/JS example demonstrating issue

Steps for testing

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

emilykl commented Sep 26, 2025 •

edited

Loading

emilykl commented Sep 26, 2025 •

edited

Loading

emilykl commented Sep 26, 2025 •

edited

Loading