[Chartjs]-Chart.JS spacing and padding

by

9👍

✅

Shifting x axis Labels Vertically

The easiest way to do 1. is by adding spaces to your x labels. You can extend your chart type and override your initialize function to do this (increase 30 to something larger if your labels are long to start with anyway)

initialize: function(data){
    data.labels.forEach(function(item, index) {
        data.labels[index] += Array(Math.max(30 - item.length, 0)).join(" ");
    })
    Chart.types.Bar.prototype.initialize.apply(this, arguments);
},

Edit : As pointed out in the comments, this causes a horizontal shift as well and the label ends no longer align with the x axis markers.

Since both the x axis and the x labels are drawn in a single function and you have no other variables you can mess around with (safely) this means you’ll have to change the actual scale draw function.

Look for a ctx.translate towards the end of the draw function and change it to 

ctx.translate(xPos, (isRotated) ? this.endPoint + 22 : this.endPoint + 18);

You’ll also have to adjust the endpoint (which drives the y limits) a bit so that the additional y offset doesn’t cause the labels to overflow the chart (look for the line adjusting this in the draw override for 2.).

Leaving a gap on the Right Side

To do 2, you override your draw function (in your extended chart) and change xScalePaddingRight. However since this doesn’t affect your horizontal grid lines you have to overlay a filled rectangle once your draw is complete. Your complete draw function would look like this

draw: function(){
    // this line is for 1.
    if (!this.scale.done) {
         this.scale.endPoint -= 20
         // we should do this only once
         this.scale.done = true;
    }
    var xScalePaddingRight = 120
    this.scale.xScalePaddingRight = xScalePaddingRight
    Chart.types.Bar.prototype.draw.apply(this, arguments);
    this.chart.ctx.fillStyle="#FFF";
    this.chart.ctx.fillRect(this.chart.canvas.width - xScalePaddingRight, 0, xScalePaddingRight, this.chart.canvas.height);
}

Original fiddle – https://jsfiddle.net/gvdmxc5t/

Fiddle with modified Scale draw function – https://jsfiddle.net/xgc6a77a/ (I turned off animation in this one so that the endpoint is shifted only once, but you could just hard code it, or add some extra code so that it’s done only once)

5👍

The ‘tickMarkLength’ option extends the grid lines outside the chart and pushes the ticks down.

xAxes: [
        {
            gridLines: {
              tickMarkLength: 15  
            },
        }
]

2👍

use this for chartjs 2.0 

scales: {
    xAxes: [{
        barPercentage: 0.9,
        categoryPercentage: 0.55
}]

Reference

0👍

In chartjs v3, there is an "offset" flag that you can set to true. This will create padding.

scales: {
  x: {
     offset: true,
  }
}

If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true for a bar chart by default.

Documentation

Leave a comment