Black Lives Matter. Please consider donating to Black Girls Code today.

Static Image Export in JavaScript

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.


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

You can save graphs created with plotly.js to static images and view them in your browser. Consider the following example:

var d3 = Plotly.d3;
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);
         }
         )
    });

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

<img id="jpg-export"></img>

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

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});

Saving as SVG

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