CODEWITHSUNDEEP
javascriptjquerychartschart.js
Thunder
Thunder

Reputation: 11016

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 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.

Upvotes: 2

Views: 5027

Answers (1)

potatopeelings
potatopeelings

Reputation: 41075

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/

Upvotes: 3

Related Questions