Blazor Charts

<BarChart @ref="barChart" Class="mb-4" />
<LineChart @ref="lineChart" />

@code {
    private BarChart barChart = default!;
    private LineChart lineChart = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await RenderManhattanAsync();
            await RenderWormAsync();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task RenderManhattanAsync()
    {
        var data = new ChartData
            {
                Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
                Datasets = new List<IChartDataset>()
                {
                    new BarChartDataset()
                    {
                        Label = "India",
                        Data = new List<double>{ 9, 11, 9, 4, 17, 16, 9, 11, 5, 14, 15, 6, 15, 9, 6, 8, 13, 3, 4, 11 },
                        BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
                        CategoryPercentage = 0.8,
                        BarPercentage = 1,
                    },
                    new BarChartDataset()
                    {
                        Label = "England",
                        Data = new List<double>{ 1, 0, 7, 11, 5, 2, 13, 8, 9, 10, 7, 13, 7, 5, 9, 5, 10, 5, 11, 2 },
                        BackgroundColor = new List<string> { "rgb(255, 166, 0)" },
                        CategoryPercentage = 0.8,
                        BarPercentage = 1,
                    }
                }
            };

        var options = new BarChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "MANHATTAN";
        options.Plugins.Title.Display = true;
        options.Plugins.Title.Font!.Size = 20;

        options.Responsive = true;

        options.Scales.X!.Title!.Text = "Overs";
        options.Scales.X.Title.Display = true;

        options.Scales.Y!.Title!.Text = "Runs";
        options.Scales.Y.Title.Display = true;

        await barChart.InitializeAsync(data, options);
    }

    private async Task RenderWormAsync()
    {
        var data = new ChartData
            {
                Labels = new List<string> { "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20" },
                Datasets = new List<IChartDataset>()
                {
                    new LineChartDataset()
                    {
                        Label = "India",
                        Data = new List<double>{ 9, 20, 29, 33, 50, 66, 75, 86, 91, 105, 120, 126, 141, 150, 156, 164, 177, 180, 184, 195 },
                        BackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
                        BorderColor = new List<string>{ "rgb(88, 80, 141)" },
                        BorderWidth = new List<double>{2},
                        HoverBorderWidth = new List<double>{4},
                        PointBackgroundColor = new List<string>{ "rgb(88, 80, 141)" },
                        PointBorderColor = new List<string>{ "rgb(88, 80, 141)" },
                        PointRadius = new List<int>{0}, // hide points
                        PointHoverRadius = new List<int>{4},
                    },
                    new LineChartDataset()
                    {
                        Label = "England",
                        Data = new List<double>{ 1, 1, 8, 19, 24, 26, 39, 47, 56, 66, 75, 88, 95, 100, 109, 114, 124, 129, 140, 142 },
                        BackgroundColor = new List<string>{ "rgb(255, 166, 0)" },
                        BorderColor = new List<string>{ "rgb(255, 166, 0)" },
                        BorderWidth = new List<double>{2},
                        HoverBorderWidth = new List<double>{4},
                        PointBackgroundColor = new List<string>{ "rgb(255, 166, 0)" },
                        PointBorderColor = new List<string>{ "rgb(255, 166, 0)" },
                        PointRadius = new List<int>{0}, // hide points
                        PointHoverRadius = new List<int>{4},
                    }
                }
            };

        var options = new LineChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "WORM";
        options.Plugins.Title.Display = true;
        options.Plugins.Title.Font!.Size = 20;

        options.Responsive = true;

        options.Scales.X!.Title!.Text = "Overs";
        options.Scales.X.Title.Display = true;

        options.Scales.Y!.Title!.Text = "Runs";
        options.Scales.Y.Title.Display = true;

        await lineChart.InitializeAsync(data, options);
    }
}