Replacing default export icon

This tutorial will show how you can easily replace the default ... in export menu’s top level item with a custom image.

Default behavior

Export menu displays a button with a triple dot in it:

Let’s change it to something else.

Top-menu item

The menu which is an object of type ExportMenu has a property items which holds a hierarchical representation of menu items.

Since we are targeting the top level menu item, it will be accessible via chart.exporting.menu.items[0].

It holds an object that corresponds to the IExportMenuItem interface.

In the subsequent chapters we are going to be manipulating one property of menu item or the other.

Using an image

Menu items have a handy property icon. To display a menu item as an image, all we need to do is simply set it to an URI of an image.

It can be a full or relative URL:

TypeScript

chart.exporting.menu.items[0].icon = "/path/to/downloadIcon.png";

JavaScript

chart.exporting.menu.items[0].icon = "/path/to/downloadIcon.png";

JSON

{
  // ...
  "exporting": {
    "menu": {
      "items": [{
        "icon": "/path/to/downloadIcon.png"
      }]
    }
  }
}

It can even be a “data URI”:

TypeScript

chart.exporting.menu.items[0].icon = "data:image/svg+xml;base64,...";

JavaScript

chart.exporting.menu.items[0].icon = "data:image/svg+xml;base64,...";

JSON

{
  // ...
  "exporting": {
    "menu": {
      "items": [{
        "icon": "data:image/svg+xml;base64,..."
      }]
    }
  }
}

Here’s how it looks now:

Example

Open in CodePen