How to display tooltip values in annotation in Blazor Accumulation Charts?

This article explains how to display tooltip values in annotation.

Displaying tooltip value in annotation

Blazor Charts provides an option to display the accumulation chart tooltip values in annotation using tooltip ID.

This can be achieved by assigning the accumulation chart series tooltip ID to the HTML element used as an annotation. The tooltip ID consists of the chart ID container followed by _tooltip, which should be specified as container_tooltip.

The below code example demonstrates how to display tooltip values in annotation.

@using Syncfusion.Blazor.Charts

<SfAccumulationChart ID="container" EnableBorderOnMouseMove="false" Title="Mobile Browsers Statistics">
       <AccumulationChartTooltipSettings Header="" Format="<b>${point.x}</b>: <b>${point.y}%</b>" Enable="true"></AccumulationChartTooltipSettings>
       <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
       <AccumulationChartSeriesCollection>
           <AccumulationChartSeries DataSource="@DoughnutChartPoints" XName="Browser" YName="Users" Radius="70%" InnerRadius="50%" Name="Project">
               <AccumulationDataLabelSettings Visible="true">
               </AccumulationDataLabelSettings>
           </AccumulationChartSeries>
       </AccumulationChartSeriesCollection>
       <AccumulationChartAnnotations>
       <AccumulationChartAnnotation X="50%" Y="50%" CoordinateUnits="@Syncfusion.Blazor.Charts.Units.Pixel" Region="@Syncfusion.Blazor.Charts.Regions.Chart">
           <ContentTemplate>
               <div id="container_tooltip"></div>
           </ContentTemplate>
       </AccumulationChartAnnotation>
   </AccumulationChartAnnotations>
</SfAccumulationChart>
@code{
  public List<DoughnutData> DoughnutChartPoints { get; set; } = new List<DoughnutData>
   {
       new DoughnutData { Browser = "Chrome", Users = 59.28 },
       new DoughnutData { Browser = "UC Browser", Users = 4.37 },
       new DoughnutData { Browser = "Opera", Users = 2.12 },
       new DoughnutData { Browser = "QQ", Users = 3.96 },
       new DoughnutData { Browser = "Safari", Users = 5.73 },
       new DoughnutData { Browser = "Edge", Users = 7.48 },
       new DoughnutData { Browser = "Others", Users = 9.21 },
   };
  public class DoughnutData
   {
       public string Browser { get; set; }
       public double Users { get; set; }
   }
} 

Output

The following screenshot illustrates the output of the code snippet.

Live Sample for Displaying Tooltip in Annotation