Search code examples
javascriptvue.jstoolbarapexcharts

How to add a fullscreen button to the ApexCharts toolbar

I'm using ApexCharts to create charts in a Vue.js project.

I want to customize the toolbar menu to include a viewFullscreen option. The goal is to add a button in the chart's toolbar that allows the user to toggle fullscreen mode.

apexcharts toolbar options

However, I don't see any built-in support for viewFullscreen in the ApexCharts Docs for toolbar options. Is there a way to extend or customize the toolbar menu to add this feature?

Solution

  • In ApexCharts, you can add custom icons to the toolbar and associate them with custom functionality. Since there is no built-in fullscreen button, I declared my own in the customIcons array like this:

    customIcons: [{
  icon: '<img src="/static/icons/chart-carpet.png" width="20">',
  index: 4,
  title: 'Full Screen Mode',
  class: 'custom-icon',
  click: function () {
    const chartElement = document.getElementById('chart');
    if (!document.fullscreenElement) {
      chartElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }
}]