Export menu in external container

By default, the chart places its export menu in one of its corners. This tutorial will show how you can easily move it out of the chart and into any container on your page.

The solution

If you examine ExportMenu class, you’ll notice the property named container.

By default it contains reference to the <div> element the chart itself is placed in, hence menu appearing in chart’s container.

Moving the menu to any other element on the page is as simple as setting this property to a reference of that element:

TypeScript

chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.container = document.getElementById("tools");

JavaScript

chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.container = document.getElementById("tools");

JSON

{
  // ...
  "exporting": {
    "menu": {
      "container": document.getElementById("tools")
    }
  }
}

The above will move export menu out of the chart’s container into a <div> with id “tools”.

Note

Please note that this must be a reference to the element. It won’t work setting it to an “id” of the element.

Example

Open in CodePen