Skip to content

Commit 6b8b488

Browse files
tineshsf4652tineshsf4652
authored
Update README.md
1 parent b43c9c3 commit 6b8b488

File tree

1 file changed

+147
-11
lines changed

1 file changed

+147
-11
lines changed

‎README.md

Lines changed: 147 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,162 @@
11
# How to bind the .NET MAUI Circular Chart tooltip to the values of the others categorys
2-
This repository contains a sample project demonstrating how to bind the .NET MAUI Circular Chart tooltip to the value of the **"Others"** category using Syncfusion controls.
2+
In this article, we can learn how to show tooltips for the "Others" category in a [.NET MAUI Circular Chart](https://www.syncfusion.com/maui-controls/maui-circular-charts). We'll use a custom tooltip template to display information when hovering over chart segments.
33

4-
**Syncfusion Circular Chart Control**
54

6-
The [.NET MAUI Circular Charts](https://www.syncfusion.com/maui-controls/maui-circular-charts) provides a perfect way to visualize data with a high level of user involvement that focuses on development, productivity, and simplicity of use. Chart also provides a wide variety of charting features that can be used to visualize large quantities of data, as well as flexibility in data binding and user customization.
5+
**Step 1: Initializing the PieSeries**
76

8-
**Series Customizartion**
7+
First, we set up the PieSeries in the Circular Chart with [**GroupTo**](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) support. The [**GroupTo**](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) property helps group smaller segments into a single "Others" category.
98

10-
The [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html) provides support to define own brushes for series with preferred order by using the [PaletteBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes) property.
9+
**XAML**
1110

12-
The [SfCircularChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCircularChart.html) provides support to customize the appearance of the datalabel using the [LabelTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_LabelTemplate) property
11+
```xaml
12+
<chart:SfCircularChart>
13+
....
14+
<chart:SfCircularChart.Series>
15+
<chart:PieSeries GroupTo="10"
16+
ItemsSource="{Binding GroupToData}"
17+
XBindingPath="Name" YBindingPath="Value">
18+
</chart:PieSeries>
19+
</chart:SfCircularChart.Series>
20+
</chart:SfCircularChart>
21+
```
1322

14-
**Tooltip Template to the Chart**
1523

16-
Incorporate the custom tooltip template into the circular chart by assigning the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html?tabs=tabid-9%2Ctabid-11%2Ctabid-5%2Ctabid-7%2Ctabid-18%2Ctabid-1%2Ctabid-22%2Ctabid-24%2Ctabid-16%2Ctabid-20%2Ctabid-14%2Ctabid-13%2Ctabid-3#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate) property of the chart series.
24+
**Step 2: Explaining the Default Tooltip with "Others"**
1725

18-
**Output**
26+
We have data segments that fall below a certain threshold, they are grouped together into the **"Others"** category. The default tooltip view for this "Others" category provides users with a summarized insight into these grouped segments.
27+
28+
When data segments are too small (fall below the [**GroupTo**](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html#Syncfusion_Maui_Toolkit_Charts_PieSeries_GroupTo) value), they are grouped into an "Others" category. The default tooltip for this "Others" category gives a summary of these grouped segments.
29+
30+
![image.png](https://support.syncfusion.com/kb/agent/attachment/article/15959/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjIyNzM2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.wkC97m7xyxshcGoROR9U34Z8Z1hS0n5w6MTXKee64lo)
31+
32+
33+
**Step 3: Define the Custom Tooltip Template**
34+
35+
Next, we create a custom tooltip template called **"tooltipTemplate"**. This template uses a vertical stack layout to display data dynamically.
36+
37+
38+
**XAML**
39+
40+
```XAML
41+
<ContentPage.Resources>
42+
<ResourceDictionary>
43+
<!-- Define converters -->
44+
<local:ItemsSourceConverter x:Key="valueConvert"/>
45+
<local:StringFormatConverter x:Key="StingConvert"/>
46+
47+
<!-- Define tooltip template -->
48+
<DataTemplate x:Key="tooltipTemplate">
49+
<VerticalStackLayout BindableLayout.ItemsSource="{Binding Item, Converter={StaticResource valueConvert}}">
50+
<BindableLayout.ItemTemplate>
51+
<DataTemplate>
52+
<Grid ColumnDefinitions="*,Auto">
53+
<Label Text="{Binding Name}" Grid.Column="0"/>
54+
<Label Text="{Binding Converter={StaticResource StingConvert}, ConverterParameter={x:Reference pieSeries1}}" Grid.Column="2" />
55+
</Grid>
56+
</DataTemplate>
57+
</BindableLayout.ItemTemplate>
58+
</VerticalStackLayout>
59+
</DataTemplate>
60+
</ResourceDictionary>
61+
</ContentPage.Resources>
62+
63+
```
64+
65+
66+
67+
**Step 4: Implement Converters**
68+
69+
We need two converters in C# for handling data and formatting the tooltip text.
70+
71+
The **ItemsSourceConverter** is designed to manipulate the data source bound to the chart's tooltip. Its primary goal is to handle the grouping of smaller data segments into the "Others" category and prepare the data for display in the tooltip.
1972

20-
![Presentation](https://github.com/SyncfusionExamples/How-to-bind-the-.NET-MAUI-Circular-Chart-tooltip-to-the-values-of-the-others-category/assets/113962276/40c8b5c5-a6c3-43ab-b0db-58d7e33e34ea)
73+
The **StringFormatConverter** is aimed at formatting the tooltip text based on the selected group mode of the pie series in the chart. It ensures that the tooltip displays data values in a user-friendly and understandable format.
2174

75+
**C#**
76+
77+
```C#
78+
public class ItemsSourceConverter : IValueConverter
79+
{
80+
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
81+
{
82+
if (value != null)
83+
{
84+
var data = value as List<object>;
85+
if (data != null && data.Count > 5)
86+
{
87+
var data_list = data.Where(x => data.IndexOf(x) < 6).ToList();
88+
89+
string name = "Others";
90+
double yvalue = data.Where(x => data.IndexOf(x) >= 6).Sum(x => (x is ChartDataModel model) ? model.Value : 0);
91+
double size = data.Where(x => data.IndexOf(x) >= 6).Sum(x => (x is ChartDataModel model) ? model.Size : 0);
92+
data_list.Add(new ChartDataModel(name, yvalue, size));
93+
94+
return data_list;
95+
}
96+
else if (data != null)
97+
return data;
98+
else
99+
{
100+
return new List<object>() { value };
101+
}
102+
}
103+
104+
return new List<object>();
105+
}
106+
107+
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
108+
{
109+
return value;
110+
}
111+
}
112+
113+
public class StringFormatConverter : IValueConverter
114+
{
115+
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
116+
{
117+
if (value != null && value is ChartDataModel model)
118+
{
119+
if (parameter is PieSeries series)
120+
{
121+
switch (series.GroupMode)
122+
{
123+
case PieGroupMode.Percentage:
124+
return string.Format("{0:P0}", model.Size);
125+
default:
126+
return string.Format("${0:F2} T", model.Value);
127+
}
128+
}
129+
}
130+
131+
return "";
132+
}
133+
134+
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
135+
{
136+
return value;
137+
}
138+
}
139+
```
140+
141+
142+
**Step 5: Integrate Custom Tooltip with the Chart**
143+
144+
Finally, we add the custom tooltip template to the Circular Chart by setting the [**TooltipTemplate**](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.ChartSeries.html#Syncfusion_Maui_Toolkit_Charts_ChartSeries_TooltipTemplate) property of the [**PieSeries**](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.PieSeries.html).
145+
146+
**XAML**
147+
```XAML
148+
<!-- XAML Circular Chart -->
149+
<chart:PieSeries ShowDataLabels="True" TooltipTemplate="{StaticResource tooltipTemplate}"
150+
GroupTo="10"
151+
PaletteBrushes="{Binding CustomBrushes}"
152+
ItemsSource="{Binding GroupToData}" XBindingPath="Name" YBindingPath="Value">
153+
</chart:PieSeries>
154+
155+
```
156+
157+
**Output**
22158

23-
For a step-by-step procedure, refer to the Knowledge base: [How to bind the .NET MAUI Circular Chart tooltip to the values of the "Others" category(SfCircularChart)?]()
159+
![Presentation](https://github.com/user-attachments/assets/b75cd396-cde2-499a-898d-d6e3fe0b8839)
24160

25161
### Troubleshooting
26162
**Path too long exception**

0 commit comments

Comments
 (0)