x-axis ticks padding not doing anything

[gaminoff]

Hi!

I'm trying to add some padding between the x-axis to the ticks labels but without the ticks.
I managed to get it right when disabling the x-axis gridlines display, but I do need them, so my chart now looks like this:

The options.scales object looks like this:
scales: { xAxes: [{ gridLines: { drawTicks: false, }, ticks: { autoSkipPadding: 5, padding: 20, maxRotation: 0, labelOffset: 15, }, }], },

Is this even possible when 'drawTicks: false'?

Thanks!

[etimberg]

This looks like a bug of some kind. Probably in the draw code.

[etimberg]

@gaminoff is it possible to put your test case into a fiddle so that we can debug? Which version are you using?

Edit based on my reading of the code, it looks like the padding option only works for vertical axes. Should not be hard to extend it to horizontal ones as well. Code

[dkazakov8]

Hello, this bug lasts for a long time, since 2.0 release. Label's offsets both for yAxes and xAxes don't treat 'padding' and 'labelOffset' correctly.
Personally I use this code for core.scale.js to fix it, so can use both 'padding' and 'labelOffset':

if (isHorizontal) {

	if (options.position === 'bottom') {
		// bottom
		textBaseline = !isRotated? 'top':'middle';
		textAlign = !isRotated? 'center': 'right';
		labelY = me.top + tl + optionTicks.padding;
	} else {
		// top
		textBaseline = !isRotated? 'bottom':'middle';
		textAlign = !isRotated? 'center': 'left';
		labelY = me.bottom - tl + optionTicks.padding;
	}

	var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
	labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)

	tx1 = tx2 = x1 = x2 = xLineValue;
	ty1 = yTickStart;
	ty2 = yTickEnd;
	y1 = chartArea.top;
	y2 = chartArea.bottom;
} else {
	var isLeft = options.position === 'left';
	var tickPadding = optionTicks.padding;
	var labelXOffset;

	if (optionTicks.mirror) {
		textAlign = isLeft ? 'left' : 'right';
		labelXOffset = tickPadding;
	} else {
		textAlign = isLeft ? 'right' : 'left';
		labelXOffset = tl + tickPadding;
	}

	labelX = isLeft ? me.right + labelXOffset : me.left - labelXOffset;

	var yLineValue = me.getPixelForTick(index); // xvalues for grid lines
	yLineValue += helpers.aliasPixel(lineWidth);
	labelY = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;

	tx1 = xTickStart;
	tx2 = xTickEnd;
	x1 = chartArea.left;
	x2 = chartArea.right;
	ty1 = ty2 = y1 = y2 = yLineValue;
}

[kumarharsh]

@etimberg - I'm running into the same problems. Many properties, such as 'padding', 'tickMarkLength', etc are not having effect, the rectangles in bar charts are being offset from the center, etc.

This seems to be a recent bug - it was not there in the 2.1.3 version.

Here is a fiddle:

Buggy: https://jsfiddle.net/RedDevil/gofnapcw/ (2.6.0)
Good: https://jsfiddle.net/RedDevil/rvbrr0Lu/ (2.1.3)

[kumarharsh]

So, I've tried out the fiddle with different versions of Chartjs, and the same buggy behaviour can be observed for the first time in the 2.5.0 version.

[jctrinquet]

@dkazakov8
How do you use it ?
Where do you put this code

[kumarharsh]

@jctrinquet you don't use that code. That's internal chartjs library code. Just update your chartjs version. This bug is fixed. To see how to use this, refer to the docs.