983838: Updated the UG content and example changes in the chart control.

blazor/chart/how-to/add-remove.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Add or Remove Series in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about Add or Remove Series in Syncfusion Blazor Charts component and more.
+description: Learn to dynamically add or remove series in Syncfusion Blazor Charts component to update visualizations based on user input.
 platform: Blazor
 control: Chart
 documentation: ug
@@ -11,13 +11,14 @@ documentation: ug
 
 # Add or Remove Series in Blazor Charts Component
 
-The chart series can be dynamically added or removed by adding and removing a series to the  [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). Follow the steps below to dynamically add or remove a series.
+Syncfusion Blazor Charts allow dynamic addition and removal of chart series using the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). Follow these steps to update chart series at runtime:
 
-**Step 1:**
+## Step 1: Render Series Dynamically
 
-Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) class of the chart.
+Render chart series by iterating over a collection mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html).
 
 ```cshtml
+
 <SfChart>
     <ChartSeriesCollection>
         @foreach (SeriesData series in SeriesCollection)
@@ -27,22 +28,26 @@ Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/bla
         }
     </ChartSeriesCollection>
 </SfChart>
+
 ```
 
-**Step 2:**
+## Step 2: Add and Remove Controls
 
-Create buttons to call add and remove methods, which will add and remove a series from the chart respectively.
+Create buttons to trigger methods for adding or removing series from the chart.
 
 ```cshtml
+
 <SfButton @onclick="AddChartSeries">Add Chart Series</SfButton>
 <SfButton @onclick="RemoveChartSeries">Remove Chart Series</SfButton>
+
 ```
 
-**Step 3:**
+## Step 3: Add Series Method
 
-To add a new series to the chart dynamically, use the code below in the **AddChartSeries** method. This code adds a new series data to the series list named **SeriesCollection** mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). 
+Add a new series to the chart by appending data to the series collection.
 
 ```c#
+
 public void AddChartSeries()
 {
     SeriesCollection.Add(new SeriesData
@@ -52,25 +57,28 @@ public void AddChartSeries()
         Data = GetChartData()
     });
 }
+
 ```
 
-**Step 4:**
+## Step 4: Remove Series Method
 
-To remove a series from the chart dynamically, use the code below in the **RemoveChartSeries** method. This code removes a series data from the series list named **SeriesCollection** mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html).
+Remove a series from the chart by deleting the last item in the series collection.
 
 ```c#
+
 public void RemoveChartSeries()
 {
     if (SeriesCollection.Count > 0)
     {
         SeriesCollection.Remove(SeriesCollection[SeriesCollection.Count - 1]);
     }
 }
+
 ```
 
-**Action:**
+## Action
 
-By clicking the **Add Chart Series** button a new series will be added to the chart and similarly by clicking the **Remove Chart Series** button the last series in the chart series collection will be removed from the chart. The complete code snippet for the preceding steps is available below.
+Click **Add Chart Series** to insert a new series, or **Remove Chart Series** to delete the last series from the chart. The complete code sample is shown below.
 
 ```cshtml
 
@@ -92,8 +100,7 @@ By clicking the **Add Chart Series** button a new series will be added to the ch
     </SfChart>
 </div>
 
-@code{
-
+@code {
     List<SeriesData> SeriesCollection;
 
     // Here, the chart series has been added by adding series data to the "SeriesCollection" list.
@@ -185,8 +192,8 @@ By clicking the **Add Chart Series** button a new series will be added to the ch
             set;
         }
     }
-
 }
+
 ```
 
 N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

blazor/chart/how-to/axis-hide.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Hiding Axis in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details.
+description: Check out and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details.
 platform: Blazor
 control: Chart
 documentation: ug
@@ -11,13 +11,14 @@ documentation: ug
 
 # Hiding Axis in Blazor Charts Component
 
-The axis associated with the series can be hidden by toggling the legend item of the relevant series. Follow the steps below to hide the measure axis associated with the series.
+The axis associated with a series can be hidden by toggling the legend item of the relevant series. Follow these steps to hide the measure axis associated with a series.
 
-**Step 1:**
+## Step 1: Render Chart Series and Axes
 
-Render a chart with three series and three axis using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) and [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxes.html) properties of the chart. Map each series to a measure axis using [YAxisName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YAxisName) property of the [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html).
+Render a chart with three series and three axes using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) and [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxes.html). Map each series to a measure axis using the [YAxisName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YAxisName) property.
 
 ```cshtml
+
 <SfChart>
     <ChartAxes>
         <ChartAxis Name="yAxis1" />
@@ -34,25 +35,29 @@ Render a chart with three series and three axis using [ChartSeriesCollection](ht
     </ChartSeriesCollection>
 
 </SfChart>
+
 ```
 
-**Step 2:**
+## Step 2: Configure Legend Settings
 
-In the [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html), configure the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to display the legend and the [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) property to enable legend item toggling to control the visibility of the associated series.
+In [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html), set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to display the legend and [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) to enable legend item toggling.
 
 ```cshtml
+
 <SfChart>
     ...
     <ChartLegendSettings Visible="true" ToggleVisibility="true" />
     ...
 </SfChart>
+
 ```
 
-**Action:**
+## Action
 
-By clicking the legend items, one can now toggle the visibility of the associated series. Once the series has been removed, the associated axis will be removed from the chart. If the legend item is toggled again to show the series, the associated axis with the series will be added to the chart. The complete code snippet for the preceding steps is available below.
+Clicking legend items toggles the visibility of the associated series. When a series is hidden, its axis is removed from the chart. Toggling the legend item again restores the series and its axis. The following code demonstrates this behavior.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfChart>
@@ -73,7 +78,7 @@ By clicking the legend items, one can now toggle the visibility of the associate
 </SfChart>
 
 
-@code{
+@code {
 
     public List<ChartData> DataPoints = new List<ChartData>
     {
@@ -93,6 +98,7 @@ By clicking the legend items, one can now toggle the visibility of the associate
     }
 
 }
+
 ```
 
 N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

blazor/chart/how-to/dynamic-points.md

@@ -1,39 +1,42 @@
 ---
 layout: post
 title: Dynamic Points in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Dynamic Points in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to add or remove Data Points dynamically in Syncfusion Blazor Charts component.
 platform: Blazor
 control: Chart
 documentation: ug
 ---
 
 # Dynamic Points in Blazor Charts Component
 
-We can use chart mouse/touch events to dynamically add or remove points from an existing data source by clicking within the chart area. These events allow us to obtain the location of the current cursor as X and Y values in the event arguments. The point's X and Y values can then be updated with new data from the existing data source. To achieve dynamic points, follow the steps outlined below.
+Syncfusion Blazor Charts support dynamic addition and removal of points using mouse or touch events. Users can interactively update the data source by clicking within the chart area. Follow these steps to implement dynamic points:
 
-**Step 1**
+## Step 1: Configure ChartMouseClick Event
 
-Add the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event to the chart and add the event handler to that.
+Attach the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event and its handler to the chart to enable point interaction.
 
+```cshtml
 
-``` cshtml
 <SfChart>
-<ChartEvents ChartMouseClick="MouseClick"></ChartEvents>
-...
+    <ChartEvents ChartMouseClick="MouseClick"></ChartEvents>
+    ...
 <SfChart>
-@code{
+
+@code {
     public void MouseClick(ChartMouseEventArgs args)
     {
 
     }
 }
+
 ```
 
-**Step 2**
+## Step 2: Add Points to Data Source
 
-Fetch the X-axis and Y-axis data of the currently clicked location from the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event arguments, and then add points to the data source using the `AddToDataSource` method, as shown below.
+Retrieve the X and Y values from the event arguments and add new points to the data source.
 
 ```cshtml
+...
 public void MouseClick(ChartMouseEventArgs args)
 {
     if (args.AxisData.Count > 0)
@@ -48,62 +51,69 @@ public void MouseClick(ChartMouseEventArgs args)
         }
     }
 }
+
 public void AddToDataSource(object xValue, object yValue)
 {
     MouseClickPoints.Add(new PointData() { X = Convert.ToDouble(xValue, null), Y = Convert.ToDouble(yValue, null) });
 }
-``` 
 
-**Step 3**
+```
+
+## Step 3: Remove Points from Data Source
 
-To remove a point from the existing chart data source, click on it. To do so, create a method `IsSamePoint` to check whether the point obtained from [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) already exists in the data source. If the point exists in the data source, it should be removed. 
+Determine if the clicked point exists in the data source. If present, remove it; if not, add it as a new point.
 
-```
-    public void MouseClick(ChartMouseEventArgs args)
+```cshtml
+
+public void MouseClick(ChartMouseEventArgs args)
+{
+    ...
+    bool isSamePoint;
+    if (MouseClickPoints.Count >= 1)
     {
-        ...
-                bool isSamePoint;
-                if (MouseClickPoints.Count >= 1)
-                {
-                    index = -1;
-                    isSamePoint = IsSamePoint();
-                    if (isSamePoint && MouseClickPoints.Count >= 1)
-                    {
-                        MouseClickPoints.RemoveAt(index);
-                    }
-                    else if (!isSamePoint)
-                    {
-                        AddToDataSource(xPoint, yPoint);
-                    }
-                }
-        ...
+        index = -1;
+        isSamePoint = IsSamePoint();
+        if (isSamePoint && MouseClickPoints.Count >= 1)
+        {
+            MouseClickPoints.RemoveAt(index);
+        }
+        else if (!isSamePoint)
+        {
+            AddToDataSource(xPoint, yPoint);
+        }
     }
-    public bool IsSamePoint()
+    ...
+}
+
+public bool IsSamePoint()
+{
+    foreach (PointData item in MouseClickPoints)
     {
-        foreach (PointData item in MouseClickPoints)
+        index = index + 1;
+        if (item.X == Convert.ToDouble(xPoint, null) &&
+            item.Y == Convert.ToDouble(yPoint, null))
         {
-            index = index + 1;
-            if (item.X == Convert.ToDouble(xPoint, null) &&
-                item.Y == Convert.ToDouble(yPoint, null))
-            {
-                return true;
-            }
+            return true;
         }
-        return false;
     }
+    return false;
+}
+
 ```
 
-**Action**
+## Action
 
-The below code snippet illustrates a chart that allows users to add new data and update existing data source by clicking in the chart area. Additionally, clicking on an existing point will remove that data from the existing data source.
+Clicking in the chart area adds new points, while clicking on an existing point removes it from the data source. The complete code sample is provided below.
 
 ``` cshtml
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Charts
 
 <SfChart @ref="Chart">
-    <ChartEvents ChartMouseClick="MouseClick"></ChartEvents>
-    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
+    <ChartEvents ChartMouseClick="MouseClick" />
+    <ChartArea>
+        <ChartAreaBorder Width="0" />
+    </ChartArea>
     <ChartPrimaryXAxis @ref="XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" RangePadding="ChartRangePadding.Additional" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
         <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
     </ChartPrimaryXAxis>
@@ -118,6 +128,7 @@ The below code snippet illustrates a chart that allows users to add new data and
         </ChartSeries>
     </ChartSeriesCollection>
 </SfChart>
+
 @code {
 
     SfChart? Chart;
@@ -191,6 +202,7 @@ The below code snippet illustrates a chart that allows users to add new data and
         new PointData { X= 90, Y= 35 }
     };
 }
+
 ```
 
 ![Dynamic Points](../images/dynamic-points.gif)