Merge branch 'development' into EJ2-908998-feature-ug

Author: Jaganaath-Baskaran

blazor/chart/chart-types/area.md

@@ -318,8 +318,6 @@ To change the rendering mode of the Box and Whisker series, use the [BoxPlotMode
 ``` 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJNbLZyqNmLSfX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor Box and Whisker Charts with Box Plot Mode](../images/othertypes/blazor-box-whisker-chart-with-box-plot-mode.png)
-
 ## Show mean
 
 In Box and Whisker series, [ShowMean](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_ShowMean) property is used to show the box and whisker average value. The default value of [ShowMean](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_ShowMean) is **false**.
@@ -362,8 +360,6 @@ In Box and Whisker series, [ShowMean](https://help.syncfusion.com/cr/blazor/Sync
 ``` 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNLTjlrtyAViHspW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor Box and Whisker Charts with Average Value](../images/chart-types-images/blazor-box-whisker-chart-average-value.png)
-
 ## Events
 
 ### Series render

blazor/chart/chart-types/bar.md

@@ -58,6 +58,8 @@ documentation: ug
 ``` 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+![Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png)
+
 N> Refer to our [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore our [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts.
 
 ## Binding data with series
@@ -268,9 +270,59 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDhpNbhjgvPifngh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Bubble size mapping
+
+The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size) property can be used to map the size value specified from datasource.
+
+```cshtml
+
+@using Syncfusion.Blazor.Charts
+
+<SfChart>
+    <ChartSeriesCollection>
+        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Size="Size" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Bubble">
+        </ChartSeries>
+    </ChartSeriesCollection>
+</SfChart>
+
+@code {
+    public class ChartData
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+        public string Text { get; set; }
+        public double Size { get; set; }
+    }
+
+    public List<ChartData> SalesReports = new List<ChartData>
+    {
+        new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" },
+        new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" },
+        new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" },
+        new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" },
+        new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" },
+        new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" },
+        new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" },
+        new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" },
+        new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" },
+        new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" },
+        new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" },
+        new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" },
+        new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" },
+        new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" },
+        new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" },
+        new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" },
+        new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" },
+        new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" }
+    };
+}
+
+```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLfZPVXqYFMgJrs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## Empty points
 
-Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
+Data points with `null`, `double.NaN` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
 
 **Mode**
 
@@ -425,58 +477,6 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VZrfNFBNAEzlQWwl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Bubble size mapping
-
-The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size) property can be used to map the size value specified from datasource.
-
-```cshtml
-
-@using Syncfusion.Blazor.Charts
-
-<SfChart>
-    <ChartSeriesCollection>
-        <ChartSeries DataSource="@SalesReports" XName="X" YName="Y" Size="Size" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Bubble">
-        </ChartSeries>
-    </ChartSeriesCollection>
-</SfChart>
-
-@code {
-    public class ChartData
-    {
-        public double X { get; set; }
-        public double Y { get; set; }
-        public string Text { get; set; }
-        public double Size { get; set; }
-    }
-
-    public List<ChartData> SalesReports = new List<ChartData>
-    {
-        new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" },
-        new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" },
-        new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" },
-        new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" },
-        new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" },
-        new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" },
-        new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" },
-        new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" },
-        new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" },
-        new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" },
-        new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" },
-        new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" },
-        new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" },
-        new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" },
-        new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" },
-        new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" },
-        new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" },
-        new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" }
-    };
-}
-
-```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLfZPVXqYFMgJrs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor Bubble Chart with Size Mapping](../images/chart-types-images/blazor-bubble-chart-size-mapping.png)
-
 ## Events
 
 ### Series render

blazor/chart/chart-types/box-whisker.md

@@ -203,11 +203,9 @@ The color of the candle will be defined by comparing with previous values. [Bull
 ``` 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJZPrNfEvwlPNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor Solid Candle Chart](../images/financial-types/blazor-solid-candle-chart.png)
-
 ## Empty points
 
-Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
+Data points with `null`, `double.NaN` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
 
 **Mode**