CODEWITHSUNDEEP
javascriptchart.js
Kiran Shinde
Kiran Shinde

Reputation: 5992

Handle X-axis label position in chart js

Please look into this fiddle

If you resize the output window you will notice that the labels of x-axis becomes slanted. which is fine for me. But if you notice that the end position of label is center of bar. I want the end position of label to be the right-side end of bar. How can achieve this?

My config is 

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [6, 87, 56, 15, 88, 60, 12],
        }]
    },
    options: {
        legend: {
            "display": false
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            yAxes: [{
                display: false,
                gridLines: {
                    display : false
                },
                ticks: {
                    display: false,
                    beginAtZero:true
                }
            }],
            xAxes: [{
                gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Upvotes: 3

Views: 13499

Answers (1)

jordanwillis
jordanwillis

Reputation: 10705

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.

Upvotes: 8

Related Questions