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:

chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.container = document.getElementById("tools");
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.container = document.getElementById("tools");
{
  // ...
  "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

See the Pen amCharts 4: Moving export menu to external container by amCharts team (@amcharts) on CodePen.24419