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>
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>
