Angular- The graphs and images are not showing in their exact proportion

Question

I have made a PDF button, using the library html2pdf. There, when I try to export a PDF, the graphs and images gets blown out of propotion. This is the original HTML content and this is how it is getting shown in PDF. I used the same library in other places for the same project, it was working fine. None of the images or graphs were getting out of propertion, but only here it is showing this error. What could be the reason?

This is my TS code:

exportPDF(){
    const value = this.routes.url;
     const segment = /\/portal\/vc-portal\/(.+)/.exec(value)[1];
     const filename = segment.replace('/', '_').replace('-', '_');

     const element = document.getElementById('taskList') as HTMLElement;
     //const ignoreElement = document.getElementById('exportBtn') as HTMLElement
     const opt = {
     margin:       [1,2,2,2],
     pagebreak:    {mode:['avoid-all']},
     filename:     filename + '.pdf',
     image:        { type: 'jpg',  quality: 0.95 },
     html2canvas:  { scale: 1, useCORS: true, allowTaint: true, letterRendering: true, dpi:300 },
     jsPDF:        { unit: 'cm', format: 'a4', orientation: 'portrait', compress: true }
     };

    html2pdf().set(opt).from(element).save();

    }

Thanks in advance!