mapo-core/MP.Stats/Components/ChartJs/Chart.razor

@inject IJSRuntime JSRuntime

<canvas id="@Id"></canvas>

@code {
    public enum ChartType
    {
        Pie,
        Bar
    }

    [Parameter]
    public string Id { get; set; } = "MyChart";

    [Parameter]
    public ChartType Type { get; set; }

    [Parameter]
    public string[]? Data { get; set; }

    [Parameter]
    public string[]? BackgroundColor { get; set; }

    [Parameter]
    public string[]? Labels { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await InitDefault();
    }

    protected async Task InitDefault()
    {
        // Here we create an anonymous type with all the options
        // that need to be sent to Chart.js
        var config = new
        {
            type = Type.ToString().ToLower(),
            options = new
            {
                responsive = true,
                scales = new
                {
                    yAxes = new
                    {
                        suggestedMin = 0
                    }
                }
            },
            data = new
            {
                datasets = new[]
                {
                    new { data = Data, backgroundColor = BackgroundColor}
                },
                labels = Labels
            }
        };
        await Task.Delay(50);
        await JSRuntime.InvokeVoidAsync("setup", Id, config);
    }

}