How to Customize the DateTime Axis in ASP.NET Core Charts
Syncfusion, Inc Syncfusion, Inc
29.8K subscribers
67 views
0

 Published On Apr 9, 2024

Learn how to customize the datetime axis of Syncfusion ASP.NET Core Charts easily. This video shows you how to add a title and customize the range, intervals, label format, padding range, and non-linear intervals to the chart’s date-time axis.

The ASP.NET Core Charts is a well-crafted charting component to visualize data. It contains a rich UI gallery of 50+ Charts and Graphs, ranging from line to financial, that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. It also includes features such as zooming, panning, tooltips, crosshairs, trackball, highlight, and selection. This video shows how to configure a chart with a title, legends, data labels, and tooltips.

The Date time axis uses the date time scale and displays date-time values as axis labels in the specified format. In this video, the data source contains dates in the list. To configure the horizontal x-axis with dates, add the e-chart-primary-X-axis tag with the value-Type property set to DateTime and the title property set to ‘Month’. Additionally, use the edge-Label-Placement property set to ‘shift’ to ensure edge labels are fully visible within the chart area.

To customize the datetime axis label format, add the label-format property to the e-chart-primary-X-axis tag and set its value to custom format. Using the range padding property, add extra space around the data points and labels near the left and right edges of the chart area. The available padding types are none, normal, additional, and round. The datetime axis does not support normal range padding. Auto behavior will choose any one option from none, additional, and round padding.

In the none-option, the minimum and maximum of the axis range are based on data. When the option is set to round, the minimum and maximum extremes of the range are rounded to the nearest possible value divisible by the interval. In the additional padding, the interval will be padded to the minimum and maximum extremes of the axis. The Date-time category axis is used to display the date-time values with non-linear intervals. You can set types like auto, days, hours, minutes, months, seconds, and years using the interval type property.

Tutorial video: https://www.syncfusion.com/tutorial-v...

Download an example from GitHub:
https://github.com/SyncfusionExamples...

Refer to the documentation for the datetime axis in the Syncfusion ASP.NET Core Charts control:
https://ej2.syncfusion.com/aspnetcore...

Check out this online example of datetime axis in ASP.NET Core Chart control:
https://ej2.syncfusion.com/aspnetcore...

Refer to the documentation for axis customization in the Syncfusion ASP.NET Core Charts control:
https://ej2.syncfusion.com/aspnetcore...

Refer to the documentation for axis labels in the Syncfusion ASP.NET Core Charts control:
https://ej2.syncfusion.com/aspnetcore...

The ASP.NET Core Charts Getting Started video:
   • Getting Started with the ASP.NET Core...  

TRIAL LICENSE KEY
-------------------------
If you need a trial license key, start an ASP.NET Core trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/ma...

Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/c...

BOOKMARK DETAILS
----------------------------
[00:00] Introduction
[01:05] Add a datetime axis
[02:24] Format x-axis labels
[03:16] Set custom range for the x-axis
[03:54] Set custom label intervals for the x-axis
[04:20] Change the range padding
[05:38] Add a datetime category axis
[06:12] Change interval types

ASP.NET CORE CHARTS
----------------------------
Product overview: https://www.syncfusion.com/aspnet-cor...
Documentation: https://ej2.syncfusion.com/aspnetcore...
Online examples: https://ej2.syncfusion.com/aspnetcore...
Download free trial: https://www.syncfusion.com/downloads/...
NuGet package: https://www.nuget.org/packages/Syncfu...

SUBSCRIBE
-------------
Syncfusion on YouTube:    / syncfusioninc  
Sign up to receive email updates: https://www.syncfusion.com/account/em...

SOCIAL COMMUNITIES
-----------------------------
Facebook:   / syncfusion  
Twitter:   / syncfusion  
LinkedIn:   / syncfusion  
Instagram:   / syncfusionofficial  

#aspnetcore #charts #axis

show more

Share/Embed