The general consensus regarding the axis title is to position it outside of the canvas, as mentioned in this discussion thread here. However, considering the ongoing discussions on a related issue found here, this approach may be subject to change.
Integrating a Y Axis Title
Nevertheless, here's how you can implement an axis title within the current version using the canvas element. To begin with, extend the chart functionality to accommodate the display of the axis title (largely inspired by techniques discussed in this Stack Overflow thread)
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
// Adjusting label width for the title
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);
// Rendering 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;
// Positioning
var x = this.scale.xScalePaddingLeft * 0.2;
var y = this.chart.height / 2;
// Adjust origin
ctx.translate(x, y);
// Rotate text
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(this.scale.yAxisLabel, 0, 0);
ctx.restore();
}
}
});
If you are utilizing Angular-Chart.js, register the new chart type as follows
angular.module('chart.js')
.directive('chartLineAlt', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineAlt'); }]);
Then, pass in the axis title through the options like so
...
$scope.options = {
yAxisLabel: "My Y Axis Label",
}
Incorporate it into your 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 inclusion of the options attribute and the altered class value to chart-line-alt
Fiddle Example - http://jsfiddle.net/eeqfvy6f/