How to export Angular page into PDF

Question

I'm using Angular 6. I found one question here but it doesn't have an accepted answer. Also I tried some code and PDF export is happening. But my problem is that one specific graph is not exported.

Screenshot from Angular app:

But when I export this to PDF, Pie charts are exported but the normal indicator i.e. 25 is not exported. That 25 is not just a value it is also a type of graph which is known as indicator widget.

Screenshot of exported PDF:

Here is my code:

service (Typescript):

import html2canvas from "html2canvas";
import { PdfExportHelper } from "./pdf-export-helper";
...

@Injectable({
  providedIn: "root",
})
export class WidgetsExportService {
  private readonly options = {
    backgroundColor: "#ffffff",
    logging: false,
  };

  private _exportCardSubject$ = new Subject<CardPdfConfig>();

  constructor(
    @Inject(DOCUMENT) private document
  ) {}

  ...

  public exportCard(
    originalContent: HTMLElement,
    ...
  ) {
    this.globalProgressService.showProgress();
    this.doExportCard(
      originalContent,
      ...
    );
  }

  ...

  private getContentRows(originalContent: HTMLElement): HTMLElement[] {
    return Array.from(
      originalContent.querySelectorAll("#overview-dashboard > .content-row")
    );
  }

  private doExportCard(
    originalContent: HTMLElement,
    ...
  ) {
    const pagePromises: Promise<HTMLCanvasElement>[] = [];
    const pageWrappers: HTMLElement[] = [];
    const clonedContent: HTMLElement = originalContent.cloneNode(
      true
    ) as HTMLElement;
    const rowWidthWithPadding = originalContent.offsetWidth + 26;
    const rowHeightWithPadding = originalContent.offsetHeight + 26;
    const wrapper: HTMLElement = this.createWrapper(
      rowWidthWithPadding,
      rowHeightWithPadding
    );
    wrapper.appendChild(clonedContent);
    this.addWrapperToDocument(wrapper);
    pagePromises.push(html2canvas(wrapper, this.options));
    pageWrappers.push(wrapper);

    const headerFooterWrapper: HTMLElement = this.createWrapper(1300);
    pageWrappers.push(headerFooterWrapper);

    this.createHeaderFooter(headerFooterWrapper, headerConfig, filterMap);

    Promise.all([
      html2canvas(document.getElementById("pdf-header")),
      html2canvas(document.getElementById("pdf-filters")),
    ])
      .then(([headerCanvas, filtersCanvas]) => {
        const copyrightText = headerConfig.copyrightText;
        headerFooterWrapper.appendChild(
          this.createFooter(1, 1, copyrightText, formattedDate)
        );
        pagePromises.push(
          html2canvas(document.getElementById("pdf-footer" + 1))
        );
        this.renderPages(
          pagePromises,
          fileName,
          headerCanvas,
          filtersCanvas,
          pageWrappers,
          pdfPassword
        );
      })
      .catch((e) => {
        this.removeWrappersFromDocument(pageWrappers);
        throw new Error(e);
      });
  }
}

Ignore the colors. I just need that one widget also to be covered. Please help.