Edit this page

Display Time on Value Axis

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.

Important

Kendo UI Scatter Charts support the display of dates on the xAxis and yAxis natively.

The example below demonstrates how to display time on the value axis of categorical Kendo UI Charts.

Example
    <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>

See Also

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy