Python

Plotly.toImage()

Images are an important tool when working with statistical figures. They allow you to export the figures into static images which you can share or upload to a website.

In this article, we will explore how we can export the Plotly figures into static images using the Plotly.js toImage() function.

Without much further ado, let’s dive in.

Plotly.toImage()

To export a Plotly.js figure into a static image, we use the toImage() function. The function syntax is as shown in the following:

toImage(format: target_image_format, width: desired_image_size_in_pixels, height: desired_image_size_in_pixels).

As we can see, the function has a relatively simple and straightforward syntax.

Example 1: Plotly.js Export Figure to Static PNG File

Let us illustrate how we can export a plotly.js figure using the toImage() function. For this tutorial, we create a simple bar plot as shown in the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
    <title>Simple Bar plot using plotly.js</title>
</head>
<body>
    <div id="myDiv"></div>
    <script>
        var data = [
            {
            x: ['Chrome', 'Firefox', 'Safari', 'MS Edge', 'Opera', 'Other'],
            y: [67, 1.92, 32.33, 6.96, 2.92, 1.91],
            type: 'bar'
            }
        ];
        Plotly.newPlot('myDiv', data)
    </script>
</body>
</html>

In the given code, we use the plotly.js to create a bar plot of the browser usage. We can run the code and view the plot as shown in the following:

We can now save the Bar plot into a static image as shown in the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <title>Simple Bar plot using plotly.js</title>
</head>
<body>
    <div id="myDiv"></div>
    <img id="png-export"></img>
    <script>
        var img_png = d3.select('#png-export')
        var data = [
            {
            x: ['Chrome', 'Firefox', 'Safari', 'MS Edge', 'Opera', 'Other'],
            y: [67, 1.92, 32.33, 6.96, 2.92, 1.91],
            type: 'bar'
            }
        ];
        Plotly.newPlot('myDiv', data).then(
            function(gd) {
                Plotly.toImage(gd, {format: "png", width: 1200, width:800}).then(
                    function(url) {
                        img_png.attr('src', url)
                    }
                )
            }
        )
    </script>
</body>
</html>

In this example, we use the d3 library to plot. We start by calling the Plotly.toImage() function and pass the data including the function to export the image. We also pass the format in which we wish to export the image, in this case, as png file.

Finally, we plot the image to the img tag with the ID of png-export as specified in the variable.

We can run the code in the browser.

You can now use the browser tools to export the image into a file on your disk.

Example 2: Plotly.js Save Image as JPEG/JPG

You can also export a figure as a JPG/JPEG format by specifying the format parameter. An example code is as shown in the following:

img_jpg.attr("src", url);
Plotly.toImage(gd, {format: "jpeg", width: target_width, height: target_width});

The same case applies when exporting an image as svg.

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

Conclusion

In this tutorial, you learned how you can export a Plotly figure into a static png, jpg, or svg format using the toImage() function from plotly.js. Happy coding!!

About the author

John Otieno

My name is John and am a fellow geek like you. I am passionate about all things computers from Hardware, Operating systems to Programming. My dream is to share my knowledge with the world and help out fellow geeks. Follow my content by subscribing to LinuxHint mailing list