score:33

Accepted answer

for chart.js 2.x refer to andyhasit's answer - https://stackoverflow.com/a/36954319/360067

for chart.js 1.x, you can tweak the options and extend the chart type to do this, like so

chart.types.line.extend({
    name: "linealt",
    draw: function () {
        chart.types.line.prototype.draw.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.scale.xscalepaddingleft * 0.4;
        var y = this.chart.height / 2;
        // change origin
        ctx.translate(x, y);
        // rotate text
        ctx.rotate(-90 * math.pi / 180);
        ctx.filltext(this.datasets[0].label, 0, 0);
        ctx.restore();
    }
});

calling it like this

var ctx = document.getelementbyid("mychart").getcontext("2d");
var mylinechart = new chart(ctx).linealt(data, {
    // make enough space on the right side of the graph
    scalelabel: "          <%=value%>"
});

notice the space preceding the label value, this gives us space to write the y axis label without messing around with too much of chart.js internals

fiddle - http://jsfiddle.net/wyox23ga/

enter image description here

score:3

consider using a the transform: rotate(-90deg) style on an element. see http://www.w3schools.com/cssref/css3_pr_transform.asp

example, in your css

.verticaltext_content {
  position: relative;
  transform: rotate(-90deg);
  right:90px;   //these three positions need adjusting
  bottom:150px; //based on your actual chart size
  width:200px;
}

add a space fudge factor to the y axis scale so the text has room to render in your javascript.

scalelabel: "      <%=value%>"

then in your html after your chart canvas put something like...

<div class="text-center verticaltext_content">y axis label</div>

it is not the most elegant solution, but worked well when i had a few layers between the html and the chart code (using angular-chart and not wanting to change any source code).

score:6

for me it works like this:

    options : {
      scales: {
        yaxes: [{
          scalelabel: {
            display: true,
            labelstring: 'probability'
          }
        }]
      }
    }

score:12

for chart.js 3.x

options: {
  scales: {
    y: {
      title: {
        display: true,
        text: 'y axis title'
      }
    }
  }
}

score:13

chart.js supports this by defaul check the link. chartjs

you can set the label in the options attribute.

options object looks like this.

options = {
            scales: {
                yaxes: [
                    {
                        id: 'y-axis-1',
                        display: true,
                        position: 'left',
                        ticks: {
                            callback: function(value, index, values) {
                                return value + "%";
                            }
                        },
                        scalelabel:{
                            display: true,
                            labelstring: 'average personal income',
                            fontcolor: "#546372"
                        }
                    }   
                ]
            }
        };

score:22

for x and y axes:

     options : {
      scales: {
        yaxes: [{
          scalelabel: {
            display: true,
            labelstring: 'probability'
          }
        }],
        xaxes: [{
          scalelabel: {
            display: true,
            labelstring: 'hola'
          }
        }],
      }
    }

score:187

in chart.js version 2.0 this is possible:

options = {
  scales: {
    yaxes: [{
      scalelabel: {
        display: true,
        labelstring: 'probability'
      }
    }]
  }
}

see axes labelling documentation for more details.


Related Query

More Query from same tag