Chartjs Custom Legend with Time on Y-axis

Question

I am creating a very simple chart with chart.js and stuck with the two small issues.

Below is the code that I am using to create the chart/graph

<div style="width: 400px; height: 400px;">
 <canvas name="myChart" id="myChart" width="400px" height="400px"> </canvas>
 </div>

<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
animation: false,
data: {
    labels: ["Service A", "Service B", "Service C"],
    datasets: [{
        label: 'Time In Service',
        data: [180, 360, 180],
        backgroundColor: [
            '#0073CF',
            '#FF0000',
            '#7DC24B'
        ],
        borderColor: [
            '#fff',
            '#fff',
            '#fff'
        ],
        borderWidth: 2 
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});

The current chart can be seen here Chart Generated What is Need is something like Chart Needed

1. I want the x-axis labels in legend on right side
2. Currently the time is in seconds in data. I want to Show time spend on x-axis in hours:min

Any little help will be appreciated.

Answer 1

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.

PS : 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>