Problem with ChartDataLabel causing column not to render

[Daniel]

I'm having an issue with a Column Chart

The below pictures show the Bar rendered and the second picture shows the problem, with no Column rendered (Second Column "Escritório Sorocaba")

The problem occurs when I simple put any thing on the ChartDataLabel Template

The follow Code works but doesn't show any label for the first series:

<SfChart Title="@Titulo" Height="300px">

<ChartArea><ChartAreaBorder Width="0">ChartAreaBorder>ChartArea>

<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">

<ChartAxisMajorGridLines Width="0">ChartAxisMajorGridLines>

ChartPrimaryXAxis>

<ChartPrimaryYAxis Maximum="@Maximum">

<ChartAxisLineStyle Width="0">ChartAxisLineStyle>

ChartPrimaryYAxis>

<ChartSeriesCollection>

<ChartSeries DataSource="@ChartDataSala" XName="@XName" YName="@YName" Name="@(Language.SalaReuniao)" Type="ChartSeriesType.Column" >

<ChartMarker>

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top" Name="@YName">

<Template>

@{

var data = context as ChartDataPointInfo;

}

<span class="chart-label">

span>

Template>

ChartDataLabel>

ChartMarker>

ChartSeries>

<ChartSeries DataSource="@ChartDataPosto" XName="@XName" YName="@YName" Name="@(Language.PostoTrabalho)" Type="ChartSeriesType.Column">

<ChartMarker>

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">

<Template>

<span class="chart-label">@(double.Parse(context.Y.ToString()).ToString(Format)+" "+Unidade )span>

Template>

ChartDataLabel>

ChartMarker>

ChartSeries>

ChartSeriesCollection>

<ChartTooltipSettings Enable="true">ChartTooltipSettings>

SfChart>

And this Second code cause the column not to render:

<SfChart Title="@Titulo" Height="300px">

<ChartArea><ChartAreaBorder Width="0">ChartAreaBorder>ChartArea>

<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">

<ChartAxisMajorGridLines Width="0">ChartAxisMajorGridLines>

ChartPrimaryXAxis>

<ChartPrimaryYAxis Maximum="@Maximum">

<ChartAxisLineStyle Width="0">ChartAxisLineStyle>

ChartPrimaryYAxis>

<ChartSeriesCollection>

<ChartSeries DataSource="@ChartDataSala" XName="@XName" YName="@YName" Name="@(Language.SalaReuniao)" Type="ChartSeriesType.Column" >

<ChartMarker>

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top" Name="@YName">

<Template>

@{

var data = context as ChartDataPointInfo;

}

<span class="chart-label">

Test

span>

Template>

ChartDataLabel>

ChartMarker>

ChartSeries>

<ChartSeries DataSource="@ChartDataPosto" XName="@XName" YName="@YName" Name="@(Language.PostoTrabalho)" Type="ChartSeriesType.Column">

<ChartMarker>

<ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">

<Template>

<span class="chart-label">@(double.Parse(context.Y.ToString()).ToString(Format)+" "+Unidade )span>

Template>

ChartDataLabel>

ChartMarker>

ChartSeries>

ChartSeriesCollection>

<ChartTooltipSettings Enable="true">ChartTooltipSettings>

SfChart>

As you can notice, I've only added an static text

[Durga Gopalakrishnan]

Hi Daniel, 

Greetings from Syncfusion. 

We have validated your reported scenario with attached snippet. Please check with below suggestions. 

# 1 : The follow Code works but doesn't show any label for the first series 

In this mapping name is provided for data label, but value is not specified for template. Empty span element is present inside template, so data label not rendered for first series. We request you to either specify any static text or @data.Y inside span element. We have modified the provide snippet and include in Counter.razor file. 

<ChartDataLabel Visible="true" Name="YName"> 

               <Template> 

                            @{ 

                                var data = context as ChartDataPointInfo; 

                            } 

                                <span class="chart-label"> 

                                    @data.Y 

                                </span>                             

              </Template>                         

</ChartDataLabel> 

 

# 2 : And this Second code cause the column not to render 

 

We have ensured this scenario with provided snippet. We are unable to replicate this issue from our end. The second series is rendered properly as per behavior. We have included this snippet in Index.razor file. Please check with the below screenshot and sample. 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatalabelTemplate512255424.zip 

UG : https://blazor.syncfusion.com/documentation/chart/data-label-template 

If you are still facing problem, please try to replicate an issue in above sample  

Regards, 

Durga G 

[Daniel]

The problem seems related to the DataSource, because I've simplified the DataSource Object and it's now showing the Columns

I was displaying a list of this Class:

 public class TaxaOcupacaoViewModel : SafePositionViewModel

 {

      public TaxaOcupacaoViewModel()

      {

      }

      public int IdSalaReuniao { get; set; }

      public string SalaReuniao { get; set; }

      public int IdPostoTrabalho { get; set; }

      public string PostoTrabalho { get; set; }

      public string DescricaoRecurso

      {

         get

         {

            return string.IsNullOrEmpty(SalaReuniao) ? PostoTrabalho : SalaReuniao;

         }

      }

      public int IdPlanta { get; set; }

      public string EscritorioPlanta { get; set; }

      public double HorasDisponiveis { get; set; }

      public double HorasUtilizadas { get; set; }

      public double TaxaOcupacao { get; set; }

      public string Escritorio { get; set; }

      public string TipoRecurso { get; set; }

      public double Comparativo { get; set; }

      public TaxaOcupacaoViewModel TaxaComparacao { get; set; }

}

[Durga Gopalakrishnan]

Hi Daniel, 

Thanks for an update. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards, 

Durga G