New to Kendo UI for Angular? Start a free 30-day trial

Truncating Labels in the Chart Component

Environment

ProductProgress® Kendo UI® for Angular Charts

Description

To truncate and add an ellipsis to lengthy axis or series labels in the Kendo UI for Angular Chart component, you can utilize the content callback feature. This allows you to customize the label display based on your desired length.

Solution

Follow these steps to truncate the Chart labels:

  1. Define the labels content callback function in your Chart configuration. This function is responsible for generating the content of the labels.

    <kendo-chart-category-axis>
      <kendo-chart-category-axis-item [categories]="categories">
        <kendo-chart-category-axis-item-labels [content]="labelContent" >
        </kendo-chart-category-axis-item-labels>
      </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    public labelContent = (args: AxisLabelContentArgs): string => {...}
  2. Check the length of the label using the JavaScript length array property. If the label is longer than the desired length, truncate it and add an ellipsis:

    • Set a maximum length for your labels.
    • If a label exceeds the maximum length, use the JavaScript substring method to truncate it and then append an ellipsis ('...') to indicate that the label has been shortened.
  3. Return the truncated label string—the callback function returns the truncated label and the Chart displays it.

    public labelContent = (args: AxisLabelContentArgs): string => {
      const maxLength = 10;
      return args.value.length > maxLength ? args.value.substring(0, maxLength) + '...' : args.value;
    };

The following example demonstrates how to truncate category axis labels longer that 10 characters.

Example
View Source
Change Theme:

See Also

In this article

Not finding the help you need?