How to implement Save as PNG in Vega using custom menu

Question

I am building a data dashboard using Vega to visualize the outputs, and to accomplish that I've removed the actions dropdown and replaced it with a custom menu system. I would like to incorporate the "Save as PNG" option that exists in the original dropdown (example provided in image below) into my own menu though, since I assume the architecture for creating the image already exists, works well, and should be relatively simple to port over. But I have no idea how I might go about referencing those actions separate from the original menu.

How can I link the Save as PNG functionality to a button that exists outside of the Vega actions dropdown?

Answer 1

The Vega view API has metohd toImageURL() that enables users to download the chart image as PNG file.

https://vega.github.io/vega/docs/api/view/#image-export

In a dashboard, there may be multiple Vega view objects for various charts. For the dashboard menu, here is an example function in javascript with Vega view object and download filename as arguments:

function vegaDownloadChartImage(vegaView, downloadFileName){
  vegaView.toImageURL('png').then(function(url) {
    var link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('target', '_blank');
    link.setAttribute('download', downloadFileName);
    link.dispatchEvent(new MouseEvent('click'));
  }).catch(function(error) { /* error handling */ });
}

Example HTML button for user to download image file (myVegaChart1.png):

  <button onclick="vegaDownloadChartImage(view_1, 'myVegaChart1')">Download PNG file</button>