We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

X-Axis with Date field format


I want to show Date values on PrimaryX-Axis.
I tried this but not able to show only date value on x-axis.

.PrimaryXAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.xAxisTitle)).ValueType(AxisValueType.Datetime))

Through this I am assigning values through database.



3 Replies

JA Jayavigneshwaran Syncfusion Team January 19, 2015 06:34 AM UTC

Hi Kalpa,

We have analyzed this and made a simple chart sample with date time axis.

Find it from the below location.

The below screenshot shows the output of the attached sample

The below code snippet shows the labelFormat property




MM - > month (08),

dd -> day (20),

yyyy -> year (1990)

And also the below link shows a date time axis sample

Link: http://mvc.syncfusion.com/demos/web/chart/datetimeaxis

This below mentioned link will help in understanding about the property “valueType”

Link: http://help.syncfusion.com/UG/JS_CR/ejChart.html#primaryXAxis->valueType

Note: Kindly ensure the values passed through data source to x is of type data time.

Please let us know if you have any concern.



KS kalpa serashiya January 19, 2015 12:01 PM UTC


I tried your code but getting this javascript error.
"Unhandled exception at line 913, column 2545147 in eval code
0x800a138f - JavaScript runtime error: Unable to get property 'interval' of undefined or null reference"

Below you can see my cshtml page where I am setting the various values by using model object.

Can you just make the changes in this so that I can plot date on X-Axis

@using Syncfusion.JavaScript.DataVisualization

@using _barColumnChartSyncFusionNew.Models



var SyncFusionBarChartProp = (_barColumnChartSyncFusionNewModel)ViewData["BarSyncFusion"];

var varfoldercountData = "";


<meta charset="utf-8">

@*<link rel='nofollow' href="~/ejThemes/ej.widgets.core.min.css" rel="stylesheet" type="text/css" />

<link rel='nofollow' href="~/ejThemes/default-theme/ej.widgets.all.min.css" rel="stylesheet" id="stylesheet" type="text/css" />

<link rel='nofollow' href="~/ejThemes/ej.responsive-latest.css" rel="stylesheet" type="text/css" />*@

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jquery.globalize.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jsrender.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/ej.web.all.min.js" type="text/javascript"></script>

<script src="~/Scripts/cultures/globalize.culture.en-US.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/jquery.easing-1.3.min.js" type="text/javascript"></script>

<script src="~/Scripts/SyncFusionChart/ej.unobtrusive.min.js" type="text/javascript"></script>


function htmlDecode(value) {

return $('<div/>').html(value).text();



<div id="Tooltip" style="display: none;background-color:white;border:2px solid black;">

<span style='left: 8px; top: 8px; color: rgb(51, 51, 51); font-family: "Lucida Grande", "Lucida Sans Unicode",Verdana, Arial, Helvetica, sans-serif;font-size: 11px; margin-top: 0px; margin-left: 0px;white-space: nowrap; position: absolute;border:1px solid blue;' zindex="1">

<span style="font-size: 10px;">#point.x#</span>




<td style="padding: 0px;">#series.name#: </td>

<td style="padding: 0px;"><b>#point.y#</b></td>






<div class="row">


.PrimaryXAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.xAxisTitle)).ValueType(AxisValueType.Datetime).LabelFormat("MM/dd/yyyy"))

.PrimaryYAxis(pr => pr.Title(tl => tl.Text(SyncFusionBarChartProp.yAxisTitle)).ValueType(AxisValueType.Double).LabelFormat("{value}"))

.CommonSeriesOptions(cr => cr.EnableAnimation(true).Tooltip(tt => tt.Visible(true).Template("Tooltip"))

.Marker(mr => mr.DataLabel(dt => dt.Visible(SyncFusionBarChartProp.ShowMarker).Angle(0).TextPosition(TextPosition.Top).Offset(20)

.Font(fn => fn.Color("#282828").Size("13px").FontFamily("Segoe UI")))))

.Series(sr =>












.Title(t => t.Text(SyncFusionBarChartProp.ChartTitle))

.Legend(lg => { lg.Visible(SyncFusionBarChartProp.ShowLegend).Position(LegendPosition.Bottom).Alignment(Syncfusion.JavaScript.DataVisualization.TextAlignment.Center); })






$(document).ready(function () {


function OndataLabel(sender) {

sender.data.location.x = sender.data.location.x + 40;

sender.data.location.y = sender.data.location.y + 40;



<style class="cssStyles">



JA Jayavigneshwaran Syncfusion Team January 21, 2015 03:40 AM UTC

Hi Kalpa,

We have analyzed this. Replicated the scenario show in your code in our sample.

But we are not able to reproduce the reported issue. We have attached sample with date time axis.

Find it from the below location.

If you still face any concern, kindly revert back us by modifying the attached sample to reproduce the issue.

Or else share you sample along with data source and replication procedure.

This would be helpful for us to solve the issue sooner.

Please let us know if you have any concern.



Live Chat Icon For mobile
Up arrow icon