<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="vendas">
                <span class="oi oi-plus" aria-hidden="true"></span> Vendas Mensais
            </NavLink>
        </li>
    </ul>
</div>

    public class Relatorio
    {
        public string Item { get; set; }
        public int Quantidade { get; set; }
    }

    public class RelatorioService
    {
        public Task<Relatorio[]> GetRelatorio()
        {
            var intervalo = new Random();
            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new Relatorio
            {
                Item = "item" + intervalo.Next(1, 100),
                Quantidade = intervalo.Next(20, 100),
            }).ToArray()); ;
        }
    }

 public void ConfigureServices(IServiceCollection services)
 {
            services.AddRazorPages();
            services.AddServerSideBlazor();
           services.AddSingleton<RelatorioService>();
 }

<h3>Gráfico de Barras</h3>
<hr />
<BECanvas Width="500" Height="500" @ref="_canvasReference"></BECanvas>
<h3>Vendas</h3>

@code {
    private Canvas2DContext _context;
    protected BECanvasComponent _canvasReference;
    Relatorio[] itens;

    //define as cores
    private static readonly string[] coresUsadasNoGrafico = new[] {
        "#3090C7","#BDEDFF","#F9B7FF","#736AFF","#78C7C7","#B048B5","#4E387E"
        ,"#7FFFD4","#3EA99F","#EBF4FA","#F9B7FF","#8BB381",
    };
    protected override async Task OnInitializedAsync()
    {
        itens = await relatorioService.GetRelatorio();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        int xEspaco = 10;
        int XvalorPosicao = xEspaco;
        int valorMaximoDados = itens.Max(row => row.Quantidade);
        int calculoLargura = (Convert.ToInt32(_canvasReference.Width) - 100) / itens.Length;
        int alturaGrafico = Convert.ToInt32(_canvasReference.Height) - 40;
        this._context = await this._canvasReference.CreateCanvas2DAsync();
        int valorCor = 0;
        // Desenha os eixos
        await this._context.BeginPathAsync();
        await this._context.MoveToAsync(xEspaco, xEspaco);
        // primeiro desenha o eixo Y
        await this._context.LineToAsync(xEspaco, alturaGrafico);
        // desenha o eixo X
        await this._context.LineToAsync(Convert.ToInt32(_canvasReference.Width) - 10, alturaGrafico);
        await this._context.StrokeAsync();

        @foreach (var itemsArry in itens)
        {
            // Desenha as linhas e texto no eixo oX
            XvalorPosicao = XvalorPosicao + calculoLargura;
            await this._context.MoveToAsync(XvalorPosicao, alturaGrafico);
            await this._context.LineToAsync(XvalorPosicao, alturaGrafico + 15);
            await this._context.StrokeAsync();
            await this._context.SetFillStyleAsync("#034560");
            await this._context.SetFontAsync("14pt Calibri");
            await this._context.StrokeTextAsync(itemsArry.Item, XvalorPosicao - 40, alturaGrafico + 24);

            // Desenha o gráfico de barras
            var barrasRaio = valorMaximoDados - itemsArry.Quantidade;

            // Desenha a altura das barras
            var barrasPreenchimentoAltura = Convert.ToInt32(barrasRaio * (Convert.ToInt32(alturaGrafico - xEspaco)));
            barrasPreenchimentoAltura = Convert.ToInt32(alturaGrafico) - barrasRaio;

            // Define o preenchimento da cor de fundo
            await this._context.SetFillStyleAsync("#000000");
            await this._context.FillRectAsync(XvalorPosicao - calculoLargura - 1, alturaGrafico - 1, calculoLargura + 3, -(barrasPreenchimentoAltura - 58));

            // barras atuais
            await this._context.SetFillStyleAsync(coresUsadasNoGrafico[valorCor]);
            await this._context.FillRectAsync(XvalorPosicao - calculoLargura, alturaGrafico, calculoLargura + 2, -(barrasPreenchimentoAltura - 60));

            // Incluir o valor em cada barra
            await this._context.SetFillStyleAsync("#000000");
            await this._context.SetFontAsync("20pt Calibri");
            await this._context.FillTextAsync(itemsArry.Quantidade.ToString(), XvalorPosicao - calculoLargura + 4, alturaGrafico / 2);
            await this._context.SetFillStyleAsync(coresUsadasNoGrafico[valorCor]);

            //finaliza o gráfico
            valorCor = valorCor + 1;
        }
    }
}