Rank 1
Hi,
How can I implement both align and angle properties in the rotation property of the labels.
I found the format labels={{ rotation: 'auto' }} on https://www.telerik.com/kendo-react-ui/components/charts/chart/styling/. However, I also want to specify align: "center" - as said to be possible by https://www.telerik.com/kendo-react-ui/components/charts/api/LabelRotation/#toc-angle.
I tried labels={{rotation: {align:"center", angle:"auto"}}} but does not seem to work as labels still remain aligned at the end.
Thanks,
Lara
10 Answers, 1 is accepted
Rank 1
Rewording by question above because I have realized that the align property sets the rotation point rather than the alignment of the label when the label in unrotated.
Therefore, my problem here is that my labels seem to be aligned to the right of the chart bars (attached screenshot). How can I align them centrally please?
Thanks again,
Lara
Hello, Lara,
Thank you for the details.
I used the same code and there is a visible change when using "center" and "end". Please refer to the following video:
https://www.screencast.com/t/EsCUvkmqp8U
This is the example used in the video:
https://stackblitz.com/edit/react-easffn?file=app/main.jsx
Let me know if I missed something.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thanks for this reply but I don't know if you have seen my latest update of the ticket. Basically, my problem is that when the chart labels are unrotated, the labels are not being centrally aligned under the corresponding bar (as shown in my attached screenshot). Can you help me with this please?
Hello, Lara,
Indeed I have already started working on the request when the new reply was sent and I did not see it.
I took a look at the picture, and I can assume that there is another property that affects this. The "align" property is taken into account only when the labels are rotated and on the screenshot, they are in their default state(not rotated). This means that the "align" should not be applied at all.
https://stackblitz.com/edit/react-easffn?file=app/main.jsx
Is it possible to share the full configuration of the Chats, so I can observe if there is a specific combination of properties that can cause this effect?
Regards,
Stefan
Progress Telerik
Rank 1
Hi,
So I've done some further investigation and the issue is due to the applied 'font' property. Basically, increasing the font-size and changing the font-family is causing the labels to align wrongly.
Code below:
labels={{ rotation: "auto", font: "12px Roboto,"Helvetica Neue",sans-serif"}}
How can I solve this issue please?
Thanks,
Lara
Hello, Lara,
I did apply the same configuration, but the labels are still positioned as expected:
https://stackblitz.com/edit/react-easffn?file=app%2Fmain.jsx
Usually, properties like margin can affect it as well, this is why sharing the full configuration will help us pinpoint the reason and suggest a possible solution.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
I've updated your code here with a sample of what I am doing: https://stackblitz.com/edit/react-easffn?file=app%2Fmain.jsx
As seen the x-axis labels are not center aligned like in your previous example.
Thanks,
Lara
Rank 1
Just realized the link I sent still contains your code.. however, I have solved the problem. I was using font: "inherit" which was apparently messing up the alignment. When I hardcoded the 12px and font-family it seems to be working well.
Thanks a lot,
Lara
Rank 1
FYI, there is in fact a problem when applying font: "inherit" not because some sort of property is being inherited from the application but because simply using font:"inherit" misaligns the labels. I've created a test sample:
https://stackblitz.com/edit/react-easffn-lljp2e?file=app/main.jsx
Hello, Lara,
I`m glad to hear the issue is resolved.
The issue with "inherit" is that depending on the application structure the inheritance can come from different elements, which can lead to inconsistency results.
Please let me know if additional assistance is needed on this matter.
Regards,
Stefan
Progress Telerik