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.

Closesplotly/plotly.js#7831.
Closesplotly/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

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

jendrikw · 2026-08-26T14:06:21Z

v4 was released two days ago, please finish this

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 guideJul 17, 2026

emilykl reviewed Jul 20, 2026
View reviewed changes