Closes #1

README.md

@@ -64,7 +64,7 @@ The following commands will then be available from the repository root:
     > gulp lint             // perform code linting
     > gulp build            // build dist files
     > gulp build --watch    // build and watch for changes
-		> gulp package          // create an archive with dist files and samples
+    > gulp package          // create an archive with dist files and samples
 
 ## License
 

samples/index.js

@@ -1,3 +1,5 @@
+'use strict';
+
 var DEFAULT_COLORS1 = ['#f08700', '#f49f0a', '#efca08', '#00a6a6', '#bbdef0'];
 var DEFAULT_COLORS2 = ['#7fb7be', '#357266', '#dacc3e', '#bc2c1a', '#7d1538'];
 
@@ -30,11 +32,35 @@ new Chart(ctx, {
 		},
 		plugins: {
 			doughnutlabel: {
-				labels: ['The title', 'The subtitle', '$100.000', '95%'],
-				font: {
-					size: '60'
-				},
-				color: 'grey'
+				labels: [
+					{
+						text: 'The title',
+						font: {
+							size: '60'
+						}
+					},
+					{
+						text: 'The subtitle',
+						font: {
+							size: '50'
+						},
+						color: 'grey'
+					},
+					{
+						text: '$100.000',
+						font: {
+							size: '30'
+						},
+						color: 'red'
+					},
+					{
+						text: '95%',
+						font: {
+							size: '45'
+						},
+						color: 'green'
+					}
+				]
 			}
 		}
 	}
@@ -69,14 +95,18 @@ new Chart(ctx, {
 		},
 		plugins: {
 			doughnutlabel: {
-				labels: ['This is one line of text'],
-				font: {
-					size: '60',
-					family: 'Arial, Helvetica, sans-serif',
-					style: 'italic',
-					weight: 'bold'
-				},
-				color: '#bc2c1a'
+				labels: [
+					{
+						text: 'This is one line of text',
+						font: {
+							size: '60',
+							family: 'Arial, Helvetica, sans-serif',
+							style: 'italic',
+							weight: 'bold'
+						},
+						color: '#bc2c1a'
+					}
+				]
 			}
 		}
 	}

samples/utils.js

@@ -1,4 +1,4 @@
-// Google Analytics 
+// Google Analytics
 /* eslint-disable */
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -8,4 +8,4 @@ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 ga('create', 'UA-119754641-1', 'auto');
 ga('send', 'pageview');
 /* eslint-enable */
-// End Google Analytics 
+// End Google Analytics

src/plugin.js

@@ -12,9 +12,18 @@ function drawDoughnutLabel(chart, options) {
 	if (options && options.labels && options.labels.length > 0) {
 		var ctx = chart.ctx;
 		var resolve = helpers.options.resolve;
-		var color = resolve([options.color, Chart.defaults.global.defaultFontColor], ctx, 0);
-		var font = utils.parseFont(resolve([options.font, {}], ctx, 0));
-		var textAreaSize = utils.textSize(ctx, options.labels, font);
+
+		var innerLabels = [];
+		options.labels.forEach(function(label) {
+			var innerLabel = {
+				text: label.text,
+				font: utils.parseFont(resolve([label.font, options.font, {}], ctx, 0)),
+				color: resolve([label.color, options.color, Chart.defaults.global.defaultFontColor], ctx, 0)
+			};
+			innerLabels.push(innerLabel);
+		});
+
+		var textAreaSize = utils.textSize(ctx, innerLabels);
 
 		// Calculate the adjustment ratio to fit the text area into the doughnut inner circle
 		var hypotenuse = Math.sqrt(Math.pow(textAreaSize.width, 2) + Math.pow(textAreaSize.height, 2));
@@ -23,16 +32,17 @@ function drawDoughnutLabel(chart, options) {
 
 		// Adjust the font if necessary and recalculate the text area after applying the fit ratio
 		if (fitRatio < 1) {
-			font.size = Math.floor(font.size * fitRatio);
-			font.lineHeight = undefined;
-			font = utils.parseFont(resolve([font, {}], ctx, 0));
-			textAreaSize = utils.textSize(ctx, options.labels, font);
+			innerLabels.forEach(function(innerLabel) {
+				innerLabel.font.size = Math.floor(innerLabel.font.size * fitRatio);
+				innerLabel.font.lineHeight = undefined;
+				innerLabel.font = utils.parseFont(resolve([innerLabel.font, {}], ctx, 0));
+			});
+
+			textAreaSize = utils.textSize(ctx, innerLabels);
 		}
 
 		ctx.textAlign = 'center';
 		ctx.textBaseline = 'middle';
-		ctx.fillStyle = color;
-		ctx.font = font.string;
 
 		// The center of the inner circle
 		var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
@@ -42,13 +52,18 @@ function drawDoughnutLabel(chart, options) {
 		var topY = centerY - textAreaSize.height / 2;
 
 		var i;
-		var ilen = options.labels.length;
+		var ilen = innerLabels.length;
+		var currentHeight = 0;
 		for (i = 0; i < ilen; ++i) {
+			ctx.fillStyle = innerLabels[i].color;
+			ctx.font = innerLabels[i].font.string;
+
 			// The Y center of each line
-			var lineCenterY = topY + font.lineHeight / 2 + font.lineHeight * i;
+			var lineCenterY = topY + innerLabels[i].font.lineHeight / 2 + currentHeight;
+			currentHeight += innerLabels[i].font.lineHeight;
 
 			// Draw each line of text
-			ctx.fillText(options.labels[i], centerX, lineCenterY);
+			ctx.fillText(innerLabels[i].text, centerX, lineCenterY);
 		}
 	}
 }

src/utils.js

@@ -33,23 +33,24 @@ var utils = {
 			+ font.family;
 	},
 
-	textSize: function(ctx, lines, font) {
-		var items = [].concat(lines);
+	textSize: function(ctx, labels) {
+		var items = [].concat(labels);
 		var ilen = items.length;
 		var prev = ctx.font;
 		var width = 0;
+		var height = 0;
 		var i;
 
-		ctx.font = font.string;
-
 		for (i = 0; i < ilen; ++i) {
-			width = Math.max(ctx.measureText(items[i]).width, width);
+			ctx.font = items[i].font.string;
+			width = Math.max(ctx.measureText(items[i].text).width, width);
+			height += items[i].font.lineHeight;
 		}
 
 		ctx.font = prev;
 
 		var result = {
-			height: ilen * font.lineHeight,
+			height: height,
 			width: width
 		};
 		return result;