Hello i am using Radzen Chart Column component to display my data. I have a question. Is there any way to make it ?
This is how my component looks like. Words under the bars are conflicts how can i change those stylings. I would like to see them vertical.
Hi @Ebcinar,
Changing the display of the category values isn't currently supported. We plan to add the ability to rotate the labels via property.
I've managed to rotate the labels by using the currently available API. Here is how:
<RadzenCategoryAxis>
<RadzenTicks>
<Template>
<text class="rz-tick-text" style="text-anchor: start; transform: translate(@(context.X)px, @(context.Y + 10)px) rotate(45deg)">@context.Value</text>
</Template>
</RadzenTicks>
</RadzenCategoryAxis>
UPDATE: This is no longer needed. Axis label rotation has been implemented since Radzen.Blazor 5.5.0.
Hi i tried to add your code into mine but now thats look like this. Thank you for your effort. By the way i figured out something. Firstly it looks like the first photo and if i click anywhere, even i change the dpi it becomes the second one. Word's are not complete they are going out of component and second is just crashing.
<RadzenChart>
<RadzenCategoryAxis>
<RadzenTicks>
<Template>
<text class="rz-tick-text" style="text-anchor: start; transform: translate(@(context.X)px, @(context.Y + 10)px) rotate(45deg)">@context.Value</text>
</Template>
</RadzenTicks>
</RadzenCategoryAxis>
<RadzenColumnSeries Data="@DynamicBarData" CategoryProperty="Label" Title="Item" LineType="LineType.Dashed" ValueProperty="BarData" />
<RadzenColumnOptions Radius="5" />
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="" />
</RadzenValueAxis>
</RadzenChart>
Do you use a culture that uses comma as decimal separator? In any case try this:
<text class="rz-tick-text" style="text-anchor: start; transform: translate(@(Math.Truncate(context.X))px, @(Math.Truncate(context.Y + 10))px) rotate(45deg)">@context.Value</text>
Now the context value is going out of the component is there any way to show complete word ? Thank you by so far you are great !
This CSS rule should make the labels fully visible:
.rz-chart svg {
overflow: visible;
}
For the sake of newbies like me this should be in the Razor component itself within style segment like this:
<style>
.rz-chart svg {
overflow: visible;
}
</style>
Dear All, first of all, thank you for the great tool! The rotation works for me fine, however, formatting the text (@context.Value) doesn't work. Even a toString() throw an exception. On the x axis, I have a date array, which can be formatted without any trouble by the Formatter tag. However, once I insert the above code to rotate the values, formatting is overwritten. This is why I tried to manipulate the context value.
Could you help me how to achieve it?
Thank you!
Zsolt
You have full control over displaying the value since you have access to it. Feel free to format it however you need. I am sure ToString() will work unless the value is null.
