From 023d861a91ddabddddb26570d2becef2af36cc19 Mon Sep 17 00:00:00 2001 From: fujidana <53413319+fujidana@users.noreply.github.com> Date: Sat, 12 Sep 2026 15:35:19 +0900 Subject: [PATCH 1/2] Add 'full-json' format option for toImageButton --- .../2015-09-24-config-opt-toImageButtonOptions.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html index 688279133..3c0d963d2 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html @@ -26,7 +26,7 @@ var config = { toImageButtonOptions: { - format: 'svg', // one of png, svg, jpeg, webp + format: 'svg', // one of png, svg, jpeg, webp, full-json filename: 'custom_image', height: 500, width: 700, From f85d4d44d8425b3071881de56f9630d4dbe703b3 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Thu, 17 Sep 2026 10:53:07 -0600 Subject: [PATCH 2/2] Add examples/docs describing full-json --- .../2016-06-03-plotly_js_function_ref.html | 6 ++ .../2016-05-20-static-image.md | 98 +++++++++++-------- 2 files changed, 64 insertions(+), 40 deletions(-) diff --git a/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html b/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html index c256e8e20..89ee7e3a5 100644 --- a/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html +++ b/_posts/plotly_js/2016-06-03-plotly_js_function_ref.html @@ -602,6 +602,10 @@

Plotly.toImage

toImage will generate a promise to an image of the plot in data URL format. + +format takes one of png, jpeg, webp, svg, or full-json. The default is png. +full-json returns the figure as JSON instead of a rendered image. The JSON holds the data, layout, frames, and config, with every default value filled in. +Set imageDataOnly to true to get the raw JSON string rather than a data:application/json URL. 

 // Plotly.toImage will turn the plot in the given div into a data URL string
 // toImage takes the div as the first argument and an object specifying image properties as the other
@@ -616,6 +620,8 @@ 
Plotly.downloadImage

 
 downloadImage will trigger a request to download the image of a Plotly plot.
+
+format takes the same values as Plotly.toImage.
 

 // downloadImage will accept the div as the first argument and an object specifying image properties as the other
 Plotly.downloadImage(graphDiv, {format: 'png', width: 800, height: 600, filename: 'newplot'});
diff --git a/_posts/plotly_js/fundamentals/static-image-export/2016-05-20-static-image.md b/_posts/plotly_js/fundamentals/static-image-export/2016-05-20-static-image.md
index 223ba8093..bd832e7e0 100644
--- a/_posts/plotly_js/fundamentals/static-image-export/2016-05-20-static-image.md
+++ b/_posts/plotly_js/fundamentals/static-image-export/2016-05-20-static-image.md
@@ -1,7 +1,7 @@
 ---
 description: How to export graphs as static images in JavaScript. The Plotly JavaScript
-  graphing library supports `.jpg`, `.png`, and `.svg` as formats for static image
-  export.
+  graphing library supports `.jpg`, `.png`, `.webp`, and `.svg` as formats for static
+  image export.
 display_as: file_settings
 language: plotly_js
 layout: base
@@ -15,57 +15,75 @@ thumbnail: thumbnail/png-export.png
 
 You can save graphs created with `plotly.js` to static images and view them in your browser. Consider the following example:
 
-    var img_jpg= d3.select('#jpg-export');
-
-    // Plotting the Graph
-
-    var trace={x:[3,9,8,10,4,6,5],y:[5,7,6,7,8,9,8],type:"scatter"};
-    var trace1={x:[3,4,1,6,8,9,5],y:[4,2,5,2,1,7,3],type:"scatter"};
-    var data = [trace,trace1];
-    var layout = {title : "Simple JavaScript Graph"};
-    Plotly.newPlot(
-      'plotly_div',
-       data,
-       layout)
-
-    // static image in jpg format
-
-    .then(
-        function(gd)
-         {
-          Plotly.toImage(gd,{height:300,width:300})
-             .then(
-                 function(url)
-             {
-                 img_jpg.attr("src", url);
-             }
-             )
-        });
+    const imgJpg = document.getElementById('jpg-export');
+
+    const trace = {x: [3, 9, 8, 10, 4, 6, 5], y: [5, 7, 6, 7, 8, 9, 8], type: 'scatter'};
+    const trace1 = {x: [3, 4, 1, 6, 8, 9, 5], y: [4, 2, 5, 2, 1, 7, 3], type: 'scatter'};
+    const data = [trace, trace1];
+    const layout = {title: {text: 'Simple JavaScript Graph'}};
+
+    Plotly.newPlot('plotly_div', data, layout)
+      .then((gd) => Plotly.toImage(gd, {format: 'jpeg', height: 300, width: 300}))
+      .then((url) => {
+        imgJpg.src = url;
+      });
+
 To view this image in your page include following HTML tag:
 
-    
+    
 
 Height and width of the image can be adjusted by specifying the same in `toImage` call:
 
-    Plotly.toImage(
-    gd,{
-      format:'jpeg',
-      height:desired_height,
-      width:desired_width,
+    Plotly.toImage(gd, {
+      format: 'jpeg',
+      height: desiredHeight,
+      width: desiredWidth
     });
 
 You can also save the image using different formats.
 
 # Formats Supported
 
-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/)
+`Plotly.toImage` and `Plotly.downloadImage` take one of five values for `format`:
 
-**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.
+- `png` - raster image, and the default format
+- `jpeg` - raster image with no transparency
+- `webp` - raster image
+- `svg` - vector image
+- `full-json` - the figure specification as JSON, not a rendered image
+
+**Note:** A figure that contains a WebGL trace (of type scattergl, scatter3d, surface, mesh3d, scatterpolargl, cone, streamtube, splom, or parcoords) holds encapsulated rasters instead of vectors for some parts of an SVG export.
 
 ## Saving as PNG ##
-      img_png.attr("src", url);
-      Plotly.toImage(gd,{format:'png',height:400,width:400});
+
+    const imgPng = document.getElementById('png-export');
+
+    Plotly.toImage(gd, {format: 'png', height: 400, width: 400}).then((url) => {
+      imgPng.src = url;
+    });
 
 ## Saving as SVG ##
-    img_svg.attr("src", url);
-    Plotly.toImage(gd,{format:'svg',height:800,width:800});
\ No newline at end of file
+
+    const imgSvg = document.getElementById('svg-export');
+
+    Plotly.toImage(gd, {format: 'svg', height: 800, width: 800}).then((url) => {
+      imgSvg.src = url;
+    });
+
+## Saving as JSON ##
+
+The `full-json` format returns the figure with every default value filled in, including data, layout, frames, config, and the plotly.js `version`.
+
+    // toImage returns a data:application/json URL
+    Plotly.toImage(gd, {format: 'full-json'}).then((dataUrl) => {
+      console.log(dataUrl);
+    });
+
+    // Set imageDataOnly to get the raw JSON string instead
+    Plotly.toImage(gd, {format: 'full-json', imageDataOnly: true}).then((json) => {
+      console.log(JSON.parse(json));
+    });
+
+`Plotly.downloadImage` downloads the figure JSON instead, and saves it as `newplot.full.json`:
+
+    Plotly.downloadImage(gd, {format: 'full-json', filename: 'newplot'});