Pre loader

Based on user selected interval the date time ranging has to be changed in x axis

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

  • You must to post comments

Doing this is a combination of setting the axis visible range, along with the axis intervals which in your case probably means majorDelta. Documentation for visibleRange is here. Various methods for controlling the label interval are here.

For your case you could just set autoTicks false and then for 5 Min interval, set majorDelta to 5 * 60 (remember scichart date axis uses seconds). If you’re using version 2, you must set a minorDelta value as well. In the new version 3, it will use the minorsPerMajor property to calculate minorDelta if it is not explicitly set. However, the labels you will get will depend on your visible range.

The other option is to use the tickProvider as detailed in the documentation to explicitly set the intervals. You don’t have to create a custom TickProvder class, you can just do

axis.tickProvider.getMajorTicks = (minorDelta: number, majorDelta: number, visibleRange: NumberRange) => {
// Calculate and return major tick values as an array
axis.tickProvider.getMinorTicks = (minorDelta: number, majorDelta: number, visibleRange: NumberRange) => {
// Calculate and return minor tick values as an array

If you use this method, such that your getMajorTicks is going to change as the result of user selection, then you need to make sure that there is something that forces the chart to redraw. Any change to the visibleRange will do that, or you can just call sciChartSurface.invalidateElement()


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.