Axis X is linked to the page zoom!

Radzen Studio Blazor WebAssembly
1

Hi,
I've made the bar chart and I don't understand why axis X is linked to the page zoom
Zoom1

Capture
Capture706×451 8.46 KB

Zoom2
Capture
Capture828×250 5.38 KB 

 <RadzenChart>
                        <RadzenColumnSeries Data="@graphSales" CategoryProperty="Month" ValueProperty="Revenue" LineType="LineType.Dashed" />
                                                <RadzenColumnOptions Radius="1" />
                        <RadzenCategoryAxis Padding="1" FormatString="{0:MMM}" />
                        <RadzenValueAxis>
                            <RadzenGridLines Visible="true" />
                            <RadzenAxisTitle Text="Quantité" />
                        </RadzenValueAxis>
 </RadzenChart>

How can I set the X axis to be independent of the page zoom?
Thanks in advance to your support!

2

Indeed that's the default - Step is automatically calculated based on the chart width. You can set it to a fixed value however be aware that labels will overlap.

<RadzenCategoryAxis Padding="1" FormatString="{0:MMM}" Step="@TimeSpan.FromDays(28)" />
1 Like
3

Hi, I will try it.
However, what do you means when you say :" however be aware that labels will overlap."
This means that the label on x axis will overlaps, why?

4

Because there will not be enough room for all of them.

5

Step="@TimeSpan.FromDays(28)" makes the X-axis independent with the page zoom.
How can I get enough space between them?

6

Thank you to . I suggest the code below to solve my issue.
It may be useful for others who have the same question.

public IActionResult RevenueByMonth()
        {
            var result = context.Developers
                                 .Where(opportunity => opportunity.Statut == "Closed")
                                 .Where(opportunity => opportunity.DateSolde >= new DateTime( _currentYear, 1, 1)
                                     && opportunity.DateSolde <= new DateTime( _currentYear, 12, 31))
                                .GroupBy(opportunity => opportunity.DateSolde.Month)
                                .OrderBy(opportunity => opportunity.Key)
                                .Select(group => new
                                 {
                                     Month = GetMonthAsText(group.Key, _currentYear),
                                     Revenue = group.Count(),
                                 })
                                 .ToList();
            return Ok(JsonSerializer.Serialize(result, new JsonSerializerOptions
            {
                PropertyNamingPolicy = null
            }));
        }

  private static string GetMonthAsText(int month, int year)
        {
            return month switch
            {
                1 => $"January {year}",
                2 => $"February {year}",
                3 => $"March {year}",
                4 => $"April {year}",
                5 => $"May {year}",
                6 => $"June {year}",
                7 => $"July {year}",
                8 => $"August {year}",
                9 => $"September {year}",
                10 => $"October {year}",
                11 => $"November {year}",
                12 => $"December {year}",
                _ => throw new NotImplementedException(),
            };
        }

The above code refers to : link