Progressive Chart

														
<div id="radial_chart_1"></div>
													

														
<!-- Apex JS -->
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/radial-chart-init.js"></script>
/*Basic Chart*/
var options = {
    series: [70],
    chart: {
        height: 350,
        type: 'radialBar',
    },
    plotOptions: {
        radialBar: {
            hollow: {
                size: '70%',
            }
        },
    },
    labels: ['Cricket'],
    colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
};

var chart = new ApexCharts(document.querySelector("#radial_chart_1"), options);
chart.render();
													

														
<div id="radial_chart_2"></div>
													

														
/*Multiple Chart*/
var options1 = {
	series: [44, 55, 67, 83],
	chart: {
		height: 350,
		type: 'radialBar',
	},
	plotOptions: {
		radialBar: {
			dataLabels: {
				name: {
					fontSize: '22px',
				},
				value: {
					fontSize: '16px',
				},
				total: {
					show: true,
					label: 'Total',
					formatter: function(w) {
						// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
						return 249
					}
				}
			}
		}
	},
	labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
};

var chart1 = new ApexCharts(document.querySelector("#radial_chart_2"), options1);
chart1.render();
													

														
<div id="radial_chart_3"></div>
													

														
/*Custom angle Chart*/
var options2 = {
	series: [76, 67, 61, 90],
	chart: {
		height: 390,
		type: 'radialBar',
	},
	plotOptions: {
		radialBar: {
			offsetY: 0,
			startAngle: 0,
			endAngle: 270,
			hollow: {
				margin: 5,
				size: '30%',
				background: 'transparent',
				image: undefined,
			},
			dataLabels: {
				name: {
					show: false,
				},
				value: {
					show: false,
				}
			}
		}
	},
	colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3'],
	labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
	
	legend: {
		show: true,
		floating: true,
		fontSize: '16px',
		position: 'left',
		offsetX: 160,
		offsetY: 15,
		labels: {
			useSeriesColors: true,
		},
		markers: {
			size: 0
		},
		formatter: function(seriesName, opts) {
			return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
		},
		itemMargin: {
			vertical: 3
		}
	},
	responsive: [{
		breakpoint: 480,
		options: {
			legend: {
				show: false
			}
		}
	}]
};
var chart2 = new ApexCharts(document.querySelector("#radial_chart_3"), options2);
chart2.render();
													

														
<div id="radial_chart_4"></div>
													

														
/*Gradient Chart*/
var options3 = {
	series: [75],
	chart: {
		height: 350,
		type: 'radialBar',
		toolbar: {
			show: true
		}
	},
	plotOptions: {
		radialBar: {
			startAngle: -135,
			endAngle: 225,
			hollow: {
				margin: 0,
				size: '70%',
				background: '#fff',
				image: undefined,
				imageOffsetX: 0,
				imageOffsetY: 0,
				position: 'front',
				dropShadow: {
					enabled: true,
					top: 3,
					left: 0,
					blur: 4,
					opacity: 0.24
				}
			},
			track: {
				background: '#fff',
				strokeWidth: '67%',
				margin: 0, // margin is in pixels
				dropShadow: {
					enabled: true,
					top: -3,
					left: 0,
					blur: 4,
					opacity: 0.35
				}
			},

			dataLabels: {
				show: true,
				name: {
					offsetY: -10,
					show: true,
					color: '#888',
					fontSize: '17px'
				},
				value: {
					formatter: function(val) {
						return parseInt(val);
					},
					color: '#111',
					fontSize: '36px',
					show: true,
				}
			}
		}
	},
	fill: {
		type: 'gradient',
		gradient: {
			shade: 'dark',
			type: 'horizontal',
			shadeIntensity: 0.5,
			gradientToColors: ['#ABE5A1'],
			inverseColors: true,
			opacityFrom: 1,
			opacityTo: 1,
			stops: [0, 100]
		}
	},
	stroke: {
		lineCap: 'round'
	},
	labels: ['Percent'],
	colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
	
};

var chart3 = new ApexCharts(document.querySelector("#radial_chart_4"), options3);
chart3.render();
													

														
<div id="radial_chart_5"></div>
													

														
/*Stroked Gauge*/
var options4 = {
	series: [67],
	chart: {
		height: 350,
		type: 'radialBar',
		offsetY: -10
	},
	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,
			gradientToColors: ['#ABE5A1'],
			stops: [0, 50, 65, 91]
		},
	},
	stroke: {
		dashArray: 4
	},
	labels: ['Median Ratio'],
};

var chart4 = new ApexCharts(document.querySelector("#radial_chart_5"), options4);
chart4.render();
													

														
<div id="radial_chart_5"></div>
													

														
/*Semi circle*/
var options5 = {
	series: [76],
	chart: {
		type: 'radialBar',
		offsetY: -20,
		height: 350,
		sparkline: {
			enabled: true
		}
	},
	plotOptions: {
		radialBar: {
			startAngle: -90,
			endAngle: 90,
			track: {
				background: "#e7e7e7",
				strokeWidth: '97%',
				margin: 5, // margin is in pixels
				dropShadow: {
					enabled: true,
					top: 2,
					left: 0,
					color: '#999',
					opacity: 1,
					blur: 2
				}
			},
			dataLabels: {
				name: {
					show: false
				},
				value: {
					offsetY: -2,
					fontSize: '22px'
				}
			}
		}
	},
	grid: {
		padding: {
			top: -10
		}
	},
	fill: {
		type: 'gradient',
		gradient: {
			shade: 'light',
			shadeIntensity: 0.4,
			inverseColors: false,
			opacityFrom: 1,
			opacityTo: 1,
			gradientToColors: ['#ABE5A1'],
			stops: [0, 50, 53, 91]
		},
	},
	labels: ['Average Results'],
};

var chart5 = new ApexCharts(document.querySelector("#radial_chart_6"), options5);
chart5.render();