CODEWITHSUNDEEP
highchartsangular2-highcharts
cucuru
cucuru

Reputation: 3698

call to context menu function

I'm using angular-5,angular2-highcharts version 0.5.5 and highcharts version 6.0.7.

I want to add in my html in not in the chart a button which emulates the "context menu" one. It can't be as usual using exporting option.

This is my code:

options = {
  exporting: {
    enabled: false,
    csv: {itemDelimiter: ';'}
 }

};

private showContext() {
  //this.chart.???? -> show context menu
}


<div>
  <a (click)="showContext()"> 
     <mat-icon>file_download</mat-icon>
  </a>
</div>

<chart [options]="options"
</chart>

is it possible?

Upvotes: 0

Views: 699

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

We can export chart using external html button with

chart.exportChart({
        type: 'image/png',
        filename: 'theimage'
 });

plunker demo

Complete code

import { platformBrowserDynamic } from '@angular/platform-browser-
dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts'; 

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
    `],
    template: `<button (click)="exportCharts()" >Export</button><chart [options]="options" (load)="saveInstance($event.context)"></chart>`
})
class AppComponent {
    constructor() { 
        this.options = {
            chart: {
                type: 'column',
                margin: 75,
            },
            plotOptions: {
                column: {
                    depth: 25
                }
            },
            exporting: {
                enabled: false
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        };
    }
    options: Object;
    chart: any;
    saveInstance(chartInstance): void {
         this.chart = chartInstance;
    }
    exportCharts(){
      this.chart.exportChart({
                type: 'image/png',
                filename: 'theimage'
            });
    }
}

@NgModule({
  imports: [
    BrowserModule, 
    ChartModule.forRoot(
      require('highcharts'),
      require('highcharts/modules/exporting'),
    )
  ],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

Upvotes: 1

Related Questions