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

emilykl

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 changed the title ~~Fix empty ScatterGL plots when using text elements~~ Fix issue causing empty ScatterGL plots when using text elements

Sep 26, 2025

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

		makeStringRegex('hrName')
		];

		var esbuildPluginStripMeta = {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	var esbuildPluginStripMeta = {
	const esbuildPluginStripMeta = {

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

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.)

emilykl deleted the fix-missing-json-font-attrs branch

September 26, 2025 22:13

This was referenced

Oct 1, 2025

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