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.
1 Like
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>
1 Like
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>
1 Like
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>
@korchev
is there any way to show ... when context value is hidden
my code is not working