Add support for multi-line xLabels

src/Chart.Core.js

@@ -1574,9 +1574,15 @@
 		fit: function(){
 			// First we need the width of the yLabels, assuming the xLabels aren't rotated
 
+			// To support multi-line labels, we must compute the maximum number of stacked labels
+			var labelStackCount = 1;
+			each(this.xLabels, (function(label, index) {
+			  labelStackCount = Math.max(labelStackCount, label.split('\n').length);
+			}), this);
+
 			// To do that we need the base line at the top and base of the chart, assuming there is no x label rotation
 			this.startPoint = (this.display) ? this.fontSize : 0;
-			this.endPoint = (this.display) ? this.height - (this.fontSize * 1.5) - 5 : this.height; // -5 to pad labels
+			this.endPoint = this.display ? this.height - (this.fontSize * labelStackCount + this.fontSize * 0.5) - 5 : this.height; // -5 to pad labels
 
 			// Apply padding settings to the start and end point.
 			this.startPoint += this.padding;
@@ -1809,7 +1815,9 @@
 					ctx.font = this.font;
 					ctx.textAlign = (isRotated) ? "right" : "center";
 					ctx.textBaseline = (isRotated) ? "middle" : "top";
-					ctx.fillText(label, 0, 0);
+					each(label.split('\n'), function(line, index2) {
+					  ctx.fillText(line, 0, index2 * this.fontSize);
+					}, this);
 					ctx.restore();
 				},this);
 
@@ -2073,7 +2081,9 @@
 							ctx.textBaseline = 'top';
 						}
 
-						ctx.fillText(this.labels[i], pointLabelPosition.x, pointLabelPosition.y);
+						each(this.labels[i].split('\n'), function(line, index2) {
+						  ctx.fillText(line, pointLabelPosition.x, pointLabelPosition.y + index2 * this.fontSize);
+						}, this);
 					}
 				}
 			}