Axis DateTime valueType intervals

Question

When using valueType: 'DateTime' default axis settings, the intervals look appropriately spaced out when the dataset is greater than 14 days. But when the dataset is less than 14 days, the axis labels repeat themselves (e.g. Feb 1, 23, Feb 1, 23, Feb 1, 23, Feb 2 23, Feb 2 23, etc).

See example here with Option 1 & Option 2 in the ngOnInit function:

https://stackblitz.com/edit/angular-a3xvsv-gxdszg?file=app.component.ts

Ideally, smaller datasets would have axis labels spaced out further and not duplicate themselves. Our dataset is dynamic, so we can't manually specific interval in the config.

Please advise. Thank you

Nishanthi Panner Selvam · Answer

Hi Luke,Greetings from Syncfusion.After thoroughly investigating the issue with the DateTime
axis labels in our chart, we have come to a solution that does not require
modifying the labelFormat. The label format and interval for the axis will be
calculated automatically based data.We have attached modified sample for your reference.Screenshot:Sample: https://stackblitz.com/edit/angular-a3xvsv-ygjety?file=app.component.tsKindly revert us if you have any concerns.Regards,Nishanthi

Luke Adams · Answer

To clarify, we want the axis label to be the date with Month, Day, Year:

But this was done by manually specifying the invervalType: 'Days' & interval: 1. This won't work for larger datasets.

This should be rendered by intervalType: 'Auto' without specifying an interval value. And of course scale to larger datasets that might render an interval more spaced out (as in Option 1 in the stackblitz example).

Thank you!

Nishanthi Panner Selvam · Answer

Luke,We suggest you to use axisLabelRender
event, which allows us to remove duplicate axis labels.To illustrate this enhancement,
we have prepared a sample, along with a screenshot for your reference. The
sample demonstrates how the axisLabelRender event can be implemented to
identify and prevent the display of duplicate labels on the X-axis of the
chart.Code-snippet:

public axisLabelRender(args): void {
         
  if( args.axis.name === 'primaryXAxis' && args.text === this.previousAxisName) {
         
      args.cancel = true;
          
  } else {
         
      args.cancel = false;
         
  }
     
  this.previousAxisName = args.text;
    }

Screenshot:Sample: https://stackblitz.com/edit/angular-a3xvsv-lat6xy?file=app.component.ts,app.component.htmlKindly revert us if you have any concerns.Regards,Nishanthi

Luke Adams · Answer

Hi Nishanthi,Thank you for your response!Using the axisLabelRenderer as you described works. It does seem like this is something that the intervalType: 'Auto' feature should support out of the box. Maybe excluding duplicate axis labels could be a future feature/enhancement But for now, your workaround works well for us.Another issue I just ran into while testing.. if our dataset is one day only, it doesn't appear that any data is displaying on the chart:https://stackblitz.com/edit/angular-a3xvsv-pavnij?file=app.component.ts Again, our dataset is dynamic, so we can't easily toggle between intervalType Days, Hours, etc. We need to use Auto and support very small and very large date ranges.Thank you!

Nishanthi Panner Selvam · Answer

Luke,When you set only one data point for the line chart, the chart may not display a line data. This behavior occurs because at least two data points are needed to create a line by connecting them. When only one data point is provided, there isn't enough information to draw a line between points. You expect to place data even if you set one data you can use marker.We have attached sample , code-snippet and sample for your reference.Code-snippet:

public circleMarker: Object = { visible: true, height: 7, width: 7, shape: 'Circle', isFilled: true }; Screenshot:Sample: https://stackblitz.com/edit/angular-a3xvsv-yj34xr?file=app.component.ts,app.component.html,chart-data.service.tsKindly revert us if you have any concerns.Regards,Nishanthi

Luke Adams · Answer

Got it, thank you Nishanthi!

Nishanthi Panner Selvam · Answer

Luke,Most
Welcome! Please get back to us if you need further assistance.Regards,Nishanthi