var options = { series: [80], grid: { padding: { top: 0, right: 0, bottom: 0, left: 0 }, }, chart: { height: 100, width: 70, type: 'radialBar', }, plotOptions: { radialBar: { hollow: { size: '50%', }, dataLabels: { name: { show: false, color: '#fff' }, value: { show: true, color: '#333', offsetY: 5, fontSize: '15px' } } } }, colors: ['#ecf0f4'], fill: { type: 'gradient', gradient: { shade: 'dark', type: 'diagonal1', shadeIntensity: 0.8, gradientToColors: ['#1b00ff'], inverseColors: false, opacityFrom: [1, 0.2], opacityTo: 1, stops: [0, 100], } }, states: { normal: { filter: { type: 'none', value: 0, } }, hover: { filter: { type: 'none', value: 0, } }, active: { filter: { type: 'none', value: 0, } }, } }; var options2 = { series: [70], grid: { padding: { top: 0, right: 0, bottom: 0, left: 0 }, }, chart: { height: 100, width: 70, type: 'radialBar', }, plotOptions: { radialBar: { hollow: { size: '50%', }, dataLabels: { name: { show: false, color: '#fff' }, value: { show: true, color: '#333', offsetY: 5, fontSize: '15px' } } } }, colors: ['#ecf0f4'], fill: { type: 'gradient', gradient: { shade: 'dark', type: 'diagonal1', shadeIntensity: 1, gradientToColors: ['#009688'], inverseColors: false, opacityFrom: [1, 0.2], opacityTo: 1, stops: [0, 100], } }, states: { normal: { filter: { type: 'none', value: 0, } }, hover: { filter: { type: 'none', value: 0, } }, active: { filter: { type: 'none', value: 0, } }, } }; var options3 = { series: [75], grid: { padding: { top: 0, right: 0, bottom: 0, left: 0 }, }, chart: { height: 100, width: 70, type: 'radialBar', }, plotOptions: { radialBar: { hollow: { size: '50%', }, dataLabels: { name: { show: false, color: '#fff' }, value: { show: true, color: '#333', offsetY: 5, fontSize: '15px' } } } }, colors: ['#ecf0f4'], fill: { type: 'gradient', gradient: { shade: 'dark', type: 'diagonal1', shadeIntensity: 0.8, gradientToColors: ['#f56767'], inverseColors: false, opacityFrom: [1, 0.2], opacityTo: 1, stops: [0, 100], } }, states: { normal: { filter: { type: 'none', value: 0, } }, hover: { filter: { type: 'none', value: 0, } }, active: { filter: { type: 'none', value: 0, } }, } }; var options4 = { series: [85], grid: { padding: { top: 0, right: 0, bottom: 0, left: 0 }, }, chart: { height: 100, width: 70, type: 'radialBar', }, plotOptions: { radialBar: { hollow: { size: '50%', }, dataLabels: { name: { show: false, color: '#fff' }, value: { show: true, color: '#333', offsetY: 5, fontSize: '15px' } } } }, colors: ['#ecf0f4'], fill: { type: 'gradient', gradient: { shade: 'dark', type: 'diagonal1', shadeIntensity: 0.8, gradientToColors: ['#2979ff'], inverseColors: false, opacityFrom: [1, 0.5], opacityTo: 1, stops: [0, 100], } }, states: { normal: { filter: { type: 'none', value: 0, } }, hover: { filter: { type: 'none', value: 0, } }, active: { filter: { type: 'none', value: 0, } }, } }; var options5 = { chart: { height: 350, type: 'bar', parentHeightOffset: 0, fontFamily: 'Poppins, sans-serif', toolbar: { show: false, }, }, colors: ['#1b00ff', '#f56767'], grid: { borderColor: '#c7d2dd', strokeDashArray: 5, }, plotOptions: { bar: { horizontal: false, columnWidth: '25%', endingShape: 'rounded' }, }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ['transparent'] }, series: [{ name: 'In Progress', data: [40, 28, 47, 22, 34, 25] }, { name: 'Complete', data: [30, 20, 37, 10, 28, 11] }], xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], labels: { style: { colors: ['#353535'], fontSize: '16px', }, }, axisBorder: { color: '#8fa6bc', } }, yaxis: { title: { text: '' }, labels: { style: { colors: '#353535', fontSize: '16px', }, }, axisBorder: { color: '#f00', } }, legend: { horizontalAlign: 'right', position: 'top', fontSize: '16px', offsetY: 0, labels: { colors: '#353535', }, markers: { width: 10, height: 10, radius: 15, }, itemMargin: { vertical: 0 }, }, fill: { opacity: 1 }, tooltip: { style: { fontSize: '15px', fontFamily: 'Poppins, sans-serif', }, y: { formatter: function (val) { return val } } } } var options6 = { series: [73], chart: { height: 350, type: 'radialBar', offsetY: 0 }, colors: ['#0B132B', '#222222'], plotOptions: { radialBar: { startAngle: -135, endAngle: 135, dataLabels: { name: { fontSize: '16px', color: undefined, offsetY: 120 }, value: { offsetY: 76, fontSize: '22px', color: undefined, formatter: function (val) { return val + "%"; } } } } }, fill: { type: 'gradient', gradient: { shade: 'dark', shadeIntensity: 0.15, inverseColors: false, opacityFrom: 1, opacityTo: 1, stops: [0, 50, 65, 91] }, }, stroke: { dashArray: 4 }, labels: ['Achieve Goals'], }; var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); var chart2 = new ApexCharts(document.querySelector("#chart2"), options2); chart2.render(); var chart3 = new ApexCharts(document.querySelector("#chart3"), options3); chart3.render(); var chart4 = new ApexCharts(document.querySelector("#chart4"), options4); chart4.render(); var chart5 = new ApexCharts(document.querySelector("#chart5"), options5); chart5.render(); var chart6 = new ApexCharts(document.querySelector("#chart6"), options6); chart6.render(); // datatable init $('document').ready(function(){ $('.data-table').DataTable({ scrollCollapse: true, autoWidth: true, responsive: true, searching: false, bLengthChange: false, bPaginate: false, bInfo: false, columnDefs: [{ targets: "datatable-nosort", orderable: false, }], "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "language": { "info": "_START_-_END_ of _TOTAL_ entries", searchPlaceholder: "Search", paginate: { next: '', previous: '' } }, }); });