HTML Template for chart tooltip not allways working

[Christian]

Hello,
I've developped  a razor page including a sfgrid and a sfchart.
For the sfchart, I've created an HTML template.
When I load the page for the first time, the tooltip is fine but when I refresh the page the tooltip become the standard one.
Here is the code used in main page to call the chart:

            <ConsoMonthsChart ConsoChartData="@consoChartData" ChartHeight="@ChartHeight" />

Here is the chart page:

@using BlazingConso.Entities
@using Syncfusion.Blazor.Charts
@using System.Globalization

<SfChart Palettes="@ChartPalette" Width="100%" Height="@ChartHeight">

    <ChartPrimaryXAxis Title="Période"
                       ValueType="Syncfusion.Blazor.Charts.ValueType.Category"
                       LabelRotation="45"
                       Interval="1" />

    <ChartPrimaryYAxis Title="Consommation (kWh)"
                       LabelFormat="{value} kWh" />

    <ChartSeriesCollection>
        <ChartSeries DataSource="@consoChartData" XName="Periode" YName="ConsoHP"
                     Type="ChartSeriesType.StackingColumn" Name="Heures Pleines"
                     ColumnWidth="0.9" ColumnSpacing="0.1"
                     Fill="#4a86ff">
        </ChartSeries>
        <ChartSeries DataSource="@consoChartData" XName="Periode" YName="ConsoHC"
                     Type="ChartSeriesType.StackingColumn" Name="Heures Creuses"
                     CornerRadius="@(new ChartCornerRadius { TopLeft = 4, TopRight = 4 })"
                     ColumnWidth="0.9" ColumnSpacing="0.1"
                     Fill="#ffb545">
        </ChartSeries>
    </ChartSeriesCollection>

    <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>

    <ChartTooltipSettings Enable="true" EnableHighlight="true">
        <Template>
            @{
                var data = context as ChartTooltipInfo;
                var total = data.StackedTotalValue.ToString("F2");
                var backgroundColor = data.SeriesName == "Heures Pleines" ? "#d0f0fd" : "#fdebd0"; // Couleur de fond selon la série
                <div class="container" style="background-color:@backgroundColor;">
                    <div class="box">
                        <p><strong>Consommation totale :</strong></p>
                        <p><strong>@total kWh</strong></p>
                        <hr>
                        <p><strong>@data.SeriesName</strong></p>
                        <p><strong>@data.X : @data.Y</strong></p>
                    </div>
                </div>
            }
        </Template>
    </ChartTooltipSettings>

</SfChart>

@code {
    [Parameter] public IEnumerable<HistoMonthData> consoChartData { get; set; }
    [Parameter] public string ChartHeight { get; set; }
    private static String[] ChartPalette = new String[] { "#4a86ff", "#ffb545", "#E94649", "#6FAAB0" };
}


<style>
    .container {
        font-family: 'Arial', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        padding: 5px 10px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        max-width: 300px;
    }

    p {
        padding-top: 4px;
        margin: 0px;
    }

    hr {
        border: none;
        height: 1px;
        background-color: #AAAAAA;
        margin: 4px 0;
    }
</style>

Thanks for your help
Best regards

Attachment: first_time_57d841c8.jpg

[Durga Gopalakrishnan]

Hi Christian,

Greetings from Syncfusion.

We have validated the scenario you reported by creating a sample using the snippet you provided. The chart tooltip template renders correctly both during the initial load and after refreshing the page. For your reference, we’ve attached the tested sample along with a screenshot.  

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

We kindly request you to share a video illustrating the reported issue. Additionally, please review the attached sample and let us know if any modifications are needed. This will help us better understand the scenario and provide a more effective resolution.

Please feel free to get back to us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Christian]

Hello Durga,

I can share with you my github and give you access to my application.
Can we do this by private mail ?
In this mail I can explain you the use case where I meet this problem.

Thanks in advance.
Regards

[Durga Gopalakrishnan]

Christian,

We've created a support ticket under your account. Please follow the ticket for further updates and communication.

[Steve DeLollis]

I have also experienced this behavior on a regular basis. 

I have a template that sometimes takes effect while other times the default template displays, and occasionally no template displays. I can't figure out a pattern.

FYI, the template code is below, nothing special.

  <ChartTooltipSettings  Enable="true" ShowNearestTooltip="true" ShowHeaderLine="false">
      <Template>
          @{
              var data = context as ChartTooltipInfo;
              string? formattedValue = data is not null ? (data.Y).ToString(): "";
              if (! string.IsNullOrEmpty(formattedValue))
              {
                  formattedValue = formattedValue.Replace(" %", "");
                  if (double.TryParse(formattedValue, out double parsedValue))
                  {
                      formattedValue = $"{string.Format("{0:0.0}", parsedValue)} %";
                  }
              }
              <div>
                  <span style="font-size: 1.5rem; font-family: Calibri;">@formattedValue</span>
              </div>
          }
      </Template>
  </ChartTooltipSettings>

[Durga Gopalakrishnan]

Hi Steve,

We have ensured your reported problem with your attached code snippet for chart tooltip template. Tooltip template is displayed properly in WASM, Server and WebApp. We have attached the tested sample for your reference.

tom

Sample : https://blazorplayground.syncfusion.com/VZryZeMxILPXUkRS

We kindly request you to share the following information which will be helpful for further analysis and provide you the solution sooner.

• Please share your complete code snippet.
• Share the issue replication video or image.
• Share if you have any other customization related to tooltip.
• Share your default system configuration.
• Syncfusion NuGet package version, script reference.

Please let us know if you have any concerns.