setTimeout(() => {

    /* Attendance Summary */
     var options2 = {
         series: [{
             name: 'Absent',
             data: [32, 15, 63, 51, 36, 62, 99, 42, 78, 76, 32, 120],
         }, {
             name: 'Timely Arrival',
             data: [56, 58, 38, 50, 64, 45, 55, 32, 15, 63, 51, 136]
         }, {
             name: 'Late Arrival',
             data: [48, 29, 50, 69, 20, 59, 52, 12, 48, 28, 17, 98]
         }],
         chart: {
             height:292,
             type: 'line',
             toolbar: {
                 show: false,
             },
             background: 'none',
             fill: "#fff",
         },
         grid: {
             borderColor: '#f2f6f7',
         },
         colors: ["var(--primary-color)", "var(--primary05)", "var(--primary01)"],
         background: 'transparent',
         dataLabels: {
             enabled: false
         },
         stroke: {
             curve: 'straight',
             width: 2
         },
         dataLabels: {
             enabled: false,
         },
         legend: {
             show: true,
             position: 'top',
         },
         xaxis: {
             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
             show: false,
             axisBorder: {
                 show: false,
                 color: 'rgba(119, 119, 142, 0.05)',
                 offsetX: 0,
                 offsetY: 0,
             },
             axisTicks: {
                 show: false,
                 borderType: 'solid',
                 color: 'rgba(119, 119, 142, 0.05)',
                 width: 6,
                 offsetX: 0,
                 offsetY: 0
             },
             labels: {
                 rotate: -90,
             }
         },
         yaxis: {
             show: false,
             axisBorder: {
                 show: false,
             },
             axisTicks: {
                 show: false,
             }
         },
         tooltip: {
             x: {
                 format: 'dd/MM/yy HH:mm'
             },
         },
     };
     var chart4 = new ApexCharts(document.querySelector("#attendance-summary"), options2);
     chart4.render();
     /* Attendance Summary */
 
     /* Jobs Applied */
     var options1 = {
         series: [{
             name: 'Jobs Applied',
             data: [11, 22, 31, 37, 41, 49, 65],
         }],
         chart: {
             type: 'bar',
             height: 295,
             toolbar: {
                 show: false,
             }
         },
         grid: {
             borderColor: '#f1f1f1',
             strokeDashArray: 3
         },
         colors: ["var(--primary-color)"],
         plotOptions: {
             bar: {
                 colors: {
                     ranges: [{
                         from: -100,
                         to: -46,
                         color: '#ebeff5'
                     }, {
                         from: -45,
                         to: 0,
                         color: '#ebeff5'
                     }]
                 },
                 columnWidth: '30%',
             }
         },
         dataLabels: {
             enabled: false,
         },
         stroke: {
             show: true,
             width: 2,
             colors: undefined,
         },
         legend: {
             show: false,
             position: 'top',
         },
         yaxis: {
             title: {
                 style: {
                     color: '#adb5be',
                     fontSize: '13px',
                     fontFamily: 'poppins, sans-serif',
                     fontWeight: 600,
                     cssClass: 'apexcharts-yaxis-label',
                 },
             },
             labels: {
                 formatter: function (y) {
                     return y.toFixed(0) + "";
                 }
             }
         },
         xaxis: {
             type: 'week',
             categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
             axisBorder: {
                 show: true,
                 color: 'rgba(119, 119, 142, 0.05)',
                 offsetX: 0,
                 offsetY: 0,
             },
             axisTicks: {
                 show: true,
                 borderType: 'solid',
                 color: 'rgba(119, 119, 142, 0.05)',
                 width: 6,
                 offsetX: 0,
                 offsetY: 0
             },
             labels: {
                 rotate: -90
             }
         }
     };
     var chart1 = new ApexCharts(document.querySelector("#jobs-applied"), options1);
     chart1.render();
     /* Jobs Applied */
 
     /* Employees Roles */
     var options = {
         series: [1754, 1234, 878, 270],
         labels: ["Developer", "Designer", "Team Lead", "Hr Role"],
         chart: {
             height: 247,
             type: 'donut',
         },
         dataLabels: {
             enabled: false,
         },
 
         legend: {
             show: false,
         },
         stroke: {
             show: true,
             curve: 'smooth',
             lineCap: 'round',
             colors: "#fff",
             width: 0,
             dashArray: 0,
         },
         plotOptions: {
             pie: {
                 expandOnClick: false,
                 donut: {
                     size: '90%',
                     background: 'transparent',
                     labels: {
                         show: true,
                         name: {
                             show: true,
                             fontSize: '20px',
                             color: '#495057',
                             offsetY: -4
                         },
                         value: {
                             show: true,
                             fontSize: '18px',
                             color: undefined,
                             offsetY: 8,
                             formatter: function (val) {
                                 return val + "%"
                             }
                         },
                         total: {
                             show: true,
                             showAlways: true,
                             label: 'Total',
                             fontSize: '22px',
                             fontWeight: 600,
                             color: '#495057',
                         }
 
                     }
                 }
             }
         },
         colors: ["var(--primary-color)", "var(--primary07)", "var(--primary04)", "var(--primary01)",],
     };
     var chart = new ApexCharts(document.querySelector("#employee-roles"), options);
     chart.render();
     /* Employees Roles */
 
 }, 200);