Show ellipsis in chart labels for long texts

[Maitri]

I am using column charts in which the labels on category axis are too long and they overlap each other. How can I show ellipsis(...) for longer texts so that they do not overlap with other labels?

[Hetali]

Hi Maitri,

In order to show ellipsis for longer texts, use the content property of the CategoryAxisLabelsComponent and add the ellipsis as seen below:

<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;
  }
}

OR

The CategoryAxisLabels' rotation can be set to 'auto' which will rotate the labels if the labels are overlapping. For example:

<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>

This StackBlitz example contains two column charts with long CategoryAxisLabels, I have added ellipsis in one chart and rotation in another.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Maitri]

Hi Hetali,

This is working as expected but i want to be able to see the full text when i hover over the label. Just like a tooltip.

[Hetali]

Hi Maitri,

We have a dedicated article to display Axis Labels tooltip. Please add the following sinppet to show the tooltip on Category Label:

<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;
}

In this updated Stackblitz example, the longer Category Labels show tooltip on hover in the Kendo UI Chart.

Let me know if this helps or if you have any further questions.

Regards,
Hetali
Progress Telerik