Error when using kendo-chart-category-axis-item

Question

I am receiving an error when using the Angular kendo charts. Everything works fine until I include the <kendo-chart-category-axis-item> component. This code did work with the <kendo-chart-category-axis-item> component, but we have since migrated to ABP.io

For example, this works:

        <kendo-chart [style.height]="'125px'">
          <kendo-chart-tooltip>
            <ng-template kendoChartSeriesTooltipTemplate let-value="value">
              {{ value }}
            </ng-template>
          </kendo-chart-tooltip>
          <kendo-chart-area
            [background]="chartBackgroundColor"></kendo-chart-area>
          <kendo-chart-series>
            <kendo-chart-series-item
              type="bar"
              [color]="afterColor"
              [stack]="true"
              [data]="[9]"
              *ngIf="sketch && mitigation">
            </kendo-chart-series-item>
            <kendo-chart-series-item
              [color]="beforeColor"
              type="bar"
              [data]="[21]">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>

But this, throws an error:

        <kendo-chart [style.height]="'125px'">
          <kendo-chart-tooltip>
            <ng-template kendoChartSeriesTooltipTemplate let-value="value">
              {{ value }}
            </ng-template>
          </kendo-chart-tooltip>
          <kendo-chart-area
            [background]="chartBackgroundColor"></kendo-chart-area>
          <kendo-chart-category-axis>
            <kendo-chart-category-axis-item [categories]="['Count']">
              <kendo-chart-category-axis-item-labels [rotation]="-90">
              </kendo-chart-category-axis-item-labels>
            </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>
          <kendo-chart-series>
            <kendo-chart-series-item
              type="bar"
              [color]="afterColor"
              [stack]="true"
              [data]="[9]"
              *ngIf="sketch && mitigation">
            </kendo-chart-series-item>
            <kendo-chart-series-item
              [color]="beforeColor"
              type="bar"
              [data]="[21]">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>

The errors it throws are:

ERROR TypeError: Cannot read properties of undefined (reading 'split')

Uncaught TypeError: Cannot read properties of undefined (reading 'createCrosshairTooltips')

I am expecting to see items on the category axis. I've tried defining a custom tooltip to no avail, have also tried removing it. There was another and much older question about this error on SO, but no one has answered it. Any help would be appreciated, thank you.

Answer 1

Okay, I was able to work around this error and found a solution by defining a CategoryAxisLabels object and just binding that to the kendo-chart property like so:

In my .ts file I've defined the object:

  public categoryCountAxis: CategoryAxis =
    {
      categories: ['Count'],
      labels: {
        rotation: -90
      }
    }

And bind it to the kendo-chart:

        <kendo-chart [style.height]="'125px'" [categoryAxis]="categoryCountAxis">
          <kendo-chart-tooltip>
            <ng-template kendoChartSeriesTooltipTemplate let-value="value">
              {{ value }}
            </ng-template>
          </kendo-chart-tooltip>
          <kendo-chart-area
            [background]="chartBackgroundColor"></kendo-chart-area>
          <kendo-chart-series>
            <kendo-chart-series-item
              type="bar"
              [color]="afterColor"
              [stack]="true"
              [data]="[9]"
              *ngIf="sketch && mitigation">
            </kendo-chart-series-item>
            <kendo-chart-series-item
              [color]="beforeColor"
              type="bar"
              [data]="[21]">
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>