How to Display Tooltip Values in Annotation in Blazor Charts?

This Knowledge Base article explains how to display tooltip values in annotations in Blazor Accumulation Charts.

Displaying tooltip value in annotation

Blazor Charts provides an option to display accumulation chart tooltip values in annotations 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 code example below demonstrates how to display tooltip values in annotations.

@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

Conclusion
We hope you enjoyed learning how to display tooltip values in annotations in Blazor Accumulation Charts.
You can refer to our Blazor Charts feature tour page to learn about its other groundbreaking features, Documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Chart and other Blazor components.
If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!