LabelRotation on ChartCategoryAxisLabelsProps

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

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

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

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

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

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