Show TimeSpan on Value Axis in Kendo Chart - asp.net-mvc

Question

I want to show TimeSpan values on my Value axis. Chart is working fine for numeric but if I change to TimeSpan nothing is showing. I checked the data and it's ok. If TimeSpan is not supported is there a way to format minutes in int values to be shown as Time (ie ,,6h 34 min")
Here is my chart:
#(Html.Kendo().Chart<MachineWorkTimeChartViewModel>()
.Name("chartMachineWorkTime")
.DataSource(ds => ds.Read(read => read.Action("MachineWorkTimeChart_Read", "Charts")
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Bar(e => e.WorkTimeSpan).Name("Time of work");
})
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories(e => e.MachineName)
.Line(line => line.Visible(false))
)
)
and here is my ViewModel:
public class MachineWorkTimeChartViewModel
{
public int WorkMinutes { get; set; }
public string MachineName { get; set; }
public TimeSpan WorkTimeSpan => TimeSpan.FromMinutes(WorkMinutes);
}

Answer 1

Based on your answer ezanker and modified js function from jgritty link
I got it to work (I didn't want to use an external js library).
Here is full example:
#(Html.Kendo().Chart<MachineWorkTimeChartViewModel>()
.Name("chartMachineWorkTime")
.DataSource(ds => ds.Read(read => read.Action("MachineWorkTimeChart_Read", "Charts")
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.Series(series =>
{
series.Bar(e => e.WorkMinutes).Name("Time of work");
})
.CategoryAxis(axis => axis
.Name("series-axis")
.Line(line => line.Visible(false))
)
.CategoryAxis(axis => axis
.Name("label-axis")
.Categories(e => e.MachineName)
)
.ValueAxis(axis => axis
.Numeric()
.Labels(labels => labels.Format("{0} min.")
.Template("#= getTimeSpanFromMinutes(value) #"))
// Move the label-axis all the way down the value axis
.AxisCrossingValue(0, int.MinValue)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}%")
.Template("#= getTimeSpanFromMinutes(value) #")
))
<script>
function getTimeSpanFromMinutes(newMinutes) {
var minsPerYear = 24 * 365 * 60;
var minsPerMonth = 24 * 30 * 60;
var minsPerWeek = 24 * 7 * 60;
var minsPerDay = 24 * 60;
var minsPerHour = 60;
var minutes = newMinutes;
var years = Math.floor(minutes / minsPerYear);
minutes = minutes - years * minsPerYear;
var months = Math.floor(minutes / minsPerMonth);
minutes = minutes - months * minsPerMonth;
var weeks = Math.floor(minutes / minsPerWeek);
minutes = minutes - weeks * minsPerWeek;
var days = Math.floor(minutes / minsPerDay);
minutes = minutes - days * minsPerDay;
var hours = Math.floor(minutes / minsPerHour);
minutes = minutes - hours * minsPerHour;
var timeSpan = "";
if (years > 0)
timeSpan += years + " years ";
if (months > 0)
timeSpan += months + " months ";
if (weeks > 0)
timeSpan += weeks + " weeks ";
if (days > 0)
timeSpan += weeks + " days ";
if (hours > 0)
timeSpan += hours + " hours ";
if (minutes > 0)
timeSpan += minutes + " min. ";
return timeSpan;
}</script>