Radzen Blazor Chart column description styling

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