<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<div class="row topbuffer20">

    <div class="col-md-4">

      <div class="card">

        <div class="card-body pad20">

          <div class="row">

            <div class="col">

              <p class="fontsize-18 textPrimary"><b>Payroll Payments Overview</b></p>

            </div>

          </div>

          <div class="linedivider-bottom topbuffer10"></div>

          <canvas id="testchart" class="topbuffer10"></canvas>

          <script type="text/javascript">

            $(document).ready(function(){

              const testchartdata = {

                type: 'doughnut',

                data: {

                  labels: ['Awating Payments', 'Awating Authization', 'Pending', 'Completed'],

                  datasets: [

                    {

                      label: 'Traffic',

                      data: [30, 45, 62, 65],

                      backgroundColor: [

                        'rgba(255, 99, 132, 0.2)',

                        'rgba(54, 162, 235, 0.2)',

                        'rgba(255, 206, 86, 0.2)',

                        'rgba(75, 192, 192, 0.2)',

                      ],

                      borderColor: [

                        'rgba(255,99,132,1)',

                        'rgba(54, 162, 235, 1)',

                        'rgba(255, 206, 86, 1)',

                        'rgba(75, 192, 192, 1)',

                      ],

                      borderWidth: 1,

                    },

                  ],

                },

              };

              const testchartoptions = {

                dataLabelsPlugin: true,

                options: {

                  plugins: {

                    legend: {

                      position: "left",

                    },

                    datalabels: {

                      formatter: (value, ctx) => {

                        return value;

                      },

                      color: 'black',

                      labels: {

                        title: {

                          font: {

                            size: '12',

                          },

                        },

                      },

                    },

                  },

                },

              };

              new mdb.Chart(

                document.getElementById('testchart'),

                testchartdata,

                testchartoptions

              );

            })

          </script>

        </div>

      </div>

    </div>

<div class="col-md-4"></div>

<div class="col-md-4"></div>

</div>

​

​