html2canvashtml2pdfngx-charts

Charts are not displaying in export pdf


Please refer below example: https://stackblitz.com/edit/angular-ivy-eqvhys?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,package.json

Pleas help me to solve chart visibility issue in pdf file


Solution

  • I found a workaround to convert chart into pdf: 
    
    1. Converted chart to png image by using below method
    
     
    
        convertChartToImg(chartId): Observable<string> {
                return new Observable(observer => {
                  const chart = document.querySelector(chartId);
                  if (chart) {
                    this.subs.add(this.captureService.getImage(canvas, true)
                      .pipe(
                        tap((img: string) => {
                          observer.next(img)
                        })
                      ).subscribe());
                  }
                })
              }
    
    2. Replaced chart with png image.
    3. Updated my target element and send pdf.
    

    Working example, please refer the below link:

    https://stackblitz.com/edit/angular-ivy-y3x9we?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,package.json