New to Kendo UI for Angular? Start a free 30-day trial
How to Change the Color of the Category Axis Labels Dynamically in the Kendo UI for Angular Charts
Updated on Jan 20, 2026
Environment
| Product | Progress® Kendo UI® for Angular Charts |
Description
I have a Kendo UI for Angular Chart with a category axis. How can I change the color of the category axis labels dynamically?
This knowledge base article also answers the following questions:
- How to change the color of the category axis labels in the Kendo UI for Angular Charts?
- How to conditionally change the color of the category axis labels in the Kendo UI for Angular Charts?
Solution
To change the category label color dynamically, use a custom visual function for the axis labels.
html
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
<kendo-chart-category-axis-item-labels [visual]="labelVisual" >
</kendo-chart-category-axis-item-labels>
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>The visual callback function allows you to create a custom visual for the labels. You can then use the content property of the label to determine the color based on the category value.
typescript
public labelVisual = (e: AxisLabelVisualArgs) => {
const defaultLabel = e.createVisual();
const textElement = defaultLabel['children'][0];
const color = ['Fri', 'Wed'].includes(textElement.options.content)
? 'turquoise'
: 'coral';
textElement.options.set('fill', { color });
const group = new Group();
group.append(defaultLabel);
return group;
};The following example demonstrates how to change the color of the category axis labels based on the category value.
Change Theme
Theme
Loading ...