How to call export Excel method for Highcharts in Angular?

Question

I am using Highcharts in Angular, I want that when I click on Excel icon, it downloads chart as Excel. My HTML code is:

<h3 class="monthly-title"> The Chart</h3>
<div class="financial-export-excel"
       (click)="onExportExcel()"
       matTooltip="export excel"
       matTooltipPosition="right">
    <svg viewBox="0 0 24 24">
      <use xlink:href="#excel"></use>
    </svg>
</div>
<highcharts-chart
    #chart
    style="width: 100%; height: 400px; display: block;"
    *ngIf="isHighcharts && chartOption"
    [Highcharts]="Highcharts"
    [options]="chartOption">
</highcharts-chart>

And my TypeScript code is:

 @ViewChild('chart', { static: false }) chart: any;
  isHighcharts = typeof Highcharts === 'object'
  Highcharts: typeof Highcharts = Highcharts;
  chartOption?: Highcharts.Options;
  chartOption = {
      chart: {
        style: {
          fontSize: '14px',
        },
        zooming: {
          mouseWheel: {
            enabled: false,
          }
        },
      },
      credits: {text: ''},
      plotOptions: {
        series: {
          animation: {
            duration: 2000
          }
        }
      },
      exporting: {
        filename: 'export-excel',
        csv: {
          decimalPoint: '.',
          dateFormat: '%Y-%m-%d',
        },
        menuItemDefinitions : {
          downloadCSV : {
            text : 'download CSV'
          },
        },
        buttons: {
          contextButton: {
            enabled: false
          },
        },
      },
      tooltip: {
        enabled: true,
        backgroundColor: 'white',
        borderWidth: 0,
        useHTML: true,
        shared: true,
        style: {
          direction: 'rtl',
          textAlign: 'right',
          fontFamily: 'Yekan',
        },
      },
      xAxis: [
        {
          categories: categories

        }
      ],
      yAxis: [
        {
          gridLineWidth: 1,
          opposite: false,
          title: {text: ''},
          showEmpty: false,
          labels: {
            align: 'center',
          }
          }, {
          gridLineWidth: 1,
          opposite: true,
          title: {text: ''},
          showEmpty: false,
          labels: {
            align: 'center',
          }}

      ],
      title: {text: ''},
      legend:{
        align: 'left',
        verticalAlign: 'top',
        x: 0,
        y: 0,
      },
      series: [
        {type: 'column', data: data1, yAxis: 0, name: 'series1', color: '#9575CD'},
        {type: 'column', data: data0, yAxis: 0, name:  'series2', color: '#26C6DA'},
        {type: 'line', data: data3, yAxis: 1, name: 'series3', color: '#FF9800', lineWidth: 2},
        {type: 'line', data: data2, yAxis: 1, name: 'series4', color: '#448AFF', lineWidth: 2},
      ]
    };
  }
  onExportExcel() {
    this.chart.chart.downloadCSV();
  }

But when I click on Excel icon, it does not download anything. What is the problem?

Answer 1

You probably forget to load and initialize exporting and export-data modules:

import HC_exporting from 'highcharts/modules/exporting';
import HC_exportData from 'highcharts/modules/export-data';

HC_exporting(Highcharts);
HC_exportData(Highcharts);

---

Live demo: https://stackblitz.com/edit/highcharts-angular-line-qrawgj

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#downloadXLS