score:3

Accepted answer

have a try like this,

need to modify your data structure a little and set the y=axis properties for displaying the required label format.

p.s : you need to use the latest chart.js library since the position right functionality was recently added and also i have increased the second value in your given example to display some meaningful data in hh:mm format.

function formattime(secs)
{
    var hours = math.floor(secs / (60 * 60));
   
    var divisor_for_minutes = secs % (60 * 60);
    var minutes = math.floor(divisor_for_minutes / 60);
 
    var divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = math.ceil(divisor_for_seconds);
  
    return hours + ":" + minutes;
}


var ctx = document.getelementbyid("mychart");


var mychart = new chart(ctx, {
type: 'bar',
animation: false,
data: {
    labels: ["time"],
    datasets: [{
        label: "service a", 
        data: [1800], 
        backgroundcolor: '#0073cf',
        bordercolor: '#fff',
        borderwidth: 2 
    },
    {
        label: "service b",
        data: [36000],
        backgroundcolor: '#ff0000',
        bordercolor: '#fff',
        borderwidth: 2 
    },
    {
        label: "service c",
        data: [8000],
        backgroundcolor: '#7dc24b',
        bordercolor: '#fff',
        borderwidth: 2 
    }]
},
options: {
    scales: {
        yaxes: [{
            ticks: {
                beginatzero:true,
                callback: function(label, index, labels) {
                 return formattime(label);
                 }
            }
        }]
    },
    legend: {
            position: "right",
            display:true
      
        }
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/chart.min.js"></script>
<div style="width: 400px; height: 400px;">
 <canvas name="mychart" id="mychart" width="400px" height="400px"> </canvas>
 </div>


Related Query

More Query from same tag