brizental · June 22, 2018 06:17
diff --git a/chart-no-labels.js b/chart-no-labels.js
 <!doctype html>
 <html>

 <head>
 	<title>Doughnut Chart</title>
 	<script src="../../dist/Chart.bundle.js"></script>
 	<script src="../utils.js"></script>
 	<style>
 	canvas {
 		-moz-user-select: none;
 		-webkit-user-select: none;
 		-ms-user-select: none;
 	}
 	</style>
 </head>

 <body>
 	<div id="canvas-holder" style="width:40%">
 		<canvas id="chart-area"></canvas>
 	</div>
 	<button id="randomizeData">Randomize Data</button>
 	<button id="addDataset">Add Dataset</button>
 	<button id="removeDataset">Remove Dataset</button>
 	<button id="addData">Add Data</button>
 	<button id="removeData">Remove Data</button>
 	<button id="changeCircleSize">Semi/Full Circle</button>
 	<script>
 		var randomScalingFactor = function() {
 			return Math.round(Math.random() * 100);
 		};

 		var isArray = Array.isArray ? Array.isArray : function(value) {
 			return Object.prototype.toString.call(value) === '[object Array]';
 		};

 		var valueOrDefault = function(value, defaultValue) {
 			return typeof value === 'undefined' ? defaultValue : value;
 		};

 		var valueAtIndexOrDefault = function(value, index, defaultValue) {
 			return valueOrDefault(isArray(value) ? value[index] : value, defaultValue);
 		};

 		var config = {
 			type: 'doughnut',
 			data: {
 				datasets: [{
 					data: [
 						randomScalingFactor(),
 						randomScalingFactor(),
 						randomScalingFactor(),
 						randomScalingFactor(),
 						randomScalingFactor(),
 					],
 					backgroundColor: [
 						window.chartColors.red,
 						window.chartColors.orange,
 						window.chartColors.yellow,
 						window.chartColors.green,
 						window.chartColors.blue,
 					],
 					label: 'Dataset 1'
 				}],
 				labels: [
 					'Red',
 					'Orange',
 					'Yellow',
 					'Green',
 					'Blue'
 				]
 			},
 			options: {
 				responsive: true,
 				legend: {
 					position: 'top',
 					labels: {
 						generateLabels: (chart) => {
 							var data = chart.data;
 							if (data.labels.length && data.datasets.length) {
 								return data.labels.map(function(label, i) {
 									var meta = chart.getDatasetMeta(0);
 									var ds = data.datasets[0];
 									var arc = meta.data[i];
 									var custom = arc && arc.custom || {};
 									var arcOpts = chart.options.elements.arc;
 									var fill = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
 									var stroke = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
 									var bw = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

 									return {
 										text: "",
 										fillStyle: fill,
 										strokeStyle: stroke,
 										lineWidth: bw,
 										hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

 										// Extra data used for toggling the correct item
 										index: i
 									};
 								});
 							}
 							return [];
 						}
 					}
 				},
 				title: {
 					display: true,
 					text: 'Chart.js Doughnut Chart'
 				},
 				animation: {
 					animateScale: true,
 					animateRotate: true
 				}
 			}
 		};

 		window.onload = function() {
 			var ctx = document.getElementById('chart-area').getContext('2d');
 			window.myDoughnut = new Chart(ctx, config);
 		};

 		document.getElementById('randomizeData').addEventListener('click', function() {
 			config.data.datasets.forEach(function(dataset) {
 				dataset.data = dataset.data.map(function() {
 					return randomScalingFactor();
 				});
 			});

 			window.myDoughnut.update();
 		});

 		var colorNames = Object.keys(window.chartColors);
 		document.getElementById('addDataset').addEventListener('click', function() {
 			var newDataset = {
 				backgroundColor: [],
 				data: [],
 				label: 'New dataset ' + config.data.datasets.length,
 			};

 			for (var index = 0; index < config.data.labels.length; ++index) {
 				newDataset.data.push(randomScalingFactor());

 				var colorName = colorNames[index % colorNames.length];
 				var newColor = window.chartColors[colorName];
 				newDataset.backgroundColor.push(newColor);
 			}

 			config.data.datasets.push(newDataset);
 			window.myDoughnut.update();
 		});

 		document.getElementById('addData').addEventListener('click', function() {
 			if (config.data.datasets.length > 0) {
 				config.data.labels.push('data #' + config.data.labels.length);

 				var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
 				var newColor = window.chartColors[colorName];

 				config.data.datasets.forEach(function(dataset) {
 					dataset.data.push(randomScalingFactor());
 					dataset.backgroundColor.push(newColor);
 				});

 				window.myDoughnut.update();
 			}
 		});

 		document.getElementById('removeDataset').addEventListener('click', function() {
 			config.data.datasets.splice(0, 1);
 			window.myDoughnut.update();
 		});

 		document.getElementById('removeData').addEventListener('click', function() {
 			config.data.labels.splice(-1, 1); // remove the label first

 			config.data.datasets.forEach(function(dataset) {
 				dataset.data.pop();
 				dataset.backgroundColor.pop();
 			});

 			window.myDoughnut.update();
 		});

 		document.getElementById('changeCircleSize').addEventListener('click', function() {
 			if (window.myDoughnut.options.circumference === Math.PI) {
 				window.myDoughnut.options.circumference = 2 * Math.PI;
 				window.myDoughnut.options.rotation = -Math.PI / 2;
 			} else {
 				window.myDoughnut.options.circumference = Math.PI;
 				window.myDoughnut.options.rotation = -Math.PI;
 			}

 			window.myDoughnut.update();
 		});
 	</script>
 </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<title>Doughnut Chart</title>
	<script src="../../dist/Chart.bundle.js"></script>
	<script src="../utils.js"></script>
	<style>
	canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	}
	</style>
	</head>

	<body>
	<div id="canvas-holder" style="width:40%">
	<canvas id="chart-area"></canvas>
	</div>
	<button id="randomizeData">Randomize Data</button>
	<button id="addDataset">Add Dataset</button>
	<button id="removeDataset">Remove Dataset</button>
	<button id="addData">Add Data</button>
	<button id="removeData">Remove Data</button>
	<button id="changeCircleSize">Semi/Full Circle</button>
	<script>
	var randomScalingFactor = function() {
	return Math.round(Math.random() * 100);
	};

	var isArray = Array.isArray ? Array.isArray : function(value) {
	return Object.prototype.toString.call(value) === '[object Array]';
	};

	var valueOrDefault = function(value, defaultValue) {
	return typeof value === 'undefined' ? defaultValue : value;
	};

	var valueAtIndexOrDefault = function(value, index, defaultValue) {
	return valueOrDefault(isArray(value) ? value[index] : value, defaultValue);
	};

	var config = {
	type: 'doughnut',
	data: {
	datasets: [{
	data: [
	randomScalingFactor(),
	randomScalingFactor(),
	randomScalingFactor(),
	randomScalingFactor(),
	randomScalingFactor(),
	],
	backgroundColor: [
	window.chartColors.red,
	window.chartColors.orange,
	window.chartColors.yellow,
	window.chartColors.green,
	window.chartColors.blue,
	],
	label: 'Dataset 1'
	}],
	labels: [
	'Red',
	'Orange',
	'Yellow',
	'Green',
	'Blue'
	]
	},
	options: {
	responsive: true,
	legend: {
	position: 'top',
	labels: {
	generateLabels: (chart) => {
	var data = chart.data;
	if (data.labels.length && data.datasets.length) {
	return data.labels.map(function(label, i) {
	var meta = chart.getDatasetMeta(0);
	var ds = data.datasets[0];
	var arc = meta.data[i];
	var custom = arc && arc.custom \|\| {};
	var arcOpts = chart.options.elements.arc;
	var fill = custom.backgroundColor ? custom.backgroundColor : valueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
	var stroke = custom.borderColor ? custom.borderColor : valueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
	var bw = custom.borderWidth ? custom.borderWidth : valueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

	return {
	text: "",
	fillStyle: fill,
	strokeStyle: stroke,
	lineWidth: bw,
	hidden: isNaN(ds.data[i]) \|\| meta.data[i].hidden,

	// Extra data used for toggling the correct item
	index: i
	};
	});
	}
	return [];
	}
	}
	},
	title: {
	display: true,
	text: 'Chart.js Doughnut Chart'
	},
	animation: {
	animateScale: true,
	animateRotate: true
	}
	}
	};

	window.onload = function() {
	var ctx = document.getElementById('chart-area').getContext('2d');
	window.myDoughnut = new Chart(ctx, config);
	};

	document.getElementById('randomizeData').addEventListener('click', function() {
	config.data.datasets.forEach(function(dataset) {
	dataset.data = dataset.data.map(function() {
	return randomScalingFactor();
	});
	});

	window.myDoughnut.update();
	});

	var colorNames = Object.keys(window.chartColors);
	document.getElementById('addDataset').addEventListener('click', function() {
	var newDataset = {
	backgroundColor: [],
	data: [],
	label: 'New dataset ' + config.data.datasets.length,
	};

	for (var index = 0; index < config.data.labels.length; ++index) {
	newDataset.data.push(randomScalingFactor());

	var colorName = colorNames[index % colorNames.length];
	var newColor = window.chartColors[colorName];
	newDataset.backgroundColor.push(newColor);
	}

	config.data.datasets.push(newDataset);
	window.myDoughnut.update();
	});

	document.getElementById('addData').addEventListener('click', function() {
	if (config.data.datasets.length > 0) {
	config.data.labels.push('data #' + config.data.labels.length);

	var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];
	var newColor = window.chartColors[colorName];

	config.data.datasets.forEach(function(dataset) {
	dataset.data.push(randomScalingFactor());
	dataset.backgroundColor.push(newColor);
	});

	window.myDoughnut.update();
	}
	});

	document.getElementById('removeDataset').addEventListener('click', function() {
	config.data.datasets.splice(0, 1);
	window.myDoughnut.update();
	});

	document.getElementById('removeData').addEventListener('click', function() {
	config.data.labels.splice(-1, 1); // remove the label first

	config.data.datasets.forEach(function(dataset) {
	dataset.data.pop();
	dataset.backgroundColor.pop();
	});

	window.myDoughnut.update();
	});

	document.getElementById('changeCircleSize').addEventListener('click', function() {
	if (window.myDoughnut.options.circumference === Math.PI) {
	window.myDoughnut.options.circumference = 2 * Math.PI;
	window.myDoughnut.options.rotation = -Math.PI / 2;
	} else {
	window.myDoughnut.options.circumference = Math.PI;
	window.myDoughnut.options.rotation = -Math.PI;
	}

	window.myDoughnut.update();
	});
	</script>
	</body>

	</html>