Changing the Y axis unit in Chartjs - Javascript Chart.js

Javascript examples for Chart.js:Axis

  1. HOME
  2. Javascript
  3. Chart.js
  4. Axis

Description

Changing the Y axis unit in Chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//  ww  w  .j av  a2  s  .  c om
var weekdays = ["Monday", "Tuesday", "Wednesday", "Thurday", "Friday", "Saturday", "Sunday", "Monday"];
var d = new Date();
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var randomScalingFactor = function() {
    return (Math.random() > 0.5 ? 1.0 : 0) * Math.round(Math.random() * 100);
};
var barChartData = {
    labels: [weekdays[d.getDay()], weekdays[d.getDay() - 6], weekdays[d.getDay() - 5], weekdays[d.getDay() - 4], weekdays[d.getDay() - 3], weekdays[d.getDay() - 2], weekdays[d.getDay() - 1]],
    datasets: [{
        label: 'Logged Time',
        backgroundColor: "rgba(220,220,220,0.5)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]
};
function minutesToHours(minutes) {
   var hour = Math.floor(minutes / 60);
    minutes = minutes % 60;
    return ((hour < 10) ? "0"+hour : hour) + ":" + ((minutes < 10) ? "0"+minutes : minutes);
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        elements: {
            rectangle: {
                borderWidth: 2,
                borderColor: 'rgb(0, 255, 0)',
                borderSkipped: 'bottom'
            }
        },
        responsive: true,
        title: {
            display: true,
            text: 'Vision Logged Hours'
        },
        scales: {
            yAxes: [{
                ticks: {
                    userCallback: function(item) {
                        return minutesToHours(item);
                    },
                }
            }]
        }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" height="200"></canvas>  
   </body>
</html>

Related Tutorials