[Chartjs]-Handle X-axis label position in chart js

by

8👍

✅

It is certainly possible to achieve a ‘right’ aligned scale tick label instead of the original ‘center’ aligned scale tick label, but unfortunately it is not very straight forward to implement. Let me walk you through how to do it and then provide an example.

1) First, since there is no configuration option to control this, we have to look at doing some sort of custom implementation. It turns out that the scale tick labels in a bar chart are rendered as part of the Category scale’s draw method. Therefore, we must somehow overwrite this draw method to change to a new alignment.

2) According to the API there is a documented way to create new scale types, so we should be able to use a similar approach to extend the Category scale type and overwrite it’s draw method.

Since all scales are wrapped up in the ScaleService we have to use the below approach to extend an existing scale type.

var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({});

3) Now its just a matter of figuring out what part of the draw method we need to modify. After looking it over, it looks like we need to change the logic for calculating labelX (the pixel position to render the tick label). Here would be the new logic.

// current logic for getting pixel value of each label (we will use the logic below to 
// adjust if necessary)
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;

// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getDatasetMeta(0);

// use the bart chart controller to calculate the bar width
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler());

// if the labels are rotated, then move the pixel location from the middle of the bar 
// to the far right of the bar
if (labelRotationRadians != 0) {
  labelX += barWidth / 2;
}

4) Now we just need to register our new scale and configure the chart to use it (instead of the bar chart default category scale).

Chart.scaleService.registerScaleType('categoryRightAligned', CategoryRightAligned, {position: 'bottom'});

xAxes: [{
  type: 'categoryRightAligned',
  gridLines: {
    display : false,
    offsetGridLines: true
  },
  ticks: {
    beginAtZero:true,
  }
}]

Refer to this jsfiddle example to see it in action and to see how everything fits together.

Leave a comment