highchart export button not show

Question

I´m prooving highcharts with a simple graph in angular . But export button not show . I add the script in html page :

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>  
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>  
<script src="https://code.highcharts.com/modules/export-data.js"></script>

and add the properties in chart :

export :true,
navigation: {
  buttonOptions: {
    align: 'right',
    verticalAlign: 'top',
    y: 0
  }
},

but nothing.

this is te app url :

https://stackblitz.com/edit/angular-hkncp8

Answer 1

There is a typo on your call (exporting not export), also you should set menu items:

exporting: {
      buttons: {
        contextButton: {
          menuItems: [
            'viewFullscreen', 'separator', 'downloadPNG',
            'downloadSVG', 'downloadPDF', 'separator', 'downloadXLS'
          ]
        },
      },
      enabled: true,
    },
navigation: {
  buttonOptions: {
    align: 'right',
    verticalAlign: 'top',
    y: 0
  }
},

And you need to import exporting modules to this same file:

import { Component, OnInit, OnDestroy } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { interval, Subscription } from 'rxjs';

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);
require('highcharts/modules/annotations')(Highcharts);

declare var require: any;
(...)

Live demo: https://stackblitz.com/edit/angular-1ylkg8

API reference: https://api.highcharts.com/highcharts/exporting