Static Image Export in JavaScript

How to export graphs as static images in JavaScript. The Plotly JavaScript graphing library supports .jpg.jpg, .png.png, and .svg.svg as formats for static image export.


Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

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);
         }
         )
    });
Click to copy

To view this image in your page include following HTML tag:

<img id="jpg-export"></img>
Click to copy

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,
});
Click to copy

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

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.

Saving as PNG

  img_png.attr("src", url);
  Plotly.toImage(gd,{format:'png',height:400,width:400});
Click to copy

Saving as SVG

img_svg.attr("src", url);
Plotly.toImage(gd,{format:'svg',height:800,width:800});
Click to copy