diff --git a/docs/02-Scales.md b/docs/02-Scales.md
index 83e52d49e..d0531a00d 100644
--- a/docs/02-Scales.md
+++ b/docs/02-Scales.md
@@ -74,7 +74,7 @@ The grid line configuration is nested under the scale configuration in the `tick
Name | Type | Default | Description
--- | --- | --- | ---
autoSkip | Boolean | true | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
-callback | Function | `function(value) { return '' + value; } ` | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](#scales-creating-custom-tick-formats) section below.
+callback | Function | `function(value) { return helpers.isArray(value) ? value : '' + value; }` | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](#scales-creating-custom-tick-formats) section below.
display | Boolean | true | If true, show the ticks.
fontColor | Color | "#666" | Font color for the tick labels.
fontFamily | String | "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" | Font family for the tick labels, follows CSS font-family options.
@@ -359,8 +359,8 @@ The default configuration for a scale can be easily changed using the scale serv
For example, to set the minimum value of 0 for all linear scales, you would do the following. Any linear scales created after this time would now have a minimum of 0.
```
Chart.scaleService.updateScaleDefaults('linear', {
- ticks: {
- min: 0
- }
+ ticks: {
+ min: 0
+ }
})
```
diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
index 45b95d231..34346bc08 100644
--- a/docs/03-Line-Chart.md
+++ b/docs/03-Line-Chart.md
@@ -96,7 +96,7 @@ The label key on each dataset is optional, and can be used when generating a sca
### Data Points
-The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the `data.labels` array must be specified and must contain a label for each point.
+The data passed to the chart can be passed in two formats. The most common method is to pass the data array as an array of numbers. In this case, the `data.labels` array must be specified and must contain a label for each point or, in the case of labels to be displayed over multiple lines an array of labels (one for each line) i.e `[["June","2015"], "July"]`.
The alternate is used for sparse datasets. Data is specified using an object containing `x` and `y` properties. This is used for scatter charts as documented below.
@@ -177,4 +177,4 @@ var stackedLine = new Chart(ctx, {
}
}
});
-```
+```
\ No newline at end of file
diff --git a/samples/line-multiline-labels.html b/samples/line-multiline-labels.html
new file mode 100644
index 000000000..3fd0de5e1
--- /dev/null
+++ b/samples/line-multiline-labels.html
@@ -0,0 +1,218 @@
+
+
+
+
+ Line Chart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 958b0bd10..5808150f9 100644
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -817,7 +817,7 @@ module.exports = function(Chart) {
helpers.fontString = function(pixelSize, fontStyle, fontFamily) {
return fontStyle + " " + pixelSize + "px " + fontFamily;
};
- helpers.longestText = function(ctx, font, arrayOfStrings, cache) {
+ helpers.longestText = function(ctx, font, arrayOfThings, cache) {
cache = cache || {};
var data = cache.data = cache.data || {};
var gc = cache.garbageCollect = cache.garbageCollect || [];
@@ -830,31 +830,53 @@ module.exports = function(Chart) {
ctx.font = font;
var longest = 0;
- helpers.each(arrayOfStrings, function(string) {
- // Undefined strings should not be measured
- if (string !== undefined && string !== null) {
- var textWidth = data[string];
- if (!textWidth) {
- textWidth = data[string] = ctx.measureText(string).width;
- gc.push(string);
- }
-
- if (textWidth > longest) {
- longest = textWidth;
- }
+ helpers.each(arrayOfThings, function(thing) {
+ // Undefined strings and arrays should not be measured
+ if (thing !== undefined && thing !== null && helpers.isArray(thing) !== true) {
+ longest = helpers.measureText(ctx, data, gc, longest, thing);
+ } else if (helpers.isArray(thing)) {
+ // if it is an array lets measure each element
+ // to do maybe simplify this function a bit so we can do this more recursively?
+ helpers.each(thing, function(nestedThing) {
+ // Undefined strings and arrays should not be measured
+ if (nestedThing !== undefined && nestedThing !== null && !helpers.isArray(nestedThing)) {
+ longest = helpers.measureText(ctx, data, gc, longest, nestedThing);
+ }
+ });
}
});
var gcLen = gc.length / 2;
- if (gcLen > arrayOfStrings.length) {
+ if (gcLen > arrayOfThings.length) {
for (var i = 0; i < gcLen; i++) {
delete data[gc[i]];
}
gc.splice(0, gcLen);
}
-
return longest;
};
+ helpers.measureText = function (ctx, data, gc, longest, string) {
+ var textWidth = data[string];
+ if (!textWidth) {
+ textWidth = data[string] = ctx.measureText(string).width;
+ gc.push(string);
+ }
+ if (textWidth > longest) {
+ longest = textWidth;
+ }
+ return longest;
+ };
+ helpers.numberOfLabelLines = function(arrayOfThings) {
+ var numberOfLines = 1;
+ helpers.each(arrayOfThings, function(thing) {
+ if (helpers.isArray(thing)) {
+ if (thing.length > numberOfLines) {
+ numberOfLines = thing.length;
+ }
+ }
+ });
+ return numberOfLines;
+ };
helpers.drawRoundedRectangle = function(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index eea019911..171527b43 100644
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -43,8 +43,9 @@ module.exports = function(Chart) {
autoSkip: true,
autoSkipPadding: 0,
labelOffset: 0,
+ // We pass through arrays to be rendered as multiline labels, we convert Others to strings here.
callback: function(value) {
- return '' + value;
+ return helpers.isArray(value) ? value : '' + value;
}
}
};
@@ -320,13 +321,15 @@ module.exports = function(Chart) {
}
var largestTextWidth = helpers.longestText(me.ctx, tickLabelFont, me.ticks, me.longestTextCache);
+ var tallestLabelHeightInLines = helpers.numberOfLabelLines(me.ticks);
+ var lineSpace = tickFontSize * 0.5;
if (isHorizontal) {
// A horizontal axis is more constrained by the height.
me.longestLabelWidth = largestTextWidth;
// TODO - improve this calculation
- var labelHeight = (Math.sin(helpers.toRadians(me.labelRotation)) * me.longestLabelWidth) + 1.5 * tickFontSize;
+ var labelHeight = (Math.sin(helpers.toRadians(me.labelRotation)) * me.longestLabelWidth) + (tickFontSize * tallestLabelHeightInLines) + (lineSpace * tallestLabelHeightInLines);
minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight);
me.ctx.font = tickLabelFont;
@@ -602,7 +605,18 @@ module.exports = function(Chart) {
context.font = tickLabelFont;
context.textAlign = (isRotated) ? "right" : "center";
context.textBaseline = (isRotated) ? "middle" : options.position === "top" ? "bottom" : "top";
- context.fillText(label, 0, 0);
+
+ if (helpers.isArray(label)) {
+ for (var i = 0, y = 0; i < label.length; ++i) {
+ // We just make sure the multiline element is a string here..
+ context.fillText('' + label[i], 0, y);
+ // apply same lineSpacing as calculated @ L#320
+ y += (tickFontSize * 1.5);
+ }
+ } else {
+ context.fillText(label, 0, 0);
+ }
+
context.restore();
}
}, me);
diff --git a/test/core.helpers.tests.js b/test/core.helpers.tests.js
index de06e294d..ccc59c14a 100644
--- a/test/core.helpers.tests.js
+++ b/test/core.helpers.tests.js
@@ -454,6 +454,68 @@ describe('Core helper tests', function() {
}]);
});
+ it('should return the width of the longest text in an Array and 2D Array', function() {
+ var context = window.createMockContext();
+ var font = "normal 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
+ var arrayOfThings_1D = ['FooBar','Bar'];
+ var arrayOfThings_2D = [['FooBar_1','Bar_2'],'Foo_1'];
+
+
+ // Regardless 'FooBar' is the longest label it should return (charcters * 10)
+ expect(helpers.longestText(context, font, arrayOfThings_1D, {})).toEqual(60);
+ expect(helpers.longestText(context, font, arrayOfThings_2D, {})).toEqual(80);
+ // We check to make sure we made the right calls to the canvas.
+ expect(context.getCalls()).toEqual([{
+ name: 'measureText',
+ args: ['FooBar']
+ }, {
+ name: 'measureText',
+ args: ['Bar']
+ }, {
+ name: 'measureText',
+ args: ['FooBar_1']
+ }, {
+ name: 'measureText',
+ args: ['Bar_2']
+ }, {
+ name: 'measureText',
+ args: ['Foo_1']
+ }]);
+ });
+
+ it('compare text with current longest and update', function() {
+ var context = window.createMockContext();
+ var data = {};
+ var gc = [];
+ var longest = 70;
+
+ expect(helpers.measureText(context, data, gc, longest, 'foobar')).toEqual(70);
+ expect(helpers.measureText(context, data, gc, longest, 'foobar_')).toEqual(70);
+ expect(helpers.measureText(context, data, gc, longest, 'foobar_1')).toEqual(80);
+ // We check to make sure we made the right calls to the canvas.
+ expect(context.getCalls()).toEqual([{
+ name: 'measureText',
+ args: ['foobar']
+ }, {
+ name: 'measureText',
+ args: ['foobar_']
+ }, {
+ name: 'measureText',
+ args: ['foobar_1']
+ }]);
+ });
+
+ it('count look at all the labels and return maximum number of lines', function() {
+ var context = window.createMockContext();
+ var arrayOfThings_1 = ['Foo','Bar'];
+ var arrayOfThings_2 = [['Foo','Bar'],'Foo'];
+ var arrayOfThings_3 = [['Foo','Bar','Boo'],['Foo','Bar'],'Foo'];
+
+ expect(helpers.numberOfLabelLines(arrayOfThings_1)).toEqual(1);
+ expect(helpers.numberOfLabelLines(arrayOfThings_2)).toEqual(2);
+ expect(helpers.numberOfLabelLines(arrayOfThings_3)).toEqual(3);
+ });
+
it('should draw a rounded rectangle', function() {
var context = window.createMockContext();
helpers.drawRoundedRectangle(context, 10, 20, 30, 40, 5);