Pie & Donut Charts

														
<div id="pie_chart_1"></div>
													

														
<!-- Apex JS -->																														
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/pie-chart-init.js"></script>
/*Basic Chart*/
 var options = {
  series: [44, 55, 13, 43, 22],
  chart: {
  width: 380,
  type: 'pie',
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
responsive: [{
  breakpoint: 480,
  options: {
	chart: {
	  width: 200
	},
	legend: {
	  position: 'bottom'
	}
  }
}]
};

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

														
<div id="pie_chart_2"></div>
													

														
/*Donut Chart*/
var options1 = {
	series: [44, 55, 41, 17, 15],
	chart: {
	type: 'donut',
	width: 380,
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
responsive: [{
	breakpoint: 480,
	options: {
	chart: {
		width: 200
	},
	legend: {
		position: 'bottom'
	}
	}
}]
};

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

														
<div id="pie_chart_3"></div>
													

														
/*Donut Update*/
var options2 = {
		series: [44, 55, 13, 33],
		chart: {
		width: 380,
		type: 'donut',
	},
	dataLabels: {
		enabled: false
	},
	colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
	responsive: [{
		breakpoint: 480,
		options: {
		chart: {
			width: 200
		},
		legend: {
			show: false
		}
		}
	}],
	legend: {
		position: 'right',
		offsetY: 0,
		height: 230,
	}
};

var chart2 = new ApexCharts(document.querySelector("#pie_chart_3"), options2);
chart2.render();


function appendData() {
var arr = chart2.w.globals.series.slice()
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
return arr;
}

function removeData() {
var arr = chart2.w.globals.series.slice()
arr.pop()
return arr;
}

function randomize() {
return chart2.w.globals.series.map(function() {
	return Math.floor(Math.random() * (100 - 1 + 1)) + 1
})
}

function reset() {
return options.series
}

document.querySelector("#randomize").addEventListener("click", function() {
chart2.updateSeries(randomize())
})

document.querySelector("#add").addEventListener("click", function() {
chart2.updateSeries(appendData())
})

document.querySelector("#remove").addEventListener("click", function() {
chart2.updateSeries(removeData())
})

document.querySelector("#reset").addEventListener("click", function() {
chart2.updateSeries(reset())
})
													

														
<div id="pie_chart_4"></div>
													

														
/*Monochrome Pie*/
var options3 = {
	series: [25, 15, 44, 55, 41, 17],
	chart: {
	width: 380,
	type: 'pie',
},
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
theme: {
	monochrome: {
	enabled: true,
	color: '#ff0000',
	},
	
},
plotOptions: {
	pie: {
	dataLabels: {
		offset: -5
	}
	}
},
title: {
	text: "Number of leads"
},
dataLabels: {
	formatter(val, opts) {
	const name = opts.w.globals.labels[opts.seriesIndex]
	return [name, val.toFixed(1) + '%']
	}
},
legend: {
	show: false
}
};

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

														
<div id="pie_chart_5"></div>
													

														
/*Gradient Donut*/
var options4 = {
	series: [44, 55, 41, 17, 15],
	chart: {
	width: 380,
	type: 'donut',
},
dataLabels: {
	enabled: false
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
fill: {
	type: 'gradient',
},
legend: {
	formatter: function(val, opts) {
	return val + " - " + opts.w.globals.series[opts.seriesIndex]
	}
},
responsive: [{
	breakpoint: 480,
	options: {
	chart: {
		width: 200
	},
	legend: {
		position: 'bottom'
	}
	}
}]
};

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