How to export dynamic chart to pdf using dompdf and chart.js library in php?

I have created chart using chart.js library and dynamic data using php mysql.

Below is my php code for fetching data from database.

<?php  
    $con =   new mysqli('localhost','root','','pdf_test') or die("connection failed");
    $result = mysqli_query($con, "SELECT designation, count(*) as total FROM tbl_employee GROUP BY designation");
    $result_array=[];
    foreach($result as $row) {
        $item_array = array(
            'designation'   =>  $row['designation'], 
            'total'         =>  $row['total'],
            'color'         =>  '#'.rand(100000, 999999).''
        );
        array_push($result_array,$item_array);
    }
?> 

Below is my html code to display chart and export button

<div class="container" id="designationWiseGraph">  
    <div class="panel panel-default">
        <div class="panel-body" align="center">
            <div class="row">
                <canvas id="pie_chart"></canvas>
            </div>
        </div>
    </div>
</div>
<br/>
<div align="center">
    <form method="post" id="generateDesignationPdf" action="create_pdf.php">
        <input type="hidden" name="hidden_html" id="hidden_html" />
        <button type="button" name="create_pdf" id="exportDesignation" class="btn btn-primary btn-xs">Export to PDF</button>
    </form>
</div>

Below is javascript code for generating graph

<script>
    $(document).ready(function(){
        $('#exportDesignation').click(function(){
            $('#hidden_html').val($('#designationWiseGraph').html());
            $('#generateDesignationPdf').submit();
        });
     });

    var data = <?php echo json_encode($result_array); ?>;
    var designation = [];
    var total = [];
    var color =[];

    for(var i in data) {
        designation.push(data[i].designation);
        total.push(data[i].total);
        color.push(data[i].color);
    }
    var chart_data = {
        labels:designation,
        datasets:[
            {
                label:'Designation',
                backgroundColor:color,
                color:'#fff',
                data:total
            }
        ]
    };
    var chart = $('#pie_chart');
    var graph1 = new Chart(chart, {
        type:"pie",
        data:chart_data
    });
</script>

Below is my create_pdf.php code

<?php
    require_once 'vendor/autoload.php';

    use Dompdf\Dompdf;

    class Pdf extends Dompdf {
        public function __construct(){
            parent::__construct();
        }
    }

    if(isset($_POST["hidden_html"]) && $_POST["hidden_html"] != ''){
        $file_name = time().'_pdf_chart.pdf';
        $html = '<link rel="stylesheet" href="bootstrap.min.css">';
        $html .= $_POST["hidden_html"];

        $pdf = new Pdf();
        $pdf->load_html($html);
        $pdf->render();
        $pdf->stream($file_name, array("Attachment" => false));
    }

?>

PDF file is generating but the chart is getting exported in pdf file.

Any suggestion on exporting the chart into pdf using dompdf library or tcpdf library.

source https://stackoverflow.com/questions/67910206/how-to-export-dynamic-chart-to-pdf-using-dompdf-and-chart-js-library-in-php