[Chartjs]-How to set ChartJS x-axis title

by

3👍

✅

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

enter image description here

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/

Leave a comment