mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
ticks.padding option applies to both vertical and horizontal axes
This commit is contained in:
parent
ccb2898539
commit
7f15bebed2
@ -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.*
|
||||
| `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.*
|
||||
| `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
|
||||
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.
|
||||
|
@ -340,6 +340,7 @@ module.exports = function(Chart) {
|
||||
var largestTextWidth = helpers.longestText(me.ctx, tickFont.font, me.ticks, me.longestTextCache);
|
||||
var tallestLabelHeightInLines = helpers.numberOfLabelLines(me.ticks);
|
||||
var lineSpace = tickFont.size * 0.5;
|
||||
var tickPadding = me.options.ticks.padding;
|
||||
|
||||
if (isHorizontal) {
|
||||
// A horizontal axis is more constrained by the height.
|
||||
@ -354,7 +355,7 @@ module.exports = function(Chart) {
|
||||
+ (tickFont.size * 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;
|
||||
|
||||
var firstTick = me.ticks[0];
|
||||
@ -379,7 +380,7 @@ module.exports = function(Chart) {
|
||||
if (tickOpts.mirror) {
|
||||
largestTextWidth = 0;
|
||||
} else {
|
||||
largestTextWidth += me.options.ticks.padding;
|
||||
largestTextWidth += tickPadding;
|
||||
}
|
||||
minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
|
||||
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 textAlign = 'middle';
|
||||
var textBaseline = 'middle';
|
||||
var tickPadding = optionTicks.padding;
|
||||
|
||||
if (isHorizontal) {
|
||||
var labelYOffset = tl + tickPadding;
|
||||
|
||||
if (options.position === 'bottom') {
|
||||
// bottom
|
||||
textBaseline = !isRotated? 'top':'middle';
|
||||
textAlign = !isRotated? 'center': 'right';
|
||||
labelY = me.top + tl;
|
||||
labelY = me.top + labelYOffset;
|
||||
} else {
|
||||
// top
|
||||
textBaseline = !isRotated? 'bottom':'middle';
|
||||
textAlign = !isRotated? 'center': 'left';
|
||||
labelY = me.bottom - tl;
|
||||
labelY = me.bottom - labelYOffset;
|
||||
}
|
||||
|
||||
var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
|
||||
@ -630,7 +633,6 @@ module.exports = function(Chart) {
|
||||
y2 = chartArea.bottom;
|
||||
} else {
|
||||
var isLeft = options.position === 'left';
|
||||
var tickPadding = optionTicks.padding;
|
||||
var labelXOffset;
|
||||
|
||||
if (optionTicks.mirror) {
|
||||
|
Loading…
Reference in New Issue
Block a user