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

ticks.padding option applies to both vertical and horizontal axes

Browse Source
This commit is contained in:
etimberg 2017-06-21 21:52:26 -04:00 committed by Evert Timberg
parent ccb2898539
commit 7f15bebed2
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/axes/cartesian/README.md
View File

@ -31,7 +31,7 @@ The following options are common to all cartesian axes but do not apply to other
| `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.* | `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
| `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.* | `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
| `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* | `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
| `padding` | `Number` | `10` | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.* | `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
## Axis ID ## Axis ID
The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used. The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used.

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

@ -340,6 +340,7 @@ module.exports = function(Chart) {
var largestTextWidth = helpers.longestText(me.ctx, tickFont.font, me.ticks, me.longestTextCache); var largestTextWidth = helpers.longestText(me.ctx, tickFont.font, me.ticks, me.longestTextCache);
var tallestLabelHeightInLines = helpers.numberOfLabelLines(me.ticks); var tallestLabelHeightInLines = helpers.numberOfLabelLines(me.ticks);
var lineSpace = tickFont.size * 0.5; var lineSpace = tickFont.size * 0.5;
var tickPadding = me.options.ticks.padding;
if (isHorizontal) { if (isHorizontal) {
// A horizontal axis is more constrained by the height. // A horizontal axis is more constrained by the height.
@ -354,7 +355,7 @@ module.exports = function(Chart) {
+ (tickFont.size * tallestLabelHeightInLines) + (tickFont.size * tallestLabelHeightInLines)
+ (lineSpace * tallestLabelHeightInLines); + (lineSpace * tallestLabelHeightInLines);
minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight); minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
me.ctx.font = tickFont.font; me.ctx.font = tickFont.font;
var firstTick = me.ticks[0]; var firstTick = me.ticks[0];
@ -379,7 +380,7 @@ module.exports = function(Chart) {
if (tickOpts.mirror) { if (tickOpts.mirror) {
largestTextWidth = 0; largestTextWidth = 0;
} else { } else {
largestTextWidth += me.options.ticks.padding; largestTextWidth += tickPadding;
} }
minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth); minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
me.paddingTop = tickFont.size / 2; me.paddingTop = tickFont.size / 2;
@ -605,19 +606,21 @@ module.exports = function(Chart) {
var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY; var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY;
var textAlign = 'middle'; var textAlign = 'middle';
var textBaseline = 'middle'; var textBaseline = 'middle';
var tickPadding = optionTicks.padding;
if (isHorizontal) { if (isHorizontal) {
var labelYOffset = tl + tickPadding;
if (options.position === 'bottom') { if (options.position === 'bottom') {
// bottom // bottom
textBaseline = !isRotated? 'top':'middle'; textBaseline = !isRotated? 'top':'middle';
textAlign = !isRotated? 'center': 'right'; textAlign = !isRotated? 'center': 'right';
labelY = me.top + tl; labelY = me.top + labelYOffset;
} else { } else {
// top // top
textBaseline = !isRotated? 'bottom':'middle'; textBaseline = !isRotated? 'bottom':'middle';
textAlign = !isRotated? 'center': 'left'; textAlign = !isRotated? 'center': 'left';
labelY = me.bottom - tl; labelY = me.bottom - labelYOffset;
} }
var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
@ -630,7 +633,6 @@ module.exports = function(Chart) {
y2 = chartArea.bottom; y2 = chartArea.bottom;
} else { } else {
var isLeft = options.position === 'left'; var isLeft = options.position === 'left';
var tickPadding = optionTicks.padding;
var labelXOffset; var labelXOffset;
if (optionTicks.mirror) { if (optionTicks.mirror) {