Chart.js scaleLabel truncation examples

Chart.js version 2.6.0 (and earlier) always center the scaleLabel text to the middle of the graph. With long labels, this can cause truncation that can be avoided by changing the justification and origin.

by microMerlin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
	<h1>scaleLabel truncation</h1>
	<p>Demonstrate x and y axis scale label truncation cases in version 2.6.0 that could be handled better by adjusting the placement positions.</p>
	<article>
		<h1>Truncate both ends</h1>
		<p>This would better left (start) justified, to only truncate the end.</p>
		<div class="chartWrapper">
			<canvas id="chart1"></canvas>
		</div>
		<div class="chartWrapper">
			<canvas id="chart1r"></canvas>
		</div>
	</article>
	<article>
		<h1>No truncations</h1>
		<p>With balanced chart, these labels <strong>can</strong> fit.</p>
		<div class="chartWrapper">
			<canvas id="chart2"></canvas>
		</div>
		<div class="chartWrapper">
			<canvas id="chart2r"></canvas>
		</div>
	</article>
	<article>
		<h1>Truncate the trailing end</h1>
		<p>Same chart size and axis scaleLabels, but now the trailing ends are being truncated unnecessarily.  Changing to right (end) justification, and using the canvas edge as the origin would fit.</p>
		<div class="chartWrapper">
			<canvas id="chart3"></canvas>
		</div>
		<div class="chartWrapper">
			<canvas id="chart3r"></canvas>
		</div>
	</article>
	<article>
		<h1>Truncate the leading end</h1>
		<p>Same chart size and axis scaleLabels, but now the leading ends are being truncated unnecessarily.  Changing to left (start) justification and use the canvas edge as the origin would fit.</p>
		<div class="chartWrapper">
			<canvas id="chart4"></canvas>
		</div>
		<div class="chartWrapper">
			<canvas id="chart4r"></canvas>
		</div>
	</article>

CSS

article {
	padding: 1px 0 10px 0.4em;
}
article:nth-of-type(even) {
	background-color: #a0a0a0;
}
article:nth-of-type(odd) {
	background-color: #d0d0d0;
}
.chartWrapper {
	border: 2px solid red;
	margin: 0 0 0.2em 1em;
  width: 400px;
}

canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

(function () {
  "use strict";

	Chart.defaults.global.responsiveAnimationDuration = 0;
	Chart.defaults.global.animation.duration = 0;
	var dataPoints =  [{
	    "x": 1,
	    "y": 0
	  }, {
	    "x": 7,
	    "y": 15
	  }, {
	    "x": 12,
	    "y": 37.5
  	}
	];
	var chartData = {
		datasets: [{
			label: "xyz",
			data: dataPoints
		}]
	};
	var chartOptions = {
		scales: {
			yAxes: [{
				type: "linear",
				position: "left",
				scaleLabel: {
					display: true,
					fontSize: 18,
					labelString: "Make long enough to truncate"
				}
			}],
			xAxes: [{
				type: "linear",
				position: "bottom",
				scaleLabel: {
					display: true,
					fontSize: 18,
					labelString: "The Horizontal label string needs to be even longer to truncate"
				},
				ticks: {
					display: true
				}
			}]
		},
		legend: {
			display: false,
			position: "right",
			onClick: null,
			onHover: null,
			labels: {
				boxWidth: 0
			}
		},
		title: {
				display: true,
				position: "top",
				fontSize: 24,
				text: "Test Title"
		}
	};

	var ctx = document.getElementById("chart1");
	var myChart1 = new Chart(ctx, {
	  type: 'line',
	  data: chartData,
		options: chartOptions
	});
	chartOptions.scales.yAxes[0].position = "right";
	chartOptions.scales.xAxes[0].position = "top";
	chartOptions.title.position = "bottom";
	var ctx = document.getElementById("chart1r");
	var myChart1r = new Chart(ctx, {
	  type: 'line',
	  data: chartData,
		options: chartOptions
	});
	chartOptions.scales.yAxes[0].position = "left";
	chartOptions.scales.xAxes[0].position = "bottom";
	chartOptions.title.position = "top";

	chartOptions.scales.yAxes[0].scaleLabel.labelString = "Short enough to just fit";
	chartOptions.scales.xAxes[0].scaleLabel.labelString = "Horizontal label string short enough that could fit";
	chartOptions.legend.display = true;
	var ctx = document.getElementById("chart2");
	var myChart2 = new Chart(ctx, {
	  type: 'line',
	  data: chartData,
		options:...