[Feature] Time axis interval

[Ovilia]

What problem does this feature solve?

Since v5, the interval option of time axes is no long valid because the span of each two ticks are not always the same (e.g., Feburary has 28/29 days while March has 31 days). But it's a common requirement to set the interval level (or the minimium interval level) to be yearly/monthly/dayly/... and it can hardly be done with the current API.

What does the proposed API look like?

I'd suggest we support interval, minInterval, and maxInterval in the type of TimeUnit. If the developer want to set the interval to be 4 days, '4 days' or '4 day' is also valid.

So, valid examples of intervals include: 'year', 'quarter', '4 days', '4 day', '30 minutes', and etc.

#17044 is trying to provide a number typed interval but this cannot solve the problem of each month having different days. Using the interval of 1000 * 3600 * 24 * 30 is not accurate and logically not correct. Similar for the leap year problem.

For example, to display use ticks by month:

xAxis: {
  type: 'time',
  interval: 'month',
  axisLabel: { // optional
    showMinLabel: true,
    formatter: {
      year: '{yyyy}',
      month: '{MMM}',
      day: '{yyyy} {MMM}'' // hack for the first day
    }
  }
}

The ticks will be at the first date of each month (excluding the first one because it's displaying only because showMinLabel: true):

    |_____________|__________________________|__________________________|__ ...
    2019 Dec      2020                       Feb                        March

minInterval and maxInterval works similarly.

Note that if interval is set to be like '4 days', the first day of each month may not be on ticks any more:

    |________|________|________|________ ...
    6/21     6/25     6/29     7/3

In this case, 7/1 is not included in the ticks. #16335

Related issues

• #16927
• #17519
• #16142
• #15266
• #14305
• #14298

[pissang]

Sounds like a intuitionistic design. But there are two things we should always consider when designing this kind of domain-specific language:

1. We should be careful about the code complexity parsing the language. Especially when handling all kind of edge cases.
2. It can't benifit from TypeScript. Developers may be easy to have typo in it and spending hours to figure out what's wrong.

[Ovilia]

@pissang Yes, I've considered about the second problem. Another option would be to use intervalUnit: 'day', interval: 7, which may not be as intuitive as '7 days' and also may not be cohesive with the concept of interval with category axes, but on the other hand more rebust. Which one do you think is better?

[StimioAnthonyLeRoy]

@Ovilia You think this feature will be available for the next version ? Because I have to stay with the V4 version because of this problem.

[Ovilia]

@StimioAnthonyLeRoy This feature may probably go with 5.5.0 because it's a major feature. And our next version 5.4.1 is scheduled at Novermber. So You may proabably wait until early 2023 for this feature. However, if it's OK to use nightly build, hopefully it can be ready by the end of next month.

[pAfW001]

@Ovilia Hi, I think my problem might be fixed with the next release, but I'm not really sure, so pls let me explain here. I'm using version 5.3.2 Sample code: https://jsfiddle.net/rpgeyw7b/

Data is in ISO format but depending on certain conditions, I need to display the axis labels in either YYYY-MM or YYY-MM-DD. In the sample code, the xAxis ticks and labels are not correctly converted (Feb is missing).

Please confirm if this issue would be fixed in the next release 5.5.0 Thank you!

[Ovilia]

@pAfW001 Feb is not displayed because it overlapps with the previous labels. This is the expected behavior.

[pAfW001]

@Ovilia Thank you for your reply! If that is the case, then axisLabel should be empty there.. Could you please have a look at the xAxis of the chart again ? The problem is that March is displayed in the position of Feb, causing all other xAxis labels to be shifted to the left (1-month gap). ALso, there are only 11 xAxis ticks even though there are 12 data points

[Ovilia]

@pAfW001 Yes, this seems to be a bug. I will check this later when this PR is about to be finished.

[cllee1214]

it's looks like do not work in wechat minprogram.my version is 5.4.2. the code as follows:

or

[fasergeyte]

Hi guys!, Will it be available soon? And another question, is there any workaround how I could achieve same functionality right now? Temporary, I found a way that worked for me: e.g I need labels every 5 mins, so I experimentally found that splitNumber: 10 makes that for me for my data zoom.

[kupchic]

Sounds like a intuitionistic design. But there are two things we should always consider when designing this kind of domain-specific language:

1. We should be careful about the code complexity parsing the language. Especially when handling all kind of edge cases.
2. It can't benifit from TypeScript. Developers may be easy to have typo in it and spending hours to figure out what's wrong.

developers spending hours to set correct interval rules for time axes with current API