highchart export button not show

user_8327348 0
Viewed 2381

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

highcharts
2 Answers

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

user_129385450 
exporting: {
        menuItemDefinitions: {
            // Custom definition
            label: {
                onclick: function () {
                    this.renderer.label(
                        'You just clicked a custom menu item',
                        100,
                        100
                    )
                        .attr({
                            fill: '#a4edba',
                            r: 5,
                            padding: 10,
                            zIndex: 10
                        })
                        .css({
                            fontSize: '1.5em'
                        })
                        .add();
                },
                text: 'Show label'
            }
        },
        buttons: {
            contextButton: {
                menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'label']
            }
        }
    }
user_135850250
Related