Changing only 1 label on an axis

1 Answer 103 Views
Charts
Jimmy
Top achievements
Rank 1
Iron
Jimmy asked on 16 Nov 2021, 06:48 AM

hello,

I have been searching myself silly on how to change just 1 label in an axis.I have searched for hours on how to do this, but can not find it. 

For instance : I have a x-axis that has every month of the year. But I want to change the color of the current month. 

As far as i can tell, I have to do something with the  axisLabelVisualArgs, but for the life of me, I can't figure out how I can change a text's color dependant on a condition.

This is the result I want to get :

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 18 Nov 2021, 09:24 AM

Hello Jimmy,

I can relate as the Charts have a very rich API that might easily overwhelm users that are not very well acquainted with it. Also, creating custom visuals through the Drawing API is certainly no trivial task.

You are correct that customizing the label in the described manner needs to be achieved through a custom visual:

https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels/#toc-rendering-custom-visuals

There are two possible approaches - either create an entirely new visual using the Drawing API (set text, content, position, etc):

https://www.telerik.com/kendo-angular-ui-develop/components/drawing/

https://www.telerik.com/kendo-angular-ui-develop/components/drawing/basic-shapes/#toc-drawing-the-text

... or obtain the default visual that would be rendered via the createVisual() method, and modify it - the more straight-forward solution in this specific use case.

The following example demonstrates how to modify the default visual by changing the text color conditionally if the label matches a custom condition - in the demo we check whether the text corresponds to the current week day:

https://stackblitz.com/edit/angular-fsdytl?file=app/app.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jimmy
Top achievements
Rank 1
Iron
commented on 18 Nov 2021, 10:48 AM

Thank you very much for this solution.

I managed to find a slightly more complicated method in the end, right before you replied to my question.

Your method is much more elegant, than me doing it by redrawing the element through the Kendo Drawing.

Tags
Charts
Asked by
Jimmy
Top achievements
Rank 1
Iron
Answers by
Dimiter Topalov
Telerik team
Share this question
or