0

Using Angular 8.2.4, angular-highcharts 8.0.3 and highcharts 7.2.0.

I've followed the Client side export section of the docs as well as their jsFiddle to include an offline export feature in my app; everything works fine until I export the chart.

After that the site just breaks, navigation stops working and the console floods with errors, I have to refresh the page for it to work again. I'm almost certain this is more an angular/highcharts compatibility than highcharts issue but then again, I'm pretty new to both so.

Module import as per the github repo

//shared.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from "angular-highcharts";
import * as more from "highcharts/highcharts-more.src";
import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsExportingOffline from "highcharts/modules/offline-exporting";

@NgModule({
  imports: [ChartModule],
  exports: [ChartModule],
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [more, HighchartsExporting, HighchartsExportingOffline] }
  ]
})
export class SharedModule {}

Chart

//chart.component.ts
chart = new Chart({
    chart: {
      type: "line",
      zoomType: "x"
    },
    xAxis: {
      type: "datetime",
      dateTimeLabelFormats: {
        minute: "%I:%M %p"
      }
    },
    yAxis: {
      title: {
        text: "Title"
      }
    },
    credits: {
      enabled: false
    },
    tooltip: {
      positioner: function() {
        return { x: 0, y: 0 };
      },
      shadow: false,
      borderWidth: 0,
      backgroundColor: "rgba(255,255,255,0.8)"
    },
    navigation: {
      buttonOptions: {
        enabled: true
      }
    },
    exporting: {
      fallbackToExportServer: false
    }
  });

Template

chart.component.html
<div [chart]="chart"></div>

This is a sample of the errors I'm getting by simply trying to navigate back to home (or wherever) after exporting once.

enter image description here

Insights appreciated.

Scaramouche
  • 3,188
  • 2
  • 20
  • 46
  • I've no idea what can be wrong here. However, try to make it with an official angular wrapper for Highcharts `highcharts-angular` (can be downloaded here: https://github.com/highcharts/highcharts-angular). Check also this working demo with `offline-exporting`: https://codesandbox.io/s/angular-0mbny – Wojciech Chmiel Oct 14 '19 at 08:11
  • @WojciechChmiel. I did, I actually started up with highcharts-angular but it was not showing correctly in my flex layout for some reason and then I found angular-highcharts which worked flawlessly up until this point. the thing is I'm sure I'm just doing something completely wrong cause it's such a massive problem its solution must come down to something very basic I'm missing. also quick question: why is highcharts-angular the "official" wrapper for angular? thanks – Scaramouche Oct 14 '19 at 17:32
  • So could you reproduce this issue in an online code editor like codesandbox? I will try to help you. `highcharts-angular` is official because it is released and maintained by Highsoft company (Highcharts authors). – Wojciech Chmiel Oct 15 '19 at 07:17

0 Answers0