How to set ChartJS x-axis title

Question

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 could not create the space below the chart to properly place it , using y as this.chart.height overlapped the text with x axis title.

I have looked the chartjs v2.0 but it also does not have support for x-Axis title.

Answer 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;
        // position
        var 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/