Multiple lines of text in the chart title #4382
Conversation
There was a problem hiding this comment.
Actually, I'm going to refactor and normalize multi line support since I implemented it for the datalabels plugin (will import common code in core, so may overwrite parts of this PR). Will support array of strings, but also string containing \n (array of array of string with carriage return also supported :) ).
lineHeight seems more standard and in line with css.
src/plugins/plugin.title.js
Outdated
| @@ -13,6 +13,7 @@ module.exports = function(Chart) { | |||
| weight: 2000, // by default greater than legend (1000) to be above | |||
| fontStyle: 'bold', | |||
| padding: 10, | |||
| lineSpacing: 5, | |||
There was a problem hiding this comment.
Default null? (use fontSize)
src/plugins/plugin.title.js
Outdated
| minSize = me.minSize; | ||
| minSize = me.minSize, | ||
| lineCount = helpers.isArray(opts.text) ? opts.text.length : 1, | ||
| textSize = display ? (lineCount * fontSize) + (opts.padding * 2) + (opts.lineSpacing * (lineCount - 1)) : 0; |
There was a problem hiding this comment.
By default, lineHeight should be equal to fontSize, then textSize is lineHeight*lineCount. If lineHeight is 0, all lines draw on the same line.
There was a problem hiding this comment.
sure, that makes sense. Will update.
|
@simonbrunel sounds good about the multi-line support. Do we want to merge this first or after your changes? |
|
Line height will also resolve #2747 |
|
We can merge this first, will review all line height usages in a future PR. |
Adds support for multiple lines of text in the chart title. If the
textproperty of the title options is an array, we render each item on it's own line. See attached screenshots for details of how it looks.