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:02:34Z

+arrangement: horizontal
+markdown_content: |
+  `direction` sets which way flows run along the `orientation` axis, so a diagram can be mirrored without reversing
+  your `link.source` and `link.target` data. The default, `'forward'`, puts sources first; `'reversed'` puts them last.


Suggested change

your `link.source` and `link.target` data. The default, `'forward'`, puts sources first; `'reversed'` puts them last.

your `link.source` and `link.target` data. The default, `'forward'`, orders sources left-to-right when horizontal or top-to-bottom when vertical; `'reversed'` is the opposite.

emilykl · 2026-08-07T18:03:13Z

+  `direction` sets which way flows run along the `orientation` axis, so a diagram can be mirrored without reversing
+  your `link.source` and `link.target` data. The default, `'forward'`, puts sources first; `'reversed'` puts them last.
+  Combined with `orientation` (`'h'` or `'v'`) this gives four layouts: sources on the left, right, top, or bottom.
+  Node labels stay upright in every combination — only the flow geometry mirrors.


Suggested change

Node labels stay upright in every combination — only the flow geometry mirrors.

Node labels stay upright in every combination — only the flow geometry is mirrored.

emilykl · 2026-08-07T18:07:46Z

+  chart's visibility. Clicking it first brings up a confirmation dialog naming the destination. A Plotly Cloud account
+  is required.


Suggested change

chart's visibility. Clicking it first brings up a confirmation dialog naming the destination. A Plotly Cloud account

is required.

chart's visibility. A confirmation dialog is shown before sending the chart.

Sharing requires a Plotly Cloud account, which can be created during the sharing process.

emilykl · 2026-08-07T18:08:55Z

+  is required.
+
+  The button is shown by default. Set `showSendToCloud: false` to hide it, or set `plotlyServerURL` to send charts to
+  a self-hosted or alternate server instead of the default `https://cloud.plotly.com/newchart`.


Suggested change

a self-hosted or alternate server instead of the default `https://cloud.plotly.com/newchart`.

an alternate URL instead of the default `https://cloud.plotly.com/newchart`.

emilykl · 2026-08-07T18:12:15Z

+  showSendToCloud: true,
+  plotlyServerURL: "https://cloud.plotly.com/newchart"


Suggested change

showSendToCloud: true,

plotlyServerURL: "https://cloud.plotly.com/newchart"

// These config options match the defaults

showSendToCloud: true,

plotlyServerURL: "https://cloud.plotly.com/newchart"

emilykl · 2026-08-07T18:14:31Z

 The common image formats: 'PNG', 'JPG/JPEG' are supported. In addition, formats like 'EPS', 'SVG' and 'PDF' are also available for user with a Personal or Professional subscription. You can get more details on our [pricing page] (https://plotly.com/products/cloud/)

-**Note:** It is important to note that any figures containing WebGL traces (i.e. of type scattergl, heatmapgl, contourgl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) that are exported in a vector format like SVG, EPS or PDF will include encapsulated rasters instead of vectors for some parts of the image.
+**Note:** It is important to note that any figures containing WebGL traces (i.e. of type scattergl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) that are exported in a vector format like SVG, EPS or PDF will include encapsulated rasters instead of vectors for some parts of the image.


EPS export is no longer supported

Suggested change

**Note:** It is important to note that any figures containing WebGL traces (i.e. of type scattergl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) that are exported in a vector format like SVG, EPS or PDF will include encapsulated rasters instead of vectors for some parts of the image.

**Note:** It is important to note that any figures containing WebGL traces (i.e. of type scattergl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) that are exported in a vector format like SVG or PDF will include encapsulated rasters instead of vectors for some parts of the image.

emilykl · 2026-08-07T18:17:55Z

+Clicking the button brings up a confirmation dialog, which names the destination
+and offers **Cancel** and **Share**:


Suggested change

Clicking the button brings up a confirmation dialog, which names the destination

and offers **Cancel** and **Share**:

Clicking the button brings up a dialog confirming the sharing destination:

emilykl · 2026-08-07T18:18:15Z

+| Config option | Default | Purpose |
+|---|---|---|
+| `showSendToCloud` | `true` | Whether the "Share chart…" modebar button is rendered. |
+| `plotlyServerURL` | `'https://cloud.plotly.com/newchart'` | The endpoint the button posts to. Override to point at a self-hosted or alternate server. |


Suggested change

| `plotlyServerURL` | `'https://cloud.plotly.com/newchart'` | The endpoint the button posts to. Override to point at a self-hosted or alternate server. |

| `plotlyServerURL` | `'https://cloud.plotly.com/newchart'` | The endpoint the button posts to. Override to point at an alternate server. |

emilykl · 2026-08-07T18:23:01Z

 ---

-<p>With the release of Plotly.js v2.35.0, we are introducing a new set of trace types for maps with tile underlays:</p>
+<p>Plotly.js v2.35.0 introduced a set of trace types for maps with tile underlays:</p>


Suggested change

Plotly.js v2.35.0 introduced a set of trace types for maps with tile underlays:

Plotly.js v2.35.0 introduced a new set of trace types for maps with tile underlays:

emilykl · 2026-08-07T18:23:09Z


-<p>These traces replace the existing Mapbox traces, <code>Choroplethmapbox</code>, <code>Scattermapbox</code>,
-    <code>Densitymapbox</code>, but use <a href="https://maplibre.org">MapLibre</a> as the map renderer rather than
+<p>These traces replace the Mapbox traces, <code>Choroplethmapbox</code>, <code>Scattermapbox</code>, and


Suggested change

These traces replace the Mapbox traces, <code>Choroplethmapbox</code>, <code>Scattermapbox</code>, and

These traces replaced the Mapbox traces, <code>Choroplethmapbox</code>, <code>Scattermapbox</code>, and

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)

emilykl · 2026-08-07T18:29:32Z

@@ -0,0 +1,37 @@
+---
+description: How to make a D3.js-based quiver plot in JavaScript. Quiver plots show a 2D vector field as an array of arrows.


Suggested change

description: How to make a D3.js-based quiver plot in JavaScript. Quiver plots show a 2D vector field as an array of arrows.

description: How to make a quiver plot in JavaScript. Quiver plots show a 2D vector field as an array of arrows.

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

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

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

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