Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Line height setting for scale titles. The text is centered within the line height, so setting the line height to a size

Browse Source 
greater than the font size moves it away from the axis edge.
This commit is contained in:
etimberg 2017-06-18 21:21:37 -04:00 committed by Evert Timberg
parent 961911065f
commit 18707cf81f
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/axes/labelling.md
View File

@ -10,6 +10,7 @@ The scale label configuration is nested under the scale configuration in the `sc
| -----| ---- | --------| -----------
| `display` | `Boolean` | `false` | If true, display the axis title.
| `labelString` | `String` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
| `lineHeight` | `Number` | `` | Height of an individual line of text. If not defined, the font size is used.
| `fontColor` | Color | `'#666'` | Font color for scale title.
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for scale title.

13
src/core/core.scale.js
View File

@ -32,7 +32,7 @@ module.exports = function(Chart) {
labelString: '',
// display property
display: false
display: false,
},
// label settings
@ -308,7 +308,7 @@ module.exports = function(Chart) {
var isHorizontal = me.isHorizontal();
var tickFont = parseFontOptions(tickOpts);
var scaleLabelFontSize = parseFontOptions(scaleLabelOpts).size * 1.5;
var scaleLabelLineHeight = helpers.getValueOrDefault(scaleLabelOpts.lineHeight, parseFontOptions(scaleLabelOpts).size * 1.5);
var tickMarkLength = opts.gridLines.tickMarkLength;
// Width
@ -329,9 +329,9 @@ module.exports = function(Chart) {
// Are we showing a title for the scale?
if (scaleLabelOpts.display && display) {
if (isHorizontal) {
minSize.height += scaleLabelFontSize;
minSize.height += scaleLabelLineHeight;
} else {
minSize.width += scaleLabelFontSize;
minSize.width += scaleLabelLineHeight;
}
}
@ -734,13 +734,14 @@ module.exports = function(Chart) {
var scaleLabelX;
var scaleLabelY;
var rotation = 0;
var halfLineHeight = helpers.getValueOrDefault(scaleLabel.lineHeight, scaleLabelFont.size) / 2;
if (isHorizontal) {
scaleLabelX = me.left + ((me.right - me.left) / 2); // midpoint of the width
scaleLabelY = options.position === 'bottom' ? me.bottom - (scaleLabelFont.size / 2) : me.top + (scaleLabelFont.size / 2);
scaleLabelY = options.position === 'bottom' ? me.bottom - halfLineHeight : me.top + halfLineHeight;
} else {
var isLeft = options.position === 'left';
scaleLabelX = isLeft ? me.left + (scaleLabelFont.size / 2) : me.right - (scaleLabelFont.size / 2);
scaleLabelX = isLeft ? me.left + halfLineHeight : me.right - halfLineHeight;
scaleLabelY = me.top + ((me.bottom - me.top) / 2);
rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI;
}