display vertical axis label in line chart using chart.js

Question

How to add a vertical axis (Y-axis) label for a line graph that was created using chart.js and angular-chart.js

I need to display y-axis label.

HTML
<ion-content ng-controller="AgeController">
<canvas id="line" class="chart chart-line" data="data"
  labels="labels" legend="true" series="series"
  click="onClick" colours="['Red','Yellow']" width="402" height="201" style="width: 402px; height: 201px">
</canvas> 
</ion-content>

JS

app.controller('AgeController', ['$scope','$http',function($scope,$http) {    


           $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];


                }]);

score 4 · Accepted Answer · edited May 23 '17 at 12:02

The original opinion on the axis title is to do it outside of the canvas (see here https://github.com/nnnick/Chart.js/issues/114), but given the activity on the linked issue https://github.com/nnnick/Chart.js/issues/52 this could change.

Adding a Y Axis Title

That said, here's how you can do it on the current version using the canvas. First, extend the chart to draw the axis title (mostly a rehash from How to set ChartJS y axis title with hopefully cleaner code)

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        // making space for the title by increasing the y axis label width
        if (this.options.yAxisLabel)
            this.options.scaleLabel = '         ' + this.options.scaleLabel;

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

        if (this.options.yAxisLabel)
            this.scale.yAxisLabel = this.options.yAxisLabel;
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        // drawing the title
        if (this.scale.yAxisLabel) {
            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.scale.xScalePaddingLeft * 0.2;
            var y = this.chart.height / 2;
            // change origin
            ctx.translate(x, y)
            // rotate text
            ctx.rotate(-90 * Math.PI / 180);
            ctx.fillText(this.scale.yAxisLabel, 0, 0);
            ctx.restore();
        }
    }
});

From your directives, I assume you are using http://jtblin.github.io/angular-chart.js/. If so you register the new chart type like so

angular.module('chart.js')
    .directive('chartLineAlt', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineAlt'); }]);

and you pass in the axis title using options like so

...
$scope.options = {
    yAxisLabel: "My Y Axis Label",
}

with markup

<canvas id="line" class="chart chart-line-alt" data="data"
        labels="labels" legend="true" series="series" options="options"
        click="onClick" colours="['Red','Yellow']" width="402" height="201" style="width: 402px; height: 201px"></canvas>

Note the added options and the changed class chart-line-alt

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

Thank you, this was really helpful. In chart.js 2.0 this will be supported but for now this is a great hack. I did some changes to your fiddle (just added css) to make legends behave ok. Because when you use the new directive it generates a linealt css class that does not match any chart css styles. I just copied the rules, I wonder if there is a better way of doing it. But anyway this works here the Fiddle: https://jsfiddle.net/sandinosaso/usj43csw/ — sandino, Dec 30 '15 at 04:35
@potatopeelings - thank you, please help me put up both the y axis and x axis labels together. — Sheetal, Feb 25 '16 at 10:51
Got it working for both the axis!! just appended x-axis code in the existing y-axis part. Many Thanks. — Sheetal, Feb 25 '16 at 14:31
This looks like its right along the lines of what i want, but for some reason the fiddle isnt working any more. Not sure why — crthompson, Apr 04 '17 at 16:56

display vertical axis label in line chart using chart.js

1 Answers1

Adding a Y Axis Title