Line chart labels are incorrect with large datasets

[Stephanie]

When using kendo line charts with small datasets I am able to view the correct labels on the chart (first picture attached). My data has a date and a number value. However my data set can be as small as 0 and be as large as 10,000 data points in some cases. At 600 datapoints, the labels on my chart are defaulted to "00:00" (second picture attached).

I would like to make the labels on my chart as dynamic as I can keeping in mind the range of data I could have. Is this possible and how can I do this?

The html code for my chart looks like the following: 

<kendo-chart
        (render)="onRender($event)"
        #metricChart
        renderAs="canvas"
        [pannable]="{ lock: 'y' }"
        [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"
        style="height: 300px"
      >
        <kendo-chart-value-axis>
          <kendo-chart-value-axis-item
            [majorUnit]="25"
            [max]="100"
            [min]="0"
            type="numeric"
            [majorGridLines]="{ dashType: dashType }"
            name="valueAxis"
          >
          </kendo-chart-value-axis-item>
        </kendo-chart-value-axis>

        <kendo-chart-category-axis>
          <kendo-chart-category-axis-item
            [labels]="{ format: 'HH:mm', rotation: 'auto' }"
            type="date"
            [majorGridLines]="{ dashType: dashType }"
            name="categoryAxis"
            [justified]="true"
            [minorTicks]="{step:10}"
          >
          </kendo-chart-category-axis-item>
        </kendo-chart-category-axis>

        <kendo-chart-area *ngIf="hasActiveAlarm" background="#ffedf0"></kendo-chart-area>

        <kendo-chart-series>
          <kendo-chart-series-item
            [data]="metricsData"
            [markers]="{ visible: false }"
            [style]="lineStyle"
            color="#0e893f"
            type="line"
            field="Value"
            categoryField="MetricDate"
          >
          </kendo-chart-series-item>
        </kendo-chart-series>

        <kendo-chart-tooltip>
          <ng-template kendoChartSeriesTooltipTemplate let-category="category" let-value="value">
            {{ category | date: 'medium' }} : {{ value }}
          </ng-template>
        </kendo-chart-tooltip>
      </kendo-chart>

[Stephanie]

I found the answer to this question by editing the <kendo-chart-category-axis-item> and removing the following line: [labels]="{ format: 'HH:mm', rotation: 'auto' }".

[Martin Bechev]

Hi Stephanie, 

Setting the baseUnit to fit or baseUnitStep to auto could also help in creating dynamic labels that fits the view.

https://www.telerik.com/kendo-angular-ui/components/charts/api/CategoryAxisItemComponent/#toc-baseunit

https://www.telerik.com/kendo-angular-ui/components/charts/api/CategoryAxisItemComponent/#toc-baseunitstep