RadzenSeriesAnnotation text is displaced

Radzen.Blazor Components
1

When refresh chart data the text of RadzenSeriesAnnotation is displaced.

image
image823×526 34.2 KB

The code:

<RadzenChart @ref=chartTopVendas>
    <RadzenColumnSeries Data="@graficoTopMes" CategoryProperty="Nome" ValueProperty="Valor" Title="Vendas" LineType="LineType.Dashed">
        <RadzenSeriesDataLabels Visible="false" />
    </RadzenColumnSeries>
    <RadzenColumnOptions Radius="5" />
    <RadzenValueAxis Formatter="@FormatterEmReal">
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Vendas em R$" />
    </RadzenValueAxis>
    
    <RadzenLineSeries Data="@graficoTopMes" CategoryProperty="Nome" ValueProperty="Valor" Title="Evolução" LineType="LineType.Dashed">
        <RadzenMarkers Visible="true" MarkerType="MarkerType.Circle" />
        @for (var i = 0; i < graficoTopMes.Count(); i++)
        {
            <RadzenSeriesAnnotation TItem="DadosGrafico" Data="@graficoTopMes[i]" OffsetY="-16" Text="@(graficoTopMes[i].Anotacao1)" />
        }
    </RadzenLineSeries>

    <RadzenLegend Position="LegendPosition.Bottom" />
</RadzenChart>

async Task ObterDadosGraficos()
{
    var cnpjNormalizado = Cnpj.NormalizarCnpj();

    totalVendasMes = await dbContext.Vendas
        .Where(v => v.Cnpj == cnpjNormalizado
            && v.DataVenda.Value.Year == anoSelecionado
            && v.DataVenda.Value.Month == mesSelecionado)
        .SumAsync(v => v.ValorTotal.Value);

    var query = await dbContext.Vendas
        .Where(v => v.Cnpj == cnpjNormalizado
            && v.DataVenda.Value.Year == anoSelecionado
            && v.DataVenda.Value.Month == mesSelecionado)
        .GroupBy(v => v.Produto)
        .Select(g => new
        {
            Produto = g.Key,
            TotalVenda = g.Sum(v => v.ValorTotal),
            PercentualVenda = (g.Sum(v => v.ValorTotal) / totalVendasMes)
        })
        .OrderByDescending(g => g.TotalVenda)
        .Take(10)
        .ToListAsync();

    graficoTopMes = query.Select(q => new DadosGrafico
    {
        Nome = q.Produto!,
        Valor = q.TotalVenda.GetValueOrDefault(),
        Anotacao1 = q.PercentualVenda.GetValueOrDefault().ToString("P1", culturaPtBr)
    }).ToList();

    chartTopVendas.Reload();
}
2

Hi @georgepaoli,

We require a reproduction of this issue. You can edit any of the chart online demos to show us how to reproduce this behavior.

3

Of course, see the example code:

image
image1390×573 54.6 KB

@using System.Globalization

<RadzenCard>

    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
            <RadzenLabel Text="Mês" Component="MesGraficoMes" />
            <RadzenSelectBar Multiple="false" @bind-Value="@mesSelecionado" TValue="int" TextProperty="Text" ValueProperty="Value"
                             Data="@(new []{new { Text = "JAN", Value = 1 },new { Text = "FEV", Value = 2 },new { Text = "MAR", Value = 3 },new { Text = "ABR", Value = 4 },new { Text = "MAI", Value = 5 },new { Text = "JUN", Value = 6 },new { Text = "JUL", Value = 7 },new { Text = "AGO", Value = 8 },new { Text = "SET", Value = 9 },new { Text = "OUT", Value = 10 },new { Text = "NOV", Value = 11 },new { Text = "DEZ", Value = 12 }})"
                             Size="ButtonSize.ExtraSmall"
                             Change=@OnChangeMesSelecionado />
        </RadzenStack>
    </RadzenCard>

    <RadzenChart @ref=chartTopVendas>
        <RadzenColumnSeries Data="@graficoTopMes" CategoryProperty="Nome" ValueProperty="Valor" Title="Vendas" LineType="LineType.Dashed">
            <RadzenSeriesDataLabels Visible="false" />
        </RadzenColumnSeries>
        <RadzenColumnOptions Radius="5" />
        <RadzenValueAxis>
            <RadzenGridLines Visible="true" />
            <RadzenAxisTitle Text="Vendas em R$" />
        </RadzenValueAxis>

        <RadzenLineSeries Data="@graficoTopMes" CategoryProperty="Nome" ValueProperty="Valor" Title="Evolução" LineType="LineType.Dashed">
            <RadzenMarkers Visible="true" MarkerType="MarkerType.Circle" />
            @for (var i = 0; i < graficoTopMes.Count(); i++)
            {
                <RadzenSeriesAnnotation TItem="DadosGrafico" Data="@graficoTopMes[i]" OffsetY="-16" Text="@(graficoTopMes[i].Anotacao1)" />
            }
        </RadzenLineSeries>

        <RadzenLegend Position="LegendPosition.Bottom" />
    </RadzenChart>
</RadzenCard>

@code {
    int anoSelecionado = 2024;
    int mesSelecionado = 01;
    RadzenChart chartTopVendas;

    public class DadosGrafico
    {
        public string Nome { get; set; }
        public decimal Valor { get; set; }
        public string Anotacao1 { get; set; }
        public string MesAno { get; set; }
    }

    List<DadosGrafico> graficoTopMes = new List<DadosGrafico>();
    List<DadosGrafico> mockDadosGrafico = new List<DadosGrafico>();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        mockDadosGrafico = this.MockDados();

        await this.ObterDadosGraficos();
    }

    async Task ObterDadosGraficos()
    {
        graficoTopMes = mockDadosGrafico.Where(q => q.MesAno == $"{mesSelecionado.ToString("00")}/{anoSelecionado}").ToList();
    }

    private List<DadosGrafico> MockDados()
    {
        var produtos = new[] { "Produto A", "Produto B", "Produto C", "Produto D", "Produto E", "Produto F", "Produto G", "Produto H", "Produto I", "Produto J" };
        var mockDadosGrafico = new List<DadosGrafico>();
        var random = new Random();

        for (int mes = 1; mes <= 6; mes++)
        {
            decimal totalVendas = 0;
            var valores = new List<decimal>();

            for (int i = 0; i < produtos.Length; i++)
            {
                var valor = random.Next(1000, 10000);
                valores.Add(valor);
            }

            totalVendas = valores.Sum();

            for (int i = 0; i < produtos.Length; i++)
            {
                var valorVenda = valores[i];
                var percentual = (valorVenda / totalVendas) * 100;

                mockDadosGrafico.Add(new DadosGrafico
                    {
                        Nome = produtos[i],
                        Valor = valorVenda,
                        Anotacao1 = $"{percentual:F2}%",
                        MesAno = $"{mes:D2}/2024"
                    });
            }
        }

        return mockDadosGrafico;
    }

    void OnChangeMesSelecionado()
    {
        this.ObterDadosGraficos();
        chartTopVendas.Reload();
    }
}

the error occurs when changing the month several times. Example: select January, Feb.. August and then return to January.

thank you for your attention.

4

How do I replicate the behavior from your screenshot? Here is what I see now:

bar-chart

5

Select month with empty data, like JUL and return to JAN/FEV/MAR. See:
Animação

6

Got it. We will fix this with the next release.

1 Like