how to render svg text to the dom element in angular 8

i have a fusionchart graph from which i want to get the image and show in the same html page when user clicks on get svg string button.

i am getting svg text from this.chart.getSVGString() but how can i render this in dom.

    import { Component } from "@angular/core";
`  `import { dataSource } from "./dataSource";
    @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
  chart: any;
  svgPath:any;
  dataSource: 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" }
    ]
  };
  initialized($event) {
    this.chart = $event.chart; // Storing the chart instance
  }

  getSVG() {
    console.log(this.chart.getSVGString());
    this.svgPath = this.chart.getSVGString()
  }
}

this is app.component

 <fusioncharts
  width="500"
  height="400"
  type="column2d"
  dataFormat="json"
  [dataSource]="dataSource"
  (initialized)="initialized($event)"
>
  >
</fusioncharts>
<div [innerHTML] = "svgPath"></div>
<button (click)="getSVG()">Get SVG String</button>

this is app.html

https://codesandbox.io/s/angular-forked-b27eg?file=/src/app/app.component.html:0-256

You will need to bypass the default DOM sanitization to make it work, refer to below code

const data = this.chart.getSVGString();
this.svgPath = this.domSanitizer.bypassSecurityTrustHtml(data);

import DomSanitizer like this:

import { DomSanitizer } from "@angular/platform-browser";