How To Set Chartjs X-axis Title

We are using Chartjs to plot the charts ,However there is no to give the x-axis titles,There is a solution for y-Axis title in here , But for x-Axis I could add the x axis name but

Solution 1:

We set the height of the chart depending on how much height we want for the x axis label and then write in that space.

We don't have to do anything in the draw override because the canvas clearing too happens based on the height (that we adjusted)

Preview

---

Script

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        this.chart.height -= 30;

        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        // text alignment and color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillStyle = this.options.scaleFontColor;
        // positionvar x = this.chart.width / 2;
        var y = this.chart.height + 15 + 5;
        // change origin
        ctx.translate(x, y)
        ctx.fillText("My x axis label", 0, 0);
        ctx.restore();
    }
});

and then

...
new Chart(ctx).LineAlt(data);

---

Fiddle - http://jsfiddle.net/ct2h2wde/