Blazor Line Chart Dynamic Step for X-Axis?

Radzen.Blazor Components
1

I have a three-series line chart wherein I using a slider to change the X-axis range using a int variable monthRange:

 void filterRevenueGraphic()
    {
        newMatterPatentsListFiltered = newMatterPatentsList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
        newMatterTMListFiltered = newMatterTMList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
        newMatterListFiltered= newMatterList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
    }

Here it is initialized:

image
image1000×383 26.4 KB

And if I increase the range to 36 months its fine but would be nice to change the X-axis step someone so the labels do not overlap. Is this possible?

image
image999×379 32 KB

I have tried to manually tinker with the X-axis step and it does not appear to change anything.

<RadzenCategoryAxis Padding="1" Step="36" />

or

<RadzenCategoryAxis Padding="1" Step="@TimeSpan.FromDays(90)" />
2

Hi @DeveloperOldsmar,

Setting the Step should definitely work. Can you paste a runnable code snippet that will allow us to troubleshoot?

3 
@page "/mattersglobal"

@using docket2022
@using docket2022.Data
@using System
@using System.Linq
@using System.Threading.Tasks;
@using Microsoft.AspNetCore.Components;
@using Microsoft.EntityFrameworkCore;
@inject Docket01Context dbContext
@attribute [Authorize]

<PageTitle>New Matters Opened</PageTitle>
<h1>New Matters Opened</h1>
<RadzenSlider @bind-Value=@monthRange TValue="int" Min="0" Max="240" Change=@(args => OnSlide(args, "Slider from 0 to 100")) Class="w-100" />

            @if (newMatterTMListFiltered == null || newMatterPatentsListFiltered == null)
{
    <div>Loading chart....</div>
    <div>   <RadzenProgressBar Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate" /></div>
}
else
{
    <RadzenChart>

        <RadzenLineSeries Data="@newMatterPatentsListFiltered" CategoryProperty="MonthDay" Title="New Patent Matters" Smooth="true" ValueProperty="MatterCount">
            <RadzenMarkers MarkerType="MarkerType.Square" />
        </RadzenLineSeries>
        <RadzenLineSeries Data="@newMatterTMListFiltered" CategoryProperty="MonthDay" Title="New TM Matters" Smooth="true" ValueProperty="MatterCount">
            <RadzenMarkers MarkerType="MarkerType.Square" />
        </RadzenLineSeries>
                <RadzenLineSeries Data="@newMatterListFiltered" CategoryProperty="MonthDay" Title="All Matters" Smooth="true" ValueProperty="MatterCount">
            <RadzenMarkers MarkerType="MarkerType.Square" />
        </RadzenLineSeries>

        <RadzenCategoryAxis Padding="1" Step="@TimeSpan.FromDays(90)" />
        <RadzenValueAxis >
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Matters" />
        </RadzenValueAxis>
    </RadzenChart>
    <RadzenDataGrid Data="@newMatterListFiltered" TItem="NewMattersOpenedbyMonth">
        <Columns>
            <RadzenDataGridColumn TItem="NewMattersOpenedbyMonth" FormatString="{0:d}" Property="Monthly" Title="Monthly" />
            <RadzenDataGridColumn TItem="NewMattersOpenedbyMonth" FormatString="{0:N0}" Property="MatterCount" Title="New Matters" />
        </Columns>
    </RadzenDataGrid>
}


@code {
    public double firmRevenue = 0;
    public int monthRange = 12;

    IEnumerable<NewMattersOpenedbyMonth>? newMatterList;
    IEnumerable<NewMattersOpenedbyMonth>? newMatterListFiltered;
    IEnumerable<NewMatterCountPatent>? newMatterPatentsList;
    IEnumerable<NewMatterCountPatent>? newMatterPatentsListFiltered;
    IEnumerable<NewMatterCountTm>? newMatterTMList;
    IEnumerable<NewMatterCountTm>? newMatterTMListFiltered;


    protected override async Task OnInitializedAsync()
    {
        newMatterList = await dbContext.NewMattersOpenedbyMonth.ToListAsync();
        newMatterPatentsList = await dbContext.NewMatterCountPatent.ToListAsync();
        newMatterTMList = await dbContext.NewMatterCountTm.ToListAsync();
        filterRevenueGraphic();
    }

    void OnSlide(dynamic value, string name)
    {
        var str = value is int ? string.Join(", ", value) : value;
        monthRange = Int32.Parse(str);
        filterRevenueGraphic();

    }
    void filterRevenueGraphic()
    {
        newMatterPatentsListFiltered = newMatterPatentsList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
        newMatterTMListFiltered = newMatterTMList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
        newMatterListFiltered= newMatterList.OrderByDescending(x => x.YyyyMm).Take(monthRange).Reverse().ToList();
    }
}
4

Unfortunately this snippet is not runnable as there are missing types. Can you prepare one which uses classed defined in the same @code {} block?