How to automatically export (and download) a chart made with Highcharts in Angular?

Question

I work in an Angular project. I built a chart with the Highcharts library and the Angular-Highcharts package.
The chart is well displayed.
The following step is to export automatically the chart by using the Highcharts exportChart method but it does not work. I did many tries but often got the error :

Property exportChart does not exists on type 'Chart'

I suppose the exportChart method native to the Highcharts library does not completely fit to the adaptation needed to make the chart work on Angular. But is there a trick to use that snippet in Angular to automatically download the chart ?

    this.chart.exportChart({
      type: 'application/pdf',
      filename: 'my-pdf'
  });  

Here is my work on that StackBlitz : https://stackblitz.com/edit/angular-highcharts-example-d1qdsv?file=src%2Fapp%2Fapp.component.ts

Could you check it and help me on that problem ? Any help would ve very appreciated !

Answer 1

The reason why you get the mentioned error as you are using the Chart instance which is from 'angular-highcharts' library.

And in this class, there is no exportChart method.

Would recommend using the 'highcharts' library instead.

import * as Highcharts from 'highcharts';

(Highcharts.chart('chart', /* chart options */)).exportChart({
  type: 'application/pdf',
  filename: 'my-pdf',
});

<div id="chart"></div>

Demo @ StackBlitz