Update the image in readme file

Vallarasu4653 · Vallarasu4653 · commit 6e4f0126bf27 · 2025-01-21T16:52:37.000+05:30
diff --git a/LegendSample/LegendSample/View/LegendMaximumSizeSample.xaml b/LegendSample/LegendSample/View/LegendMaximumSizeSample.xaml
@@ -21,10 +21,11 @@
             </chart:SfCircularChart.Title>
 
             <chart:SfCircularChart.Legend>
-                <local:LegendExt/>
+                <local:LegendExt>
+                </local:LegendExt>
             </chart:SfCircularChart.Legend>
 
-            <chart:PieSeries ItemsSource="{Binding DataCollection}"
+            <chart:PieSeries ItemsSource="{Binding Data}"
                              XBindingPath="Country"
                              YBindingPath="Value"
                              PaletteBrushes="{Binding CustomBrushes}">
diff --git a/LegendSample/LegendSample/ViewModel/ViewModel.cs b/LegendSample/LegendSample/ViewModel/ViewModel.cs
@@ -15,6 +15,8 @@ namespace LegendSample.ViewModel
     public class ViewModel
     {
         public ObservableCollection<DataModel> DataCollection { get; set; }
+        public ObservableCollection<DataModel> Data { get; set; }
+
         public List<Brush> CustomBrushes { get; set; }
         public ViewModel()
         {
@@ -35,6 +37,27 @@ public ViewModel()
             CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#C71969")));
             CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#8AC114")));
             CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#8419C7")));
+            CustomBrushes.Add(new SolidColorBrush(Colors.Green));
+            CustomBrushes.Add(new SolidColorBrush(Colors.Brown));
+            CustomBrushes.Add(new SolidColorBrush(Colors.DeepPink));
+            CustomBrushes.Add(new SolidColorBrush(Colors.DarkBlue));
+            CustomBrushes.Add(new SolidColorBrush(Colors.Orange));
+
+        Data = new ObservableCollection<DataModel>
+            {
+               new DataModel("India", 22500),
+               new DataModel("Thailand", 8500),
+               new DataModel("Vietnam",7500 ),
+               new DataModel("Pakistan", 3600),
+               new DataModel("US", 2125),
+               new DataModel("Argentina", 400),
+               new DataModel("Australia", 275),
+               new DataModel("Brazil", 1100),
+               new DataModel("Cambodia", 1800),
+               new DataModel("China", 1800),
+               new DataModel("Others", 1398),
+            };
+
         
         }
     }
@@ -45,7 +68,7 @@ public class LegendExt : ChartLegend
         // Override the GetMaximumSizeCoefficient method to customize the legend size
         protected override double GetMaximumSizeCoefficient()
         {
-            return 0.9;
+            return 0.2;
         }
     }
 }
diff --git a/README.md b/README.md
@@ -52,6 +52,8 @@ chart.Legend = new ChartLegend();
 
 ###### Output:
  
+ The following screenshot explains the legend for each segment of the pie chart, highlighting the significance of each individual section to the users.
+
  ![LegendImage](https://support.syncfusion.com/kb/agent/attachment/article/18792/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0ODU2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.ScOM3vo6FrOOHQK84o0G2_CsY9LX9YFLyYywDTapoIE)
 
 **Legend Placement Customization**
@@ -83,7 +85,7 @@ The legend has been shifted to the bottom of the chart, as you can see in the sc
 
 **Legend icon Customization**
 
-To customize the legend icon in your chart, you can use the [LegendIcon](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_LegendIcon) property and set it to one of the values from the [ChartLegendIconType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegendIconType.html) enum. 
+To customize the legend icon in chart, use the [LegendIcon](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_LegendIcon) property and set it to one of the values from the [ChartLegendIconType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegendIconType.html) enum. 
  
 [XAML]
  ```xml
@@ -174,7 +176,7 @@ In the screenshot below you can observe that the legend label has been customize
 
 **Legend Visibility**
 
-To hide the legend, you can use the [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_IsVisible) property. This will allow you to enable or disable the legend in your chart.
+To hide the legend, use the [IsVisible](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_IsVisible) property. This will allow to enable or disable the legend in chart.
  
 [XAML]
  ```xml
@@ -196,7 +198,7 @@ You can see that the chart's legend has been disabled in the screenshot below.
 
 **Toggle Series Visibility**
 
-To hide a particular segment in the MAUI circular charts by toggling the legend, use the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. This property allows you to dynamically change the visibility of a segment by tapping the respective legend item.
+To hide a particular segment in the MAUI circular charts by toggling the legend, use the [ToggleSeriesVisibility](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_ToggleSeriesVisibility) property. This property allows to dynamically change the visibility of a segment by tapping the respective legend item.
  
 [XAML]
  ```xml
@@ -217,11 +219,11 @@ chart.Legend = new ChartLegend()
  
 In the screenshot below you can observe that the Thailand segment is disabled.
 
- ![LegendToggleSeriesVisibilityImage](https://support.syncfusion.com/kb/agent/attachment/article/18792/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0ODQ3Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.9i9OFQuqNgdeijVXhMYDqy1n138D1bYqYfjDXR4CUeI)
+ ![LegendToggleSeriesVisibilityImage](https://support.syncfusion.com/kb/agent/attachment/article/18792/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MjE1Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.Zt85M1UVgVmWEyyPOHLXayuZjajHDdJUUIxHNC2bmqc)
 
 **Legend item visibility**
 
-The visibility of individual legend items for specific series can be controlled using the [IsVisibleOnLegend](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_IsVisibleOnLegend) property of the series. You can disable the legend for particular series using this property.
+The visibility of individual legend items for specific series can be controlled using the [IsVisibleOnLegend](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_IsVisibleOnLegend) property of the series. Can disable the legend for particular series using this property.
  
 [XAML]
  ```xml
@@ -278,12 +280,14 @@ public class LegendExt : ChartLegend
      // Override the GetMaximumSizeCoefficient method to customize the legend size
      protected override double GetMaximumSizeCoefficient()
      {
-         return 0.9;
+         return 0.2;
      }
  } 
  ```
  
- ![LegendMaximumSizeRequestImage](https://support.syncfusion.com/kb/agent/attachment/article/18792/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0ODUwIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.VWiq0GnClwzqW40pHx_ONATZ5okuzz0Zl1LWj_13p5Q)
+As you can see in the screenshot below, the legend view has been reduced in size due to the large number of data elements
+ 
+ ![LegendMaximumSizeRequestImage](https://support.syncfusion.com/kb/agent/attachment/article/18792/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1MjE0Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.zOifIwhl07TTBamS6Q9Y4g3d3DC-L1fX-ejA5JoFYzk)
 
 **Items layout Customization**
 
@@ -322,7 +326,7 @@ this.Content = chart;
 
 **Item Template Customization**
 
-To customize the appearance of legend items, you can utilize the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate) property. This allows you to define how each item in the legend should be displayed.
+To customize the appearance of legend items, can utilize the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html?tabs=tabid-1%2Ctabid-3%2Ctabid-7%2Ctabid-12%2Ctabid-13%2Ctabid-5%2Ctabid-10%2Ctabid-15#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate) property. This allows to define how each item in the legend should be displayed.
 
  [XAML]
  ```xml

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@ namespace LegendSample.ViewModel`
`15`	`15`	`public class ViewModel`
`16`	`16`	`{`
`17`	`17`	`public ObservableCollection<DataModel> DataCollection { get; set; }`
	`18`	`+ public ObservableCollection<DataModel> Data { get; set; }`
	`19`	`+`
`18`	`20`	`public List<Brush> CustomBrushes { get; set; }`
`19`	`21`	`public ViewModel()`
`20`	`22`	`{`
`@@ -35,6 +37,27 @@ public ViewModel()`
`35`	`37`	`CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#C71969")));`
`36`	`38`	`CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#8AC114")));`
`37`	`39`	`CustomBrushes.Add(new SolidColorBrush(Color.FromArgb("#8419C7")));`
	`40`	`+ CustomBrushes.Add(new SolidColorBrush(Colors.Green));`
	`41`	`+ CustomBrushes.Add(new SolidColorBrush(Colors.Brown));`
	`42`	`+ CustomBrushes.Add(new SolidColorBrush(Colors.DeepPink));`
	`43`	`+ CustomBrushes.Add(new SolidColorBrush(Colors.DarkBlue));`
	`44`	`+ CustomBrushes.Add(new SolidColorBrush(Colors.Orange));`
	`45`	`+`
	`46`	`+ Data = new ObservableCollection<DataModel>`
	`47`	`+ {`
	`48`	`+ new DataModel("India", 22500),`
	`49`	`+ new DataModel("Thailand", 8500),`
	`50`	`+ new DataModel("Vietnam",7500 ),`
	`51`	`+ new DataModel("Pakistan", 3600),`
	`52`	`+ new DataModel("US", 2125),`
	`53`	`+ new DataModel("Argentina", 400),`
	`54`	`+ new DataModel("Australia", 275),`
	`55`	`+ new DataModel("Brazil", 1100),`
	`56`	`+ new DataModel("Cambodia", 1800),`
	`57`	`+ new DataModel("China", 1800),`
	`58`	`+ new DataModel("Others", 1398),`
	`59`	`+ };`
	`60`	`+`
`38`	`61`
`39`	`62`	`}`
`40`	`63`	`}`
`@@ -45,7 +68,7 @@ public class LegendExt : ChartLegend`
`45`	`68`	`// Override the GetMaximumSizeCoefficient method to customize the legend size`
`46`	`69`	`protected override double GetMaximumSizeCoefficient()`
`47`	`70`	`{`
`48`		`- return 0.9;`
	`71`	`+ return 0.2;`
`49`	`72`	`}`
`50`	`73`	`}`
`51`	`74`	`}`