call to context menu function

Question

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?

check this post https://stackoverflow.com/questions/46575211/offline-exporting-a-highcharts-chart-using-an-external-button — Deep 3015, Apr 18 '18 at 14:21

score 1 · Accepted Answer · answered Apr 19 '18 at 07:13

1

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);

answered Apr 19 '18 at 07:13

Deep 3015

9,929
5
30
54

thanks, what about csv format? I tried with type: 'text/csv' but crashes – cucuru Apr 19 '18 at 10:32
currently angular2-highcharts is not being updated and for csv check this [thread](https://github.com/gevgeny/angular2-highcharts/issues/164) which is not working. You can use official npm https://www.npmjs.com/package/highcharts – Deep 3015 Apr 19 '18 at 11:03
but it's working with their own "download csv" button, how can it be? – cucuru Apr 19 '18 at 11:10
I found it, its chart.downloadCSV() – cucuru Apr 23 '18 at 08:39
my new problem, when exporting data its removed from chart, you can try it by clicking "export" more than once in your plunker example – cucuru Apr 23 '18 at 08:54
1

chart gets lost while exporting, so reload chart again (this is not good way) but works. check http://plnkr.co/edit/fJGYZtRdBe0qpGvcPUvg?p=preview – Deep 3015 Apr 23 '18 at 09:12
thanks, I can't use this solution, my code is more complicated than this. Thanks anyway! – cucuru Apr 23 '18 at 09:57
1

you can check more available options https://api.highcharts.com/highcharts/lang.downloadPNG – Deep 3015 Apr 23 '18 at 10:07
thanks, I've already tried this, but I got an error: TypeError: this.chart.downloadPNG() is not a function – cucuru Apr 23 '18 at 10:10

call to context menu function

1 Answers1