Truncating Labels in the Chart Component
Environment
Product | Progress® 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:
-
Define the labels content callback function in your Chart configuration. This function is responsible for generating the content of the labels.
html<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>
tspublic labelContent = (args: AxisLabelContentArgs): string => {...}
-
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.
-
Return the truncated label string—the callback function returns the truncated label and the Chart displays it.
tspublic 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.