lavkach3
1document.addEventListener("DOMContentLoaded", function () {2// Basic Radar Chart -------> RADAR CHART3var options_basic = {4series: [5{6name: "Series 1",7data: [80, 50, 30, 40, 100, 20],8},9],10chart: {11fontFamily: "inherit",12height: 350,13type: "radar",14toolbar: {15show: false,16},17},18colors: ["#615dff"],19xaxis: {20categories: ["January", "February", "March", "April", "May", "June"],21},22tooltip: {23theme: "dark",24},25};26
27var chart_radar_basic = new ApexCharts(28document.querySelector("#chart-radar-basic"),29options_basic
30);31chart_radar_basic.render();32
33// Multiple Series Radar Chart -------> RADAR CHART34var options_multiple = {35series: [36{37name: "Series 1",38data: [80, 50, 30, 40, 100, 20],39},40{41name: "Series 2",42data: [20, 30, 40, 80, 20, 80],43},44{45name: "Series 3",46data: [44, 76, 78, 13, 43, 10],47},48],49chart: {50fontFamily: "inherit",51height: 350,52type: "radar",53toolbar: {54show: false,55},56
57dropShadow: {58enabled: true,59blur: 1,60left: 1,61top: 1,62},63},64colors: ["#615dff", "#3dd9eb", "#ffae1f"],65stroke: {66width: 2,67},68fill: {69opacity: 0.1,70},71markers: {72size: 0,73},74xaxis: {75categories: ["2011", "2012", "2013", "2014", "2015", "2016"],76},77legend: {78labels: {79colors: ["#a1aab2"],80},81},82};83
84var chart_radar_multiple_series = new ApexCharts(85document.querySelector("#chart-radar-multiple-series"),86options_multiple
87);88chart_radar_multiple_series.render();89
90// Polygon-fill Radar Chart -------> RADAR CHART91var options_polygon = {92series: [93{94name: "Series 1",95data: [20, 100, 40, 30, 50, 80, 33],96},97],98chart: {99fontFamily: "inherit",100height: 350,101type: "radar",102toolbar: {103show: false,104},105},106dataLabels: {107enabled: true,108},109plotOptions: {110radar: {111size: 140,112polygons: {113strokeColors: "var(--bs-border-color)",114fill: {115colors: ["var(--bs-light)", "var(--bs-body-bg)"],116},117},118},119},120colors: ["#615dff"],121markers: {122size: 4,123colors: ["#fff"],124strokeColor: "#615dff",125strokeWidth: 2,126},127tooltip: {128y: {129formatter: function (val) {130return val;131},132},133theme: "dark",134},135xaxis: {136categories: [137"Sunday",138"Monday",139"Tuesday",140"Wednesday",141"Thursday",142"Friday",143"Saturday",144],145},146yaxis: {147tickAmount: 7,148labels: {149formatter: function (val, i) {150if (i % 2 === 0) {151return val;152} else {153return "";154}155},156},157},158};159
160var chart_radar_polygon_fill = new ApexCharts(161document.querySelector("#chart-radar-polygon-fill"),162options_polygon
163);164chart_radar_polygon_fill.render();165});166