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 = new ChartFont { Size = 20 };

        options.Responsive = true;

        options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
        options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", 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 = "rgb(88, 80, 141)",
                        BorderColor = "rgb(88, 80, 141)",
                        BorderWidth = 2,
                        HoverBorderWidth = 4,
                        //PointBackgroundColor = "rgb(88, 80, 141)",
                        //PointBorderColor = "rgb(88, 80, 141)",
                        //PointRadius = 0, // hide points
                        //PointHoverRadius = 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 = "rgb(255, 166, 0)",
                        BorderColor = "rgb(255, 166, 0)",
                        BorderWidth = 2,
                        HoverBorderWidth = 4,
                        // PointBackgroundColor = "rgb(255, 166, 0)",
                        // PointBorderColor = "rgb(255, 166, 0)",
                        // PointRadius = 0, // hide points
                        // PointHoverRadius = 4,
                    }
                }
            };

        var options = new LineChartOptions();

        options.Interaction.Mode = InteractionMode.Index;

        options.Plugins.Title!.Text = "WORM";
        options.Plugins.Title.Display = true;
        options.Plugins.Title.Font = new ChartFont { Size = 20 };

        options.Responsive = true;

        options.Scales.X!.Title = new ChartAxesTitle { Text = "Overs", Display = true };
        options.Scales.Y!.Title = new ChartAxesTitle { Text = "Runs", Display = true };

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