Search code examples
highchartsangular2-highcharts

highcharts, downloadPNG remove chart data

I'm having trouble with highcharts downloading PNG image, I want to use my own button instead the highcharts one, reading the documentation I need to use "exportChart" function, but it removes data:

options:any = {
  exporting: {
    enabled: false
  }
}

exportPNG():void{
   this.chart.exportChart(); 
}

There is an "almost working" example it gives an error in app.module using "require" and another one when tyring to import from exporting, help in make the example work will be apreciate

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

When it's working, we can click in "download button" and downloads the chart, but if click again it returns an error because data is removed from chart.

I've realized it also happen using exporting library, you can check it download image file and trying to do zoom out.

Solution

  • The reason is saveInstance method - it is called on every chart's load. When exporting, a new temporary chart is created and then deleted so now your angular component has the reference to the removed exported chart - this.chart inside exportPNG() refers to the empty chart object.

    You can check if load event is called for a normal chart and then save the chart's instance.

    saveInstance(chartInstance): void {
  if (!chartInstance.options.chart.forExport) this.chart = chartInstance;
}

    live example: https://stackblitz.com/edit/angular-41tmjd?file=app/mychart.component.ts