archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

(feature) Added separate top and bottom padding for title plugin. (#6852)

Browse Source 
* (feature) Added separate top and bottom padding for title plugin.

* Added regular padding multiplier like how it was before.

* Now makes use of toPadding helper.
Fixed typo in toPadding helper.

* Fixed requested changes.
This commit is contained in:
SansDK 2019-12-20 14:21:20 +01:00 committed by Evert Timberg
parent d60f634ff0
commit 1d35ebb290
3 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/configuration/title.md
View File

@ -13,7 +13,7 @@ The title configuration is passed into the `options.title` namespace. The global
| `fontFamily` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the title text.
| `fontColor` | `Color` | `'#666'` | Font color.
| `fontStyle` | `string` | `'bold'` | Font style.
| `padding` | `number` | `10` | Number of pixels to add above and below the title text.
| `padding` | <code>number&#124;{top: number, bottom: number}</code> | `10` | Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
| `lineHeight` | <code>number&#124;string</code> | `1.2` | Height of an individual line of text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
| `text` | <code>string&#124;string[]</code> | `''` | Title text to display. If specified as an array, text is rendered on multiple lines.
@ -40,3 +40,22 @@ var chart = new Chart(ctx, {
}
});
```
This example shows how to specify separate top and bottom title text padding:
```javascript
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
title: {
display: true,
text: 'Custom Chart Title',
padding: {
top: 10,
bottom: 30
}
}
}
});
```

2
src/helpers/helpers.options.js
View File

@ -56,7 +56,7 @@ export function toLineHeight(value, size) {
/**
* Converts the given value into a padding object with pre-computed width/height.
* @param {number|object} value - If a number, set the value to all TRBL component,
* else, if and object, use defined properties and sets undefined ones to 0.
* else, if an object, use defined properties and sets undefined ones to 0.
* @returns {object} The padding values (top, right, bottom, left, width, height)
* @since 2.7.0
*/

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

@ -18,7 +18,7 @@ defaults._set('global', {
});
/**
* IMPORTANT: this class is exposed publicly as Chart.Legend, backward compatibility required!
* IMPORTANT: this class is exposed publicly as Chart.Title, backward compatibility required!
*/
class Title extends Element {
constructor(config) {
@ -85,12 +85,6 @@ class Title extends Element {
me.bottom = me.height;
}
// Reset padding
me.paddingLeft = 0;
me.paddingTop = 0;
me.paddingRight = 0;
me.paddingBottom = 0;
// Reset minSize
me.minSize = {
width: 0,
@ -121,8 +115,8 @@ class Title extends Element {
}
lineCount = helpers.isArray(opts.text) ? opts.text.length : 1;
textSize = lineCount * helpers.options._parseFont(opts).lineHeight + opts.padding * 2;
me._padding = helpers.options.toPadding(opts.padding);
textSize = lineCount * helpers.options._parseFont(opts).lineHeight + me._padding.height;
me.width = minSize.width = isHorizontal ? me.maxWidth : textSize;
me.height = minSize.height = isHorizontal ? textSize : me.maxHeight;
}
@ -146,7 +140,7 @@ class Title extends Element {
var fontOpts = helpers.options._parseFont(opts);
var lineHeight = fontOpts.lineHeight;
var offset = lineHeight / 2 + opts.padding;
var offset = lineHeight / 2 + me._padding.top;
var rotation = 0;
var top = me.top;
var left = me.left;