moadiran/TaxPayerFull/Layout/SaleChart.razor

@using Shared.DTOs
<LineChart  @ref="lineChart"  />

@code {
    private LineChart lineChart = default!;
    private LineChartOptions lineChartOptions = default!;
    private ChartData chartData = default!;
    public List<IdNameByCount<int>> items = new List<IdNameByCount<int>>();
    protected override void OnInitialized()
    {
        items.AddRange(new List<IdNameByCount<int>>()
        {
            new IdNameByCount<int>{ID=0,Title="1",count=10},
               new IdNameByCount<int>{ID=1,Title="2",count=5},
                 new IdNameByCount<int>{ID=2,Title="3",count=12},
                   new IdNameByCount<int>{ID=3,Title="4",count=21}
        });

        var colors = ColorBuilder.CategoricalTwelveColors;

        var labels = items.OrderBy(o => o.ID).Select(s => s.Title).ToList();
        var datasets = new List<IChartDataset>();

        var dataset1 = new LineChartDataset
            {
                
                Label = "فروش",
                Data = items.OrderBy(o => o.ID).Select(s => decimal.ToDouble(s.count.Value)).ToList(),
                BackgroundColor = new List<string> { colors[0] },
                BorderColor = new List<string> { colors[0] },
                BorderWidth = new List<double> { 2 },
                HoverBorderWidth = new List<double> { 4 },
                PointBackgroundColor = new List<string> { colors[0] },
                PointRadius = new List<int> { 0 }, // hide points
                PointHoverRadius = new List<int> { 4 }
            };
        datasets.Add(dataset1);

      
        chartData = new ChartData { Labels = labels, Datasets = datasets };

        lineChartOptions = new();
        lineChartOptions.Responsive = true;
        lineChartOptions.Interaction = new Interaction { Mode = InteractionMode.Index };

        lineChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "روز", Display = true };
        lineChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "میران", Display = true };

        lineChartOptions.Plugins.Title!.Text = "گزارش (ماه جاری)";
        lineChartOptions.Plugins.Title.Display = true;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await lineChart.InitializeAsync(chartData, lineChartOptions);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

}