Chart.js Right Justified Scale Tick Labels
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<div class="canvas-holder">
<h1>Center Aligned (Original)</h1>
<canvas id="myChart"></canvas>
</div>
<div class="canvas-holder">
<h1>Right Aligned (New)</h1>
<canvas id="myChart2"></canvas>
</div>
CSS
.canvas-holder {
margin-top: 50px;
margin-left: 50px;
}
JavaScript
var helpers = Chart.helpers;
function parseFontOptions(options) {
var getValueOrDefault = helpers.getValueOrDefault;
var globalDefaults = Chart.defaults.global;
var size = getValueOrDefault(options.fontSize, globalDefaults.defaultFontSize);
var style = getValueOrDefault(options.fontStyle, globalDefaults.defaultFontStyle);
var family = getValueOrDefault(options.fontFamily, globalDefaults.defaultFontFamily);
return {
size: size,
style: style,
family: family,
font: helpers.fontString(size, style, family)
};
};
var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({
draw: function(chartArea) {
var me = this;
var options = me.options;
if (!options.display) {
return;
}
var context = me.ctx;
var globalDefaults = Chart.defaults.global;
var optionTicks = options.ticks;
var gridLines = options.gridLines;
var scaleLabel = options.scaleLabel;
var isRotated = me.labelRotation !== 0;
var skipRatio;
var useAutoskipper = optionTicks.autoSkip;
var isHorizontal = me.isHorizontal();
// figure out the maximum number of gridlines to show
var maxTicks;
if (optionTicks.maxTicksLimit) {
maxTicks = optionTicks.maxTicksLimit;
}
var tickFontColor = helpers.getValueOrDefault(optionTicks.fontColor, globalDefaults.defaultFontColor);
var tickFont = parseFontOptions(optionTicks);
var tl = gridLines.drawTicks ? gridLines.tickMarkLength : 0;
var borderDash = helpers.getValueOrDefault(gridLines.borderDash, globalDefaults.borderDash);
var borderDashOffset = helpers.getValueOrDefault(gridLines.borderDashOffset, globalDefaults.borderDashOffset);
var scaleLabelFontColor = helpers.getValueOrDefault(scaleLabel.fontColor, globalDefaults.defaultFontColor);
var scaleLabelFont = parseFontOptions(scaleLabel);
var labelRotationRadians = helpers.toRadians(me.labelRotation);
var cosRotation = Math.cos(labelRotationRadians);
...