docs: Add plotly.js v4 migration guide by camdecoster · Pull Request #455 · plotly/graphing-library-docs

camdecoster · 2026-07-17T23:08:33Z

Description

Creates a new Guides section, moves the v3 migration guide, and ddds the plotly.js v4 migration guide.

Closes plotly/plotly.js#7831.
Closes plotly/plotly.js#7841.

Changes

Creates Guides section
Moves/renames v3 migration guide
Adds v4 migration guide
Updates existing docs to reflect v4 changes
Adds new docs for new features

Testing

Be on this branch
Build the docs
Click around the Guides and make sure everything looks okay

Notes

The v3 guide was in the Fundamentals section, which doesn't really fit
I added a redirect for the old v3 guide link
The styles aren't great, but fixing that will be part of a different project

ndrezn

I would suggest adding some grouping by topic, like for example. Right now it's a just a long, ungrouped list so topics come and go back and forth.

Maybe something like:

Environment & tooling

Setup-level changes that hit before you touch a figure.

Minimum Node.js version

TypeScript types

Removed features

Things that are simply gone and need code deleted/renamed.

Chart Studio APIs removed

Mapbox traces and subplots removed (maybe could go in maps section? but it's top item).

Dependency changes

Third-party library swaps whose output shifts even with identical input — the
"your figure looks slightly different and you didn't change anything" bucket.

Color library swap (tinycolor2 → color)

Country name lookup (country-regex → country-iso-search)

Sankey layout algorithm update

Maps & geo

By far the biggest cluster — all the MapLibre/geo framing behavior.

Scattermap icon defaults

Map subplots auto-frame to data

Geo subplots auto-frame by default

Geo fitbounds framing for antimeridian features

Geo subplot zoom limits

Cartesian & shapes

The remaining rendering-behavior changes that aren't map-related.

Shape legend marker outlines honor line.dash

Overlaying axis tickmode defaults to 'sync'

ndrezn · 2026-07-20T14:45:10Z

+`tickmode` continues to default to `'auto'` on the overlaying axis.
+Sync'ing tick positions to category slots is almost never the intent.
+
+### Opting out


Should be a sub header

ndrezn · 2026-07-20T14:45:23Z

+/ `pitch` in the layout — auto-framing steps aside and preserves the
+chosen view across further data changes.
+
+### Opting out


Should be one level deeper

emilykl · 2026-07-20T15:50:23Z

+### Antimeridian data
+
+For data that straddles the antimeridian (points on both sides of ±180°),
+the auto-frame picks the compact crossing range rather than the
+long-way-around view. For example, `lon: [131.8855, -179]` frames as
+`[131.8855, 181]` (a ~49° span across the antimeridian) instead of the
+naive `[-179, 131.8855]` (~311° the wrong way).


Suggested change

### Antimeridian data

For data that straddles the antimeridian (points on both sides of ±180°),

the auto-frame picks the compact crossing range rather than the

long-way-around view. For example, `lon: [131.8855, -179]` frames as

`[131.8855, 181]` (a ~49° span across the antimeridian) instead of the

naive `[-179, 131.8855]` (~311° the wrong way).

### Data that crosses the antimeridian

For data that straddles the antimeridian (points on both sides of ±180°, in the middle of the Pacific Ocean),

the auto-frame picks the compact crossing range rather than the

long-way-around view. For example, `lon: [131.8855, -179]` frames as

`[131.8855, 181]` (a ~49° span across the antimeridian) instead of the

naive `[-179, 131.8855]` (~311° the wrong way).

Would be nice to have a visual example here

…ges, add redirects

emilykl · 2026-08-07T18:25:28Z

+  Matching ignores case, accents, and punctuation, so `'Cote d'Ivoire'`, `'Türkiye'`, and `'St. Kitts and Nevis'` all
+  resolve. See the library's


It might be more useful here to give several examples which all resolve to the same country name (but with different case/accents/punctuation)

I think that will be clear if they click on the link.

emilykl · 2026-08-07T18:39:47Z

    - avoid using random or dummy data as much as humanly possible! Should only be a last resort. 
  - upload data files to https://github.com/plotly/datasets as importing data rather than pasting a large chunk of data in the tutorial creates a cleaner example. 
-   - use `var config = {mapboxAccessToken: "your access token"};` if your chart requires Mapbox authentication. `"your access token` will replaced by Plotly's private token at build time. In development mode, you will need to create a `_data/mapboxtoken.yml` file and paste Plotly's non-URL restricted Mapbox key into it. This is available in 1Password.
+   - map examples must not require an API key. The `map` traces (`scattermap`, `choroplethmap`, `densitymap`) use open tile providers, and the `mapboxAccessToken` config option was removed in Plotly.js v4. Keep the example's `layout.map.style` set to a built-in style name or to a keyless style URL, so the chart renders for everyone reading the page. If you want to document a provider that does need a key, put that URL in `markdown_content` as a code snippet for the reader to copy and add their own key to — don't put it in the example itself, where a placeholder key means the rendered chart has no tiles and a real key would be committed to a public repo.


If you want to document a provider that does need a key, put that URL in markdown_content as a code snippet for the reader to copy and add their own key to — don't put it in the example itself, where a placeholder key means the rendered chart has no tiles and a real key would be committed to a public repo.

Not a huge deal, but I don't totally understand these instructions (maybe I would understand better if I worked more closely with the docs).

I think you'd understand if you reviewed some of the tutorials this statement is referencing.

emilykl · 2026-08-07T18:45:44Z

@camdecoster I left a bunch of very minor comments on the new docs pages. Looks good.

Co-authored-by: Emily KL <4672118+emilykl@users.noreply.github.com>

camdecoster · 2026-08-10T18:00:01Z

+  Matching ignores case, accents, and punctuation, so `'Cote d'Ivoire'`, `'Türkiye'`, and `'St. Kitts and Nevis'` all
+  resolve. See the library's


I think that will be clear if they click on the link.

camdecoster · 2026-08-10T18:08:06Z

    - avoid using random or dummy data as much as humanly possible! Should only be a last resort. 
  - upload data files to https://github.com/plotly/datasets as importing data rather than pasting a large chunk of data in the tutorial creates a cleaner example. 
-   - use `var config = {mapboxAccessToken: "your access token"};` if your chart requires Mapbox authentication. `"your access token` will replaced by Plotly's private token at build time. In development mode, you will need to create a `_data/mapboxtoken.yml` file and paste Plotly's non-URL restricted Mapbox key into it. This is available in 1Password.
+   - map examples must not require an API key. The `map` traces (`scattermap`, `choroplethmap`, `densitymap`) use open tile providers, and the `mapboxAccessToken` config option was removed in Plotly.js v4. Keep the example's `layout.map.style` set to a built-in style name or to a keyless style URL, so the chart renders for everyone reading the page. If you want to document a provider that does need a key, put that URL in `markdown_content` as a code snippet for the reader to copy and add their own key to — don't put it in the example itself, where a placeholder key means the rendered chart has no tiles and a real key would be committed to a public repo.


I think you'd understand if you reviewed some of the tutorials this statement is referencing.

camdecoster · 2026-08-10T18:09:02Z

This isn't actually a rename, but git is seeing it that way. 🤷

camdecoster · 2026-08-10T18:09:42Z

This isn't actually a rename, but git is seeing it that way. 🤷

camdecoster added 4 commits July 17, 2026 16:47

Add Guides section

894b487

Move v3 migration guide

fcba9e3

Update v3 migration guide frontmatter

696dabd

Add v4 migration guide

56ecb47

camdecoster changed the title ~~docs: Add v4 migration guide~~ docs: Add plotly.js v4 migration guide Jul 17, 2026

emilykl reviewed Jul 20, 2026

View reviewed changes