<kendo-chart>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [labels]="{content: content}">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
</kendo-chart>

public content = (e) => {
  if(e.value.length > 3) {
    var truncateValue = e.value.substring(0, 3) + '...';
    return truncateValue;
  } else {
    return e.value;
  }
}

<kendo-chart>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [labels]="{rotation: 'auto'}">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
</kendo-chart>

<kendo-chart (render)="attachSurfaceHandlers($event)">
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item>
      <kendo-chart-category-axis-item-labels [content]='content' [visual]='visual'>
      </kendo-chart-category-axis-item-labels>
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
</kendo-chart>

<ng-template #popupTemplate>
  <div class="chart-popup k-tooltip">
    {{ popupContent }}
  </div>
</ng-template>

public attachSurfaceHandlers(e: any): void {
  e.sender.surface.bind('mouseenter', args => this.onMouseEnter(args));
  e.sender.surface.bind('mouseleave', args => this.onMouseLeave());
}

public onMouseEnter(e: any): void {
  const tooltip = e.element.parent.tooltip;
  if (!tooltip) {
    return;
  }
  if (this.popupRef) {
    this.popupRef.close();
  }
  this.popupContent = tooltip;
  this.popupRef = this.popupService.open({
    content: this.popupTemplate,
    offset: {
      left: e.originalEvent.pageX + 5,
      top: e.originalEvent.pageY + 10
    }
  });
}

public onMouseLeave(): void {
  if (!this.popupRef) {
    return;
  }
  this.popupRef.close();
    this.popupRef = null;
  }

public visual = (e: AxisLabelVisualArgs): any => {
  const visual = e.createVisual();
  if(e.value.length > 3) {   // Remove the if-condition if you want to show the tooltip for all the labels
    (<any> visual).tooltip = e.value;
  }
  return visual;
}