RazdenChart vertical Category Axis Labels

Radzen.Blazor Components
1

Can't speak for other ways to do it but here's how i formatted the Category Axis labels. In this case i was rotating the labels vertically and didn't want the month datetime to take up so much vertical space. In short you call your own .cs function so instead of the @context.value you use @(MyFormatMonthYear(context.Value))

image
image951×507 22.2 KB

In the code-behind .cs page add your own function to your class:

public string MyFormatMonthYear(object value)
        {
            string s = "";
            s =  ((DateTime)value).ToString("MMM yyyy") ; 
            return s;

        }

in the .razor page..

<RadzenRow>
    <RadzenColumn SizeXL="6" SizeXX="6" SizeXS="12">
        <RadzenCard Style="margin-bottom: 16px">
            <RadzenHeading Text="Revenue" ></RadzenHeading>
            <RadzenChart Style="width: max; height: max; margin: 50px; margin-top: 0px; 
                    margin-right: 0px; margin-left: 0px; margin-bottom: 10px">
                <RadzenCategoryAxis  >
                    <RadzenSeriesDataLabels  Visible="true"></RadzenSeriesDataLabels>
                    <RadzenAxisTitle  Text="Month"></RadzenAxisTitle>
                    <RadzenTicks>
                        <Template>
                            <text class="custom-category-label"  style="text-anchor: start; transform: translate(@(context.X)px, @(context.Y + 10)px) rotate(90deg)">
                                     @(MyFormatMonthYear(context.Value))
                            </text>
                        </Template>
                    </RadzenTicks>
                </RadzenCategoryAxis>
                <RadzenLegend Visible="false"></RadzenLegend>
                <RadzenValueAxis FormatString="" ></RadzenValueAxis>
                <RadzenColumnOptions></RadzenColumnOptions>
                <RadzenAreaSeries TItem="Pages.Index.RevenueByMonth" Data="@_revenueByMonth" CategoryProperty="Month"
                    ValueProperty="Revenue"></RadzenAreaSeries>

            </RadzenChart>
        </RadzenCard>
    </RadzenColumn>
</RadzenRow>
1 Like