ChartJS rotate label value vertical

Question

I'm using ChartJS to create a bar graph at this JSfiddle.

It is currently showing the value in horizontal as the result shows in the image below.

I'm trying to rotate this value by 90 degree so it displays as

Is there a way to do this via ChartJS options? I tried to play around with HTML5 's ctx.transform() and ctx.rotate() below but no luck so far.

    this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                ctx.fillText(bar.value, bar.x, bar.y + 30);
                ctx.save();
                ctx.rotate(45 * Math.PI / 180);
            });

Answer 1

You can use the translate and rotate properties to rotate the text:

var chartData = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    fillColor: "#79D1CF",
    strokeColor: "#79D1CF",
    data: [9045645, 4045645, 6045645, 8045645, 5045645, 6045645]
  }]
};


var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
  showTooltips: false,
  onAnimationComplete: function() {

    var ctx = this.chart.ctx;
    ctx.font = this.scale.font;
    ctx.fillStyle = this.scale.textColor
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";

    const lineHeigt = ctx.measureText('M').width;

    this.datasets.forEach(function(dataset) {
      dataset.bars.forEach(function(bar) {
        ctx.save();
        ctx.translate(bar.x + (lineHeigt / 3 * 2), bar.y + 30)
        ctx.rotate(-Math.PI / 2);
        ctx.fillText(bar.value, 0, 0);
        ctx.restore();
      });
    })
  }
});

<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>

<canvas id="myChart2" height="300" width="500"></canvas>