Date time axis uses date time scale and displays the date time values as axis labels in the specified format.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
Date-time category axis is used to display the date-time values with non-linear intervals. For example, the business days alone have been depicted in a week here.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTimeCategory" skeleton="Ed"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData{ x= new DateTime(2017, 11, 20), y= 21 },
new LineChartData{ x= new DateTime(2017, 11, 21), y= 24 },
new LineChartData{ x= new DateTime(2017, 11, 22), y= 24 },
new LineChartData{ x= new DateTime(2017, 11, 26), y= 70 },
new LineChartData{ x= new DateTime(2017, 11, 27), y= 75 },
new LineChartData{ x= new DateTime(2018, 0, 2), y= 82 },
new LineChartData{ x= new DateTime(2018, 0, 3), y= 53 },
new LineChartData{ x= new DateTime(2018, 0, 4), y= 54 },
new LineChartData{ x= new DateTime(2018, 0, 5), y= 53 },
new LineChartData{ x= new DateTime(2018, 0, 8), y= 45 }
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime x;
public double y;
}
Range for an axis, will be calculated automatically based on the provided data, you can also customize the range
of the axis using minimum
, maximum
and interval
property of the axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" minimum="new DateTime(2005, 6, 1)"
maximum="new DateTime(2007, 6, 1)" interval="4"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
Date time intervals can be customized by using the interval
and
intervalType
properties of the axis.
For example, when you set interval as 2 and intervalType as years, it considers 2 years as interval.
DateTime axis supports following interval types,
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" intervalType="Years"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
Applying Padding to the Range
Padding can be applied to the minimum and maximum extremes of the range by using the
rangePadding
property. Date time axis supports the following types
of padding,
DateTime - None
When the rangePadding
is set to None
, minimum and maximum of the axis is based on the data.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" rangePadding="None"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
DateTime - Round
When the rangePadding
is set to Round
, minimum and maximum will be
rounded to the nearest possible value divisible by interval. For example, when the minimum is 15th Jan, interval is
1 and the interval type is ‘month’, then the axis minimum will be Jan 1st.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" rangePadding="Round"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
DateTime - Additional
When the rangePadding
is set to Additional
, interval of an axis will
be padded to the minimum and maximum of the axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" rangePadding="Additional"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
You can format and parse the date to all globalize format using labelFormat
property in an axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="DateTime" labelFormat="yMd"></e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}
The following table describes the result of applying some common date time formats to the labelFormat property
Label Value | Label Format Property Value | Result | Description |
new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
new Date(2000, 03, 10) | hm | 12:00 AM | Time of the date value is displayed as label |
new Date(2000, 03, 10) | hms | 12:00:00 AM | The Label is displayed in hours:minutes:seconds format |
Axis also supports custom label format using placeholder like {value}°C, in which the value represent the axis label e.g 20°C.
<ejs-chart id="container" width="60%">
<e-chart-primaryyaxis labelFormat="${value}K"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="India" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line"></e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21, yValue1 = 28 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24, yValue1 = 44 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36, yValue1 = 48 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38, yValue1 = 50 },
};
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public DateTime xValue;
public double yValue;
public double yValue1;
}