Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-21 23:56:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Multiple lines of text in the chart title

Browse Source
This commit is contained in:
etimberg
2017-06-15 18:55:01 -04:00
committed by Evert Timberg
parent 7a02d93db4
commit de0ea5c6ba
3 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/configuration/title.md
View File

@@ -14,7 +14,8 @@ The title configuration is passed into the `options.title` namespace. The global
| `fontColor` | Color | `'#666'` | Font color
| `fontStyle` | `String` | `'bold'` | Font style
| `padding` | `Number` | `10` | Number of pixels to add above and below the title text.
| `text` | `String` | `''` | Title text to display
| `lineHeight` | `Number` | `undefined` | Height of line of text. If not specified, the `fontSize` is used.
| `text` | `String/String[]` | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
### Position
Possible title position values are:

23
src/plugins/plugin.title.js
View File

@@ -111,13 +111,16 @@ module.exports = function(Chart) {
globalDefaults = Chart.defaults.global,
display = opts.display,
fontSize = valueOrDefault(opts.fontSize, globalDefaults.defaultFontSize),
minSize = me.minSize;
minSize = me.minSize,
lineCount = helpers.isArray(opts.text) ? opts.text.length : 1,
lineHeight = valueOrDefault(opts.lineHeight, fontSize),
textSize = display ? (lineCount * lineHeight) + (opts.padding * 2) : 0;
if (me.isHorizontal()) {
minSize.width = me.maxWidth; // fill all the width
minSize.height = display ? fontSize + (opts.padding * 2) : 0;
minSize.height = textSize;
} else {
minSize.width = display ? fontSize + (opts.padding * 2) : 0;
minSize.width = textSize;
minSize.height = me.maxHeight; // fill all the height
}
@@ -146,6 +149,7 @@ module.exports = function(Chart) {
fontStyle = valueOrDefault(opts.fontStyle, globalDefaults.defaultFontStyle),
fontFamily = valueOrDefault(opts.fontFamily, globalDefaults.defaultFontFamily),
titleFont = helpers.fontString(fontSize, fontStyle, fontFamily),
lineHeight = valueOrDefault(opts.lineHeight, fontSize),
rotation = 0,
titleX,
titleY,
@@ -175,7 +179,18 @@ module.exports = function(Chart) {
ctx.rotate(rotation);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(opts.text, 0, 0, maxWidth);
var text = opts.text;
if (helpers.isArray(text)) {
var y = 0;
for (var i = 0; i < text.length; ++i) {
ctx.fillText(text[i], 0, y, maxWidth);
y += lineHeight;
}
} else {
ctx.fillText(text, 0, 0, maxWidth);
}
ctx.restore();
}
}

22
test/specs/plugin.title.tests.js
View File

@@ -77,6 +77,28 @@ describe('Title block tests', function() {
});
});
it('should have the correct size when there are multiple lines of text', function() {
var chart = {};
var options = Chart.helpers.clone(Chart.defaults.global.title);
options.text = ['line1', 'line2'];
options.position = 'left';
options.display = true;
options.lineHeight = 15;
var title = new Chart.Title({
chart: chart,
options: options
});
var minSize = title.update(200, 400);
expect(minSize).toEqual({
width: 50,
height: 400
});
});
it('should draw correctly horizontally', function() {
var chart = {};
var context = window.createMockContext();