Menu
I feel like this is an underdocumented feature, but I admit it's far more likely that I am undergoogling it.
I have a charjs object:
<body>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
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: sessions
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
// Elements options apply to all of the options unless overridden in a dataset
// In this case, we are setting the border of each bar to be 2px wide and green
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(0, 255, 0)',
borderSkipped: 'bottom'
}
},
responsive: true,
title: {
display: true,
text: 'Vision Logged Hours'
}
}
});
};
</script>
that looks like this:
My problem is that the y-axis is in minutes and I want it in hours. I'm a little lost about the feature set - is this possible?
927
With a simple hand-made function :
function minutesToHours(minutes) {
var hour = Math.floor(minutes / 60);
minutes = minutes % 60;
return ((hour < 10) ? "0"+hour : hour) + ":" + ((minutes < 10) ? "0"+minutes : minutes);
}
You can then use the userCallback property of the yAxes ticks like this :
options: {
scales: {
yAxes: [{
ticks: {
userCallback: function(item) {
return minutesToHours(item);
},
}
}]
}
}
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
