[Chartjs]-ChartJS rotate label value vertical

by

3👍

✅

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>

Leave a comment