This article explains how to change GroupTo default tooltip using TooltipRender event in Blazor Charts. Change GroupTo Default Tooltip Using TooltipRender Event Blazor Charts provides an option to change GroupTo default tooltip using TooltipRender event. To modify the GroupTo default tooltip, you need to utilize the TooltipRender event to change the Text argument to customize the GroupTo tooltip text of the accumulation chart. The below code example demonstrates how to change default GroupTo tooltip using TooltipRender event. Index.razor In this code snippet, the TooltipRenderEvent is used to customize the tooltip text for the accumulation chart. By handling the TooltipRender event, the default tooltip text is modified to display a custom message. The Text argument is altered to format the tooltip as "Other Browsers : " followed by the value. @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts <SfAccumulationChart> <AccumulationChartEvents TooltipRender="TooltipRenderEvent"></AccumulationChartEvents> <AccumulationChartSeriesCollection> <AccumulationChartSeries GroupMode="GroupMode.Value" GroupTo="5" Explode="true" DataSource="@DoughnutChartPoints1" XName="Browser" YName="Users" InnerRadius="40%" Radius="50%" /> </AccumulationChartSeriesCollection> <AccumulationChartTooltipSettings Enable="true" Header=""></AccumulationChartTooltipSettings> </SfAccumulationChart> @code { public List<DoughnutData> DoughnutChartPoints1 { get; set; } = new List<DoughnutData> { new DoughnutData { Browser = "Chrome", Users = 59 }, new DoughnutData { Browser = "UC Browser", Users = 4 }, new DoughnutData { Browser = "Internet Explorer", Users = 6}, new DoughnutData { Browser = "Sogou Explorer", Users = 1}, new DoughnutData { Browser = "QQ", Users = 3}, new DoughnutData { Browser = "Safari", Users = 5}, new DoughnutData { Browser = "Opera", Users = 2}, new DoughnutData { Browser = "Edge", Users = 7}, new DoughnutData { Browser = "Others", Users = 9}, }; public class DoughnutData { public string? Browser { get; set; } public long Users { get; set; } } public void TooltipRenderEvent(Syncfusion.Blazor.Charts.TooltipRenderEventArgs args) { var text = args.Text.Split(":"); args.Text = "Other Browsers : " + text[1]; } } The following screenshot illustrates the output of the code snippet. Live Sample for Changing Grouped Tooltip Text Conclusion I hope you enjoyed learning how to change groupto default tooltip using TooltipRender event in Blazor Charts. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to retrieve series color using TooltipRender event in Blazor Charts. Retrieve Series Color Using TooltipRender Event Blazor Charts provides an option to retrieve series color using TooltipRender event. This can be achieved by utilizing the TooltipRender event to get the arguments of Series Fill to retrieve the series color for each series. The below code example demonstrates how to retrieve series color using TooltipRender event. Index.razor @using Syncfusion.Blazor.Charts <SfChart> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> <ChartEvents TooltipRender="TooltipEvent"></ChartEvents> <ChartSeriesCollection> <ChartSeries DataSource="@MedalDetails" Name="Series1" Fill="#F14FF5" XName="X" YName="YValue" Type="ChartSeriesType.StackingColumn" /> <ChartSeries DataSource="@MedalDetails" Name="Series2" Fill="#f583f8" XName="X" YName="YValue2" Type="ChartSeriesType.StackingColumn" /> <ChartSeries DataSource="@MedalDetails" Name="Series3" Fill="#a52a2a" XName="X" YName="YValue3" Type="ChartSeriesType.StackingColumn" /> <ChartSeries DataSource="@MedalDetails" Name="Series4" Fill="#FFFF00" XName="X" YName="YValue4" Type="ChartSeriesType.StackingColumn" /> <ChartSeries DataSource="@MedalDetails" Name="Series5" Fill="#008000" XName="X" YName="YValue5" Type="ChartSeriesType.StackingColumn" /> </ChartSeriesCollection> <ChartTooltipSettings Enable="true"></ChartTooltipSettings> </SfChart> <div> <p>Series color is: @color</p> </div> @code { public string color { get; set; } public void TooltipEvent(TooltipRenderEventArgs args) { color = ((ChartSeries)args.Series).Fill; StateHasChanged(); } public class ChartData { public string? X { get; set; } public double YValue { get; set; } public double YValue2 { get; set; } public double YValue3 { get; set; } public double YValue4 { get; set; } public double YValue5 { get; set; } } public List<ChartData> MedalDetails { get; set; } = new List<ChartData> { new ChartData { X = "USA", YValue = 50, YValue2 = 40, YValue4 = 48, YValue5 = 43 }, new ChartData { X = "China", YValue = 40, YValue2 = 45, YValue3 = 55,YValue5 = 53 }, new ChartData { X = "Japan", YValue = 70, YValue2 = 65, YValue3 = 68, YValue4 = 58,YValue5 = 62 }, new ChartData { X = "Australia", YValue = 60, YValue2 = 55, YValue4 = 43,YValue5 = 45 }, new ChartData { X = "France", YValue = 50, YValue2 = 42, YValue4 = 38,YValue5 = 41 }, new ChartData { X = "Germany", YValue = 78, YValue2 = 75, YValue3 = 70, YValue4 = 67,YValue5 = 72 }, new ChartData { X = "Italy", YValue = 75, YValue3 = 67, YValue4 = 61, YValue5 = 65 }, new ChartData { X = "Sweden", YValue = 60, YValue2 = 55, YValue4 = 50,YValue5 = 54 }, new ChartData { X = "Korea", YValue = 40, YValue2 = 42, YValue3 = 47, YValue4 = 44,YValue5 = 43 }, new ChartData { X = "Hungary", YValue = 35, YValue3 = 42,YValue5 = 53 }, }; } The following screenshot illustrates the output of the code snippet. Live Sample for Retrieving Series Color Using the TooltipRender Event Conclusion I hope you enjoyed learning how to retrieve series color using TooltipRender event in Blazor Charts. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to display total stacked column value in tooltip in Blazor Charts. Display Total Stacked Column Value in Tooltip Blazor Charts provides an option to display total stacked column value in tooltip. This can be achieved by using the TooltipRender event to get the argument of StackedTotalValue to display the total stacked column value in the tooltip. The below code example demonstrates how to display the total stacked column value in the tooltip Index.razor @using Syncfusion.Blazor.Charts <SfChart> <ChartEvents TooltipRender="TooltipEvent" /> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" /> <ChartSeriesCollection> <ChartSeries DataSource="@MedalDetails" XName="DepartmentName" YName="YValue" Type="ChartSeriesType.StackingColumn" /> <ChartSeries DataSource="@MedalDetails" XName="DepartmentName" YName="YValue1" Type="ChartSeriesType.StackingColumn" /> </ChartSeriesCollection> <ChartTooltipSettings Enable="true" /> </SfChart> @code { public class ChartData { public string DepartmentName { get; set; } public double YValue { get; set; } public double YValue1 { get; set; } } public List<ChartData> MedalDetails = new List<ChartData> { new ChartData { DepartmentName= "BAR", YValue= 95, YValue1 =100 }, new ChartData { DepartmentName= "DINING", YValue= 200, YValue1=900 }, }; public void TooltipEvent(TooltipRenderEventArgs args) { //We provided the total value of the Y-axis values as arguments in the TooltipRender Event to display the total value in the tooltip. args.Text = "Total: " + args.Data.StackedTotalValue.ToString(); } } The following screenshot illustrates the output of the code snippet. Live sample for display the total stacked column value in the tooltip Conclusion I hope you enjoyed learning how to display total stacked column value in tooltip in Blazor Charts. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to format the y-value of a pie chart tooltip using an event. Formatting Tooltip Y Value Blazor Charts provides an option to format the pie chart tooltip y value using TooltipRender event. This can be achieved by converting the data point y value from TooltipRender event arguments using N3 and assigning the formatted text to Text argument. The code example below demonstrates how to format a tooltip double value. Index.razor @using Syncfusion.Blazor.Charts @using System.Globalization; <div class="control-section"> <SfAccumulationChart EnableSmartLabels="false" EnableBorderOnMouseMove="false" ID="drilldown" > <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings> <AccumulationChartEvents TooltipRender="TooltipRenderEvent"></AccumulationChartEvents> <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings> <AccumulationChartSeriesCollection> <AccumulationChartSeries DataSource="@StatisticsDetails" XName="XValue" YName="YValue" Name="Browser" Radius="@Radius" StartAngle="0" EndAngle="360" InnerRadius="@InnerRadius"> <AccumulationDataLabelSettings Visible="false"> </AccumulationDataLabelSettings> </AccumulationChartSeries> </AccumulationChartSeriesCollection> </SfAccumulationChart> </div> @code{ public string FontColor = "black"; public AccumulationLabelPosition LabelPosition { get; set; } = AccumulationLabelPosition.Inside; public bool Rotation { get; set; } = false; public string Radius = "100%"; public string InnerRadius = "0%"; public void TooltipRenderEvent(Syncfusion.Blazor.Charts.TooltipRenderEventArgs args) { args.Text = args.Data.PointX + " " + Convert.ToDouble(args.Data.PointY).ToString("N3", CultureInfo.InvariantCulture); } public class Statistics { public string XValue { get; set; } public double YValue { get; set; } } public List<Statistics> StatisticsDetails = new List<Statistics> { new Statistics { XValue = "Chrome", YValue = 374.235423423123 }, new Statistics { XValue = "Firefox", YValue = 273.523423432321 }, new Statistics { XValue = "Opera", YValue = 294.234423421231 }, new Statistics { XValue = "Edge", YValue = 434.233423422312 }, }; } The following screenshot illustrates the output of the code snippet. Output Live Sample for Tooltip Format Conclusion I hope you enjoyed learning how to format the pie chart tooltip y value in Blazor Chart. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
This article explains how to add a list of names to tooltip text using an event. Adding list of names to tooltip text Blazor Charts provides an option to add list of names to the histogram chart series tooltip text using TooltipRender event. This can be achieved by iterating through list of names using foreach loop and appending each name along with br tag to TooltipRender event Text argument. The below code example demonstrates how to add list of names to tooltip text. Index.razor @using Syncfusion.Blazor.Charts <SfChart Title="Score of Final Examination"> <ChartEvents TooltipRender="TooltipEvent"></ChartEvents> <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea> <ChartPrimaryXAxis Minimum="0" Maximum="100"> <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines> </ChartPrimaryXAxis> <ChartPrimaryYAxis Minimum="0" Maximum="6" Interval="2" Title="Number of Students"> <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines> </ChartPrimaryYAxis> <ChartSeriesCollection> <ChartSeries DataSource="@ExamScores" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Histogram" BinInterval="20" ShowNormalDistribution="true" ColumnWidth="0.99"> <ChartMarker Visible="true" Height="10" Width="10"> <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top"> <ChartDataLabelFont Color="#ffffff" FontWeight="600"></ChartDataLabelFont> </ChartDataLabel> </ChartMarker> </ChartSeries> </ChartSeriesCollection> <ChartTooltipSettings Enable="true"> </ChartTooltipSettings> </SfChart> @code{ public class Data { public double Y { get; set;} public string[] ListOfNames = { "Nelson", "Amir", "Brenda", "Bernard", "Dennis", "Ruben", "Jason", "Lucas", "Caroline", "Denise", "Alexandra" }; } public List<Data> ExamScores = new List<Data> { new Data { Y=5.250}, new Data { Y=7.750}, new Data { Y=8.275}, new Data { Y=9.750}, new Data { Y=36.250}, new Data { Y=46.250}, new Data { Y=56.250}, new Data { Y=66.500}, new Data { Y=76.625}, new Data { Y=80.000}, new Data { Y=97.75} }; public void TooltipEvent(Syncfusion.Blazor.Charts.TooltipRenderEventArgs args) { args.Text += "<br>"; foreach(var name in ExamScores[0].ListOfNames) { args.Text += name + "<br>"; } args.Text += "<br> Count: " + ExamScores[0].ListOfNames.Count(); } } The following screenshot illustrates the output of the code snippet. Output Live Sample for Adding List of Names to Tooltip Conclusion I hope you enjoyed learning how to add list of name to tooltip text in Blazor Chart Component. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
The tooltip in the Angular Maps are rendered based on the data, either from the data source or shape data. If the tooltip is rendered based on the data from the data source, there may be any data that has null values. In this section, we will show you how to customize the tooltip text for the null values from the data source in Angular Maps. The tooltipRender event in Maps, which is triggered when the tooltip is rendered, allows us to customize the tooltip text for the null values from the data source. This can be achieved by using the content property in its event argument. When the tooltipRender event is triggered, you can determine whether the data bound to the shapes (as represented by args.options.data.continent) is empty. If it is empty, the tooltip content is updated by adding “NA” to the content property in the event argument. In the following example, where the continent data is missing or null, the tooltip is customized. The below code example demonstrates how to customize the tooltip text for the null values from the data source in Angular Maps: app.component.html <div class="control-section"> <div align="center"> <ejs-maps id="container" style="display:block;" [zoomSettings]="zoomSettings" [layers]="layers" [legendSettings]="legendSettings" [titleSettings]="titleSettings" (load)="load($event)" (tooltipRender)="tooltipRender($event)" > </ejs-maps> </div> </div> app.component.ts import { Component, ViewEncapsulation, Inject } from '@angular/core'; import { Maps, Legend, Marker, MapsTooltip, ILoadEventArgs, } from '@syncfusion/ej2-angular-maps'; import worldMap from './world-map.json'; import datasource from './default-datasource.json'; Maps.Inject(Legend, Marker, MapsTooltip); declare var require: any; @Component({ selector: 'app-root', templateUrl: 'app.component.html', encapsulation: ViewEncapsulation.None, }) export class AppComponent { titleSettings: object = { text: 'YouTube office locations', textStyle: { size: '16px', }, }; public zoomSettings: object = { enable: false, }; public legendSettings: object = { visible: true }; public layers: object[] = [ { shapeData: worldMap, shapePropertyPath: 'continent', shapeDataPath: 'continent', dataSource: datasource, shapeSettings: { colorValuePath: 'color' }, tooltipSettings: { visible: true, valuePath: 'continent', format: 'Name : ${continent} <br/> Sales : ${Sales}', fill: '#D0D0D0', textStyle: { color: 'green', fontFamily: 'Times New Roman', fontStyle: 'Sans-serif', }, }, }, ]; public load = (args: ILoadEventArgs) => {}; public tooltipRender = (args) => { if (args.options.data.continent == '') { args.content = args.content.split(':')[0] + ' : NA' + args.content.split(':')[1] + ':' + args.content.split(':')[2]; } }; constructor() {} } The following screenshot illustrates the output of the above code snippet. View StackBlitz Sample Conclusion I hope you enjoyed learning how to customize the tooltip text for the null values from the data source in the Angular Maps component. You can refer to our Angular Maps feature tour to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Maps example to understand how to create and visualize the data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
