Display Time on the Value Chart Axis
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I render date and time values by representing the dates as numeric values in the Chart?
Solution
The valueAxis on categorical Kendo UI Charts supports the display of numbers only. However, it is possible to render date and time values by representing the dates as numeric values.
Kendo UI Scatter Charts support the display of dates on the
xAxisandyAxisnatively.
The following example demonstrates how to display time on the value axis of categorical Kendo UI Charts.
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [new Date("2015/01/01 01:22").getTime(),
new Date("2015/01/01 02:24").getTime()]
}],
valueAxis: {
labels: {
template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
},
min: new Date("2015/01/01").getTime(),
majorUnit: 20 * 60 * 1000 // 20 minutes step
},
tooltip: {
visible: true,
template: "#= kendo.format('{0:HH:mm}', new Date(value)) #"
}
});
</script>