lavkach3
1document.addEventListener("DOMContentLoaded", function () {2// Basic Radial Bar Chart -------> RADIAL CHART3var options_basic = {4series: [70],5chart: {6fontFamily: "inherit",7height: 350,8type: "radialBar",9},10colors: ["#615dff"],11plotOptions: {12radialBar: {13hollow: {14size: "70%",15},16dataLabels: {17value: {18color: "#a1aab2",19show: true,20},21},22},23},24labels: ["Cricket"],25};26
27var chart_radial_basic = new ApexCharts(28document.querySelector("#chart-radial-basic"),29options_basic
30);31chart_radial_basic.render();32
33// Multiple Radial Bar Chart -------> RADIAL CHART34var options_multiple = {35series: [44, 55, 67, 83],36chart: {37fontFamily: "inherit",38height: 350,39type: "radialBar",40},41colors: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],42plotOptions: {43radialBar: {44dataLabels: {45name: {46fontSize: "22px",47},48value: {49fontSize: "16px",50color: "#a1aab2",51},52total: {53show: true,54label: "Total",55formatter: function (w) {56// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function57return 249;58},59},60},61},62},63labels: ["Apples", "Oranges", "Bananas", "Berries"],64};65
66var chart_radial_multiple = new ApexCharts(67document.querySelector("#chart-radial-multiple"),68options_multiple
69);70chart_radial_multiple.render();71
72// Custome circle Radial Bar Chart -------> RADIAL CHART73var options_custom_circle = {74series: [76, 67, 61, 90],75chart: {76fontFamily: "inherit",77height: 390,78type: "radialBar",79},80plotOptions: {81radialBar: {82offsetY: 0,83startAngle: 0,84endAngle: 270,85hollow: {86margin: 5,87size: "30%",88background: "transparent",89image: undefined,90},91dataLabels: {92name: {93show: false,94},95value: {96show: false,97},98},99},100},101colors: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],102labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],103legend: {104show: true,105floating: true,106fontSize: "16px",107position: "left",108offsetX: 80,109offsetY: 15,110labels: {111useSeriesColors: true,112},113markers: {114size: 0,115},116formatter: function (seriesName, opts) {117return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];118},119itemMargin: {120vertical: 3,121},122},123responsive: [124{125breakpoint: 480,126options: {127legend: {128show: false,129},130},131},132],133};134
135var chart_radial_custom_circle = new ApexCharts(136document.querySelector("#chart-radial-circle"),137options_custom_circle
138);139chart_radial_custom_circle.render();140
141// Stroked Gauge Radial Bar Chart -------> RADIAL CHART142var options_gradient = {143series: [75],144chart: {145fontFamily: "inherit",146height: 350,147type: "radialBar",148toolbar: {149show: false,150},151},152plotOptions: {153radialBar: {154startAngle: -135,155endAngle: 225,156hollow: {157margin: 0,158size: "70%",159background: "#fff",160image: undefined,161imageOffsetX: 0,162imageOffsetY: 0,163position: "front",164dropShadow: {165enabled: true,166top: 3,167left: 0,168blur: 4,169opacity: 0.24,170},171},172track: {173background: "#fff",174strokeWidth: "67%",175margin: 0, // margin is in pixels176dropShadow: {177enabled: true,178top: -3,179left: 0,180blur: 4,181opacity: 0.35,182},183},184
185dataLabels: {186show: true,187name: {188offsetY: -10,189show: true,190color: "#615dff",191fontSize: "17px",192},193value: {194formatter: function (val) {195return parseInt(val);196},197color: "#6610f2",198fontSize: "36px",199show: true,200},201},202},203},204fill: {205type: "gradient",206gradient: {207shade: "dark",208type: "horizontal",209shadeIntensity: 0.5,210gradientToColors: ["#615dff"],211inverseColors: true,212opacityFrom: 1,213opacityTo: 1,214stops: [0, 100],215},216},217stroke: {218lineCap: "round",219},220labels: ["Percent"],221};222
223var chart_radial_gradient = new ApexCharts(224document.querySelector("#chart-radial-gradient"),225options_gradient
226);227chart_radial_gradient.render();228
229// Stroked Gauge Radial Bar Chart -------> RADIAL CHART230var options_strocked = {231series: [67],232chart: {233fontFamily: "inherit",234height: 350,235type: "radialBar",236offsetY: -10,237},238colors: ["#615dff"],239plotOptions: {240radialBar: {241startAngle: -135,242endAngle: 135,243dataLabels: {244name: {245fontSize: "16px",246color: undefined,247offsetY: 120,248},249value: {250offsetY: 76,251fontSize: "22px",252color: "#a1aab2",253formatter: function (val) {254return val + "%";255},256},257},258},259},260fill: {261type: "gradient",262gradient: {263shade: "dark",264shadeIntensity: 0.15,265inverseColors: false,266opacityFrom: 1,267opacityTo: 1,268stops: [0, 50, 65, 91],269},270},271stroke: {272dashArray: 4,273},274labels: ["Median Ratio"],275};276
277var chart_radial_strocked = new ApexCharts(278document.querySelector("#chart-radial-stroked-gauge"),279options_strocked
280);281chart_radial_strocked.render();282
283// Semi Circle Radial Bar Chart -------> RADIAL CHART284var options_semi_circle = {285series: [76],286chart: {287fontFamily: "inherit",288type: "radialBar",289offsetY: -20,290width: 400,291height: 300,292sparkline: {293enabled: true,294},295},296plotOptions: {297radialBar: {298startAngle: -90,299endAngle: 90,300track: {301background: "#615dff",302strokeWidth: "97%",303margin: 5, // margin is in pixels304dropShadow: {305enabled: true,306top: 2,307left: 0,308color: "#999",309opacity: 1,310blur: 2,311},312},313dataLabels: {314name: {315show: false,316},317value: {318offsetY: -2,319fontSize: "22px",320color: "#a1aab2",321},322},323},324},325grid: {326padding: {327top: -10,328},329},330fill: {331type: "gradient",332gradient: {333color: "#6610f2",334shade: "light",335shadeIntensity: 0.4,336inverseColors: false,337opacityFrom: 1,338opacityTo: 1,339stops: [0, 50, 53, 91],340},341},342labels: ["Average Results"],343};344
345var chart_radial_semi_circle = new ApexCharts(346document.querySelector("#chart-radial-semi-circle"),347options_semi_circle
348);349chart_radial_semi_circle.render();350});351