Trying to use getSVGString() but running into canvas undefined

[jaimecigna]

Hello, I am trying to use the getSVGString() but keep getting the following error:

core.js:6456 ERROR TypeError: Cannot read property 'canvas' of undefined
    at e.t.getSVGString (fusioncharts.js:13)
    at ChartComponent.initialized (chart.component.ts:73)
    at ChartComponent_Template_fusioncharts_initialized_0_listener (chart.component.html:2)
    at executeListenerWithErrorHandling (core.js:15285)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.js:15323)
    at Object.next (Subscriber.js:122)
    at SafeSubscriber.Subscriber._next (Subscriber.js:62)
    at SafeSubscriber.Subscriber.next (Subscriber.js:33)
    at EventEmitter_.Subject.next (Subject.js:35)
    at EventEmitter_.emit (core.js:25946)

My Component HTML looks like this:

<fusioncharts (initialized)="initialized($event)" [chartConfig]="chartConfig" [dataSource]="dataSource"></fusioncharts>

My Component TS file looks like this:

import {Component, OnInit} from '@angular/core';
import pptxgen from 'pptxgenjs';
import * as FusionCharts from "fusioncharts";

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {

  dataSource: any;
  chartConfig: any;

  chart: any;


  constructor() {
    this.chartConfig = {
      id: 'mychart',
      width: '400',
      height: '260',
      type: 'column2d',
      dataFormat: 'json',
    };

    this.dataSource = {
      "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
      },
      "data": [{
        "label": "Venezuela",
        "value": "290"
      }, {
        "label": "Saudi",
        "value": "260"
      }, {
        "label": "Canada",
        "value": "180"
      }, {
        "label": "Iran",
        "value": "140"
      }, {
        "label": "Russia",
        "value": "115"
      }, {
        "label": "UAE",
        "value": "100"
      }, {
        "label": "US",
        "value": "30"
      }, {
        "label": "China",
        "value": "30"
      }]
    };

  }

  ngOnInit() {

  }

  initialized($event: any){
    this.chart = $event.chart; // Storing the chart instance
    // console.log(this.chart.getSVGString())
    console.log(this.chart);
    console.log(this.chart.getSVGString())
  }


  exportChart(e: any) {
    FusionCharts.batchExport({
      exportFormat: "pdf"
    });
  }

}

Any Ideas on why this is happening?