Adding custom buttons to Exporting Menu

This demo shows how we can push custom HTML elements into top level of exporting menu.

Code

TypeScript

// Add export menu
let menu = am5plugins_exporting.ExportingMenu.new(root, {});
let exporting = am5plugins_exporting.Exporting.new(root, {
  menu: menu
});

// Add custom menu button
let myButton = document.createElement("a");
myButton.innerHTML = "???";
myButton.className = "am5exporting am5exporting-icon am5exporting-align-right";
myButton.style.top = "30px";
menu.getPrivate("menuElement").appendChild(myButton);

myButton.addEventListener("click", function(ev) {
  alert("Custom button clicked");
});

JavaScript

// Add export menu
var menu = am5plugins_exporting.ExportingMenu.new(root, {});
var exporting = am5plugins_exporting.Exporting.new(root, {
  menu: menu
});

// Add custom menu button
var myButton = document.createElement("a");
myButton.innerHTML = "???";
myButton.className = "am5exporting am5exporting-icon am5exporting-align-right";
myButton.style.top = "30px";
menu.getPrivate("menuElement").appendChild(myButton);

myButton.addEventListener("click", function(ev) {
  alert("Custom button clicked");
});

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Adding custom buttons to Exporting Menuadding-custom-buttons-to-exporting-menu