diff --git a/wpf-toc.html b/wpf-toc.html
index 5065b50e96..86929f61a0 100644
--- a/wpf-toc.html
+++ b/wpf-toc.html
@@ -1868,8 +1868,8 @@
         <ul>
             <li><a href="/wpf/Tabbed-Window/Overview">Overview</a></li>
             <li><a href="/wpf/Tabbed-Window/getting-started">Getting Started</a></li>
-            <li><a href="/wpf/Tabbed-Window/tab-management">Tab Management</a></li>
             <li><a href="/wpf/Tabbed-Window/data-binding">Data Binding</a></li>
+            <li><a href="/wpf/Tabbed-Window/tab-management">Tab Management</a></li>
             <li><a href="/wpf/Tabbed-Window/merge-tabs">Merge Tabs</a></li>
         </ul>
     </li>
@@ -2377,6 +2377,9 @@
 			<ul>
 				<li> Weekly Nuget Release 
 					<ul>
+						<li><a href="/wpf/release-notes/v33.2.6">v33.2.6</a></li>
+						<li><a href="/wpf/release-notes/v33.2.5">v33.2.5</a></li>
+						<li><a href="/wpf/release-notes/v33.2.4">v33.2.4</a></li>
 						<li><a href="/wpf/release-notes/v33.1.49">v33.1.49</a></li>
 						<li><a href="/wpf/release-notes/v33.1.47">v33.1.47</a></li>
 						<li><a href="/wpf/release-notes/v33.1.46">v33.1.46</a></li>
diff --git a/wpf/Charts/Adornments/DataMarkers.md b/wpf/Charts/Adornments/DataMarkers.md
index bb47f00763..1fe30f3037 100644
--- a/wpf/Charts/Adornments/DataMarkers.md
+++ b/wpf/Charts/Adornments/DataMarkers.md
@@ -23,26 +23,34 @@ The following code example illustrates how to initialize the adornment.
 
 {% highlight xaml %}
 
-        <syncfusion:ColumnSeries Interior="#777777" ItemsSource="{Binding Demands}" XBindingPath="Category" YBindingPath="Value">
-                <syncfusion:ColumnSeries.AdornmentsInfo>
-                    <syncfusion:ChartAdornmentInfo></syncfusion:ChartAdornmentInfo>
-                </syncfusion:ColumnSeries.AdornmentsInfo>
-        </syncfusion:ColumnSeries> 
+<syncfusion:ColumnSeries 
+    Interior="#777777" 
+    ItemsSource="{Binding Demands}" 
+    XBindingPath="Category" 
+    YBindingPath="Value">
+    
+    <syncfusion:ColumnSeries.AdornmentsInfo>
+        <syncfusion:ChartAdornmentInfo/>
+    </syncfusion:ColumnSeries.AdornmentsInfo>
+</syncfusion:ColumnSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries series = new ColumnSeries()
-            {
-                ItemsSource = ViewModel().Demands,
-                XBindingPath = "Demands",
-                YBindingPath = "Value",
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-            };
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo();
-        series.AdornmentsInfo = adornmentInfo;
-        chart.Series.Add(series);
+ColumnSeries series = new ColumnSeries()
+{
+    ItemsSource = ViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo();
+
+series.AdornmentsInfo = adornmentInfo;
+
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -52,14 +60,9 @@ The following code example illustrates how to initialize the adornment.
 
 ## See also
 
-[`How to show different data marker based on the value in the WPF Chart`](https://support.syncfusion.com/kb/article/9396/how-to-show-different-data-marker-based-on-the-value-in-the-wpf-chart)
-
-[`How to show custom data marker in the WPF Chart`](https://support.syncfusion.com/kb/article/9620/how-to-show-custom-data-marker-in-the-wpf-chart)
-
-[`How to rotate text in adornment`](https://support.syncfusion.com/kb/article/3135/how-to-rotate-text-in-adornment-of-wpf-chart-sfchart)
-
-[`How to display the labels inside segments`](https://support.syncfusion.com/kb/article/2773/how-to-display-the-labels-inside-segments-in-wpf-chart-sfchart)
-
-[`How to bind the underlying DataTable model to the DataMarker Template in WPF Charts`](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts)
-
+[`How to show different data marker based on the value in the WPF Chart?`](https://support.syncfusion.com/kb/article/9396/how-to-show-different-data-marker-based-on-the-value-in-the-wpf-chart)
+[`How to show custom data marker in the WPF Chart?`](https://support.syncfusion.com/kb/article/9620/how-to-show-custom-data-marker-in-the-wpf-chart)
+[`How to rotate text in adornment?`](https://support.syncfusion.com/kb/article/3135/how-to-rotate-text-in-adornment-of-wpf-chart-sfchart)
+[`How to display the labels inside segments?`](https://support.syncfusion.com/kb/article/2773/how-to-display-the-labels-inside-segments-in-wpf-chart-sfchart)
+[`How to bind the underlying DataTable model to the DataMarker Template in WPF Charts?`](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts)
 
diff --git a/wpf/Charts/Adornments/Label.md b/wpf/Charts/Adornments/Label.md
index 933e44f58b..6f66815d64 100644
--- a/wpf/Charts/Adornments/Label.md
+++ b/wpf/Charts/Adornments/Label.md
@@ -23,17 +23,21 @@ The following code example demonstrates about define the value to be displayed a
 
 {% highlight xaml %}
 
-            <syncfusion:ChartAdornmentInfo SegmentLabelContent="YValue" ShowLabel="True" LabelPosition="Outer"></syncfusion:ChartAdornmentInfo>
+<syncfusion:ChartAdornmentInfo
+    SegmentLabelContent="YValue"
+    ShowLabel="True"
+    LabelPosition="Outer">
+</syncfusion:ChartAdornmentInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
         
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-               ShowLabel = true,
-               SegmentLabelContent=LabelContent.YValue
-            };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    SegmentLabelContent = LabelContent.YValue
+};
 
 {% endhighlight %}
 
@@ -67,30 +71,38 @@ The following code example demonstrates the customization of label using the abo
 
 {% highlight xaml %}
 
-        <syncfusion:ColumnSeries.AdornmentsInfo>
-            <syncfusion:ChartAdornmentInfo LabelPosition="Outer" Foreground="Black" FontSize="11" FontFamily="Calibri" BorderBrush="Black" BorderThickness="1" Margin="1" FontStyle="Italic"  Background="DarkGray" ShowLabel="True">                        
-            </syncfusion:ChartAdornmentInfo>
-        </syncfusion:ColumnSeries.AdornmentsInfo>
+<syncfusion:ColumnSeries.AdornmentsInfo>
+    <syncfusion:ChartAdornmentInfo
+        LabelPosition="Outer"
+        Foreground="Black"
+        FontSize="11"
+        FontFamily="Calibri"
+        BorderBrush="Black"
+        BorderThickness="1"
+        Margin="1"
+        FontStyle="Italic"
+        Background="DarkGray"
+        ShowLabel="True">
+    </syncfusion:ChartAdornmentInfo>
+</syncfusion:ColumnSeries.AdornmentsInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-
-                ShowLabel = true,
-                LabelPosition = AdornmentsLabelPosition.Outer,
-                Foreground = new SolidColorBrush(Colors.Black),
-                BorderBrush = new SolidColorBrush(Colors.Black),
-                Background = new SolidColorBrush(Colors.DarkGray),
-                BorderThickness = new Thickness(1),
-                Margin = new Thickness(1),
-                FontStyle = FontStyles.Italic,
-                FontFamily = new FontFamily("Calibri"),
-                FontSize = 11
-            };
-
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel      = true,
+    LabelPosition  = AdornmentsLabelPosition.Outer,
+    Foreground     = new SolidColorBrush(Colors.Black),
+    BorderBrush    = new SolidColorBrush(Colors.Black),
+    Background     = new SolidColorBrush(Colors.DarkGray),
+    BorderThickness= new Thickness(1),
+    Margin         = new Thickness(1),
+    FontStyle      = FontStyles.Italic,
+    FontFamily     = new FontFamily("Calibri"),
+    FontSize       = 11
+};
 
 {% endhighlight %}
 
@@ -106,62 +118,78 @@ The default appearance of the label can be customized using [`LabelTemplate`](ht
 
 {% highlight xaml %}
 
-    <Window.Resources>
-        <DataTemplate x:Key="adornmentTemplate">
-            <StackPanel Orientation="Vertical">               
-                <Path Grid.Row="0"  Stretch="Uniform" Fill="#FF0F0E0E"                              
-                           Width="15" Height="15" Margin="0,0,0,0"                              
-                           RenderTransformOrigin="0.5,0.5">
-                    <Path.Data>
-                        <PathGeometry FillRule="Nonzero" Figures="M22.5,15.8899993896484L37.5,                                
-                                              30.8899993896484 7.5,30.8899993896484 22.5,15.8899993896484z" />
-                    </Path.Data>
-                    <Path.RenderTransform>
-                        <TransformGroup>
-                            <TransformGroup.Children>
-                                <RotateTransform Angle="0" />
-                                <ScaleTransform ScaleX="1" ScaleY="1" />
-                            </TransformGroup.Children>
-                        </TransformGroup>
-                    </Path.RenderTransform>
-                </Path>
-                <TextBlock Grid.Row="1" Text="{Binding Item.Value}" FontSize="11" Foreground="Black"></TextBlock>
-            </StackPanel>
-        </DataTemplate>
-    </Window.Resources>
-
-     <Grid>
-        <chart:SfChart Width="400" Height="300">
-         ...
-            <syncfusion:ColumnSeries Interior="#777777" ItemsSource="{Binding Demands}" XBindingPath="Category" YBindingPath="Value">
-                <syncfusion:ColumnSeries.AdornmentsInfo>
-                    <syncfusion:ChartAdornmentInfo ShowLabel="True" LabelTemplate="{StaticResource adornmentTemplate}"
-                        LabelPosition="Outer" SegmentLabelContent="LabelContentPath"></syncfusion:ChartAdornmentInfo>
-                </syncfusion:ColumnSeries.AdornmentsInfo>
-            </syncfusion:ColumnSeries>
+<Window.Resources>
+    <DataTemplate x:Key="adornmentTemplate">
+        <StackPanel Orientation="Vertical">
+            <Path Grid.Row="0"  
+                Stretch="Uniform" 
+                Fill="#FF0F0E0E"                              
+                Width="15" 
+                Height="15" 
+                Margin="0,0,0,0"                                          
+                RenderTransformOrigin="0.5,0.5">
+                
+                <Path.Data>
+                    <PathGeometry 
+                    FillRule="Nonzero" 
+                    Figures="M22.5,15.8899993896484L37.5,30.8899993896484 7.5,30.8899993896484 22.5,15.8899993896484z"/>
+                </Path.Data>
+                
+                <Path.RenderTransform>
+                    <TransformGroup>
+                        <TransformGroup.Children>
+                            <RotateTransform Angle="0"/>
+                            <ScaleTransform ScaleX="1" ScaleY="1"/>
+                        </TransformGroup.Children>
+                    </TransformGroup>
+                </Path.RenderTransform>                
+            </Path>
+            <TextBlock 
+                Grid.Row="1" 
+                Text="{Binding Item.Value}" 
+                FontSize="11" 
+                Foreground="Black"/>
+        </StackPanel>
+    </DataTemplate>
+</Window.Resources>
+
+<Grid>
+    <chart:SfChart Width="400" Height="300">
         ...
-        </chart:SfChart>
-    </Grid>
+        <syncfusion:ColumnSeries Interior="#777777" ItemsSource="{Binding Demands}" XBindingPath="Category" YBindingPath="Value">
+            <syncfusion:ColumnSeries.AdornmentsInfo>
+                <syncfusion:ChartAdornmentInfo 
+                    ShowLabel="True" 
+                    LabelTemplate="{StaticResource adornmentTemplate}"
+                    LabelPosition="Outer" 
+                    SegmentLabelContent="LabelContentPath">                    
+                </syncfusion:ChartAdornmentInfo>
+            </syncfusion:ColumnSeries.AdornmentsInfo>
+        </syncfusion:ColumnSeries>
+        ...
+    </chart:SfChart>
+</Grid>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries series = new ColumnSeries()
-            {
-                ItemsSource = new ViewModel().Demands,
-                XBindingPath = "Category",
-                YBindingPath = "Value",
-                 Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-            };
-
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                LabelPosition = AdornmentsLabelPosition.Outer,
-                LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate
-            };
-        series.AdornmentsInfo = adornmentInfo;
+ColumnSeries series = new ColumnSeries()
+{
+    ItemsSource   = new ViewModel().Demands,
+    XBindingPath  = "Category",
+    YBindingPath  = "Value",
+    Interior      = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel     = true,
+    LabelPosition = AdornmentsLabelPosition.Outer,
+    LabelTemplate = this.Resources["adornmentTemplate"] as DataTemplate
+};
+
+series.AdornmentsInfo = adornmentInfo;
 
 {% endhighlight %}
 
@@ -179,18 +207,21 @@ The following code example demonstrates the y value having three decimal digits.
 
 {% highlight xaml %}
 
-        <syncfusion:ChartAdornmentInfo ShowLabel="True" SegmentLabelFormat="#.000" AdornmentsPosition="Top">
-        </syncfusion:ChartAdornmentInfo>
+<syncfusion:ChartAdornmentInfo 
+    ShowLabel="True" 
+    SegmentLabelFormat="#.000" 
+    AdornmentsPosition="Top">
+</syncfusion:ChartAdornmentInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-        {
-             ShowLabel = true,
-            SegmentLabelFormat = "0.000"
-        };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    SegmentLabelFormat = "0.000"
+};
 
 {% endhighlight %}
 
@@ -208,19 +239,25 @@ In the following image, you can see the decimal position will be rounded off to
 
 {% highlight xaml %}
 
-        <syncfusion:ColumnSeries.AdornmentsInfo>
-             <syncfusion:ChartAdornmentInfo LabelPosition="Outer" LabelRotationAngle="45" ShowLabel="True"></syncfusion:ChartAdornmentInfo>
-        </syncfusion:ColumnSeries.AdornmentsInfo>
+<syncfusion:ColumnSeries.AdornmentsInfo>
+    <syncfusion:ChartAdornmentInfo
+        LabelPosition="Outer"
+        LabelRotationAngle="45"
+        ShowLabel="True">   
+    </syncfusion:ChartAdornmentInfo>
+</syncfusion:ColumnSeries.AdornmentsInfo>
+
 {% endhighlight %}
 
 {% highlight c# %}
 
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                LabelRotationAngle = 45,
-                LabelPosition=AdornmentsLabelPosition.Outer          
-            };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelRotationAngle = 45,
+    LabelPosition = AdornmentsLabelPosition.Outer
+};
+
 {% endhighlight %}
 
 {% endtabs %}
@@ -244,51 +281,57 @@ The following code example shows the customization options for connector line:
 
 {% highlight xaml %}
 
-    <Window.Resources>
-
-        <Style TargetType="Path" x:Key="lineStyle">
-            <Setter Property="StrokeDashArray" Value="10,7,5"/>
-            <Setter Property="Stroke" Value="Black"/>
-        </Style>
+<Window.Resources>
+    <Style TargetType="Path" x:Key="lineStyle">
+        <Setter Property="StrokeDashArray" Value="10,7,5"/>
+        <Setter Property="Stroke" Value="Black"/>
+    </Style>
+</Window.Resources>
 
-    </Window.Resources>
-
-    <Grid>
-        <chart:SfChart Width="400" Height="400">
-         ...
-
-        <syncfusion:PieSeries Interior="#777777" ItemsSource="{Binding Demands}" XBindingPath="Category" YBindingPath="FloatValue" LabelPosition="OutsideExtended">
-                <syncfusion:PieSeries.AdornmentsInfo>
-                    <syncfusion:ChartAdornmentInfo ShowLabel="True" ConnectorLineStyle="{StaticResource lineStyle}"ShowConnectorLine="True" LabelPosition="Outer"></syncfusion:ChartAdornmentInfo>
-                </syncfusion:PieSeries.AdornmentsInfo>
+<Grid>
+    <chart:SfChart Width="400" Height="400">
+        ...
+        <syncfusion:PieSeries Interior="#777777" 
+                              ItemsSource="{Binding Demands}" 
+                              XBindingPath="Category" 
+                              YBindingPath="FloatValue" 
+                              LabelPosition="OutsideExtended">
+            <syncfusion:PieSeries.AdornmentsInfo>
+                <syncfusion:ChartAdornmentInfo 
+                    ShowLabel="True" 
+                    ConnectorLineStyle="{StaticResource lineStyle}" 
+                    ShowConnectorLine="True" 
+                    LabelPosition="Outer">                    
+                </syncfusion:ChartAdornmentInfo>
+            </syncfusion:PieSeries.AdornmentsInfo>
         </syncfusion:PieSeries>
-
         ...
-        </chart:SfChart>
-    </Grid>
+    </chart:SfChart>
+</Grid>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        PieSeries series = new PieSeries()
-            {
-                ItemsSource = new ServerViewModel().Performance,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-                LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-            };
-
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                ShowConnectorLine = true,
-                UseSeriesPalette = true,
-                ConnectorLineStyle=this.Resources["lineStyle"] as Style
-                LabelPosition =AdornmentsLabelPosition.Outer,
-            };
-        series.AdornmentsInfo = adornmentInfo;
+PieSeries series = new PieSeries()
+{
+    ItemsSource = new ServerViewModel().Performance,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic",
+    LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    ShowConnectorLine = true,
+    UseSeriesPalette = true,
+    ConnectorLineStyle=this.Resources["lineStyle"] as Style
+    LabelPosition =AdornmentsLabelPosition.Outer,
+};
+
+series.AdornmentsInfo = adornmentInfo;
 
 {% endhighlight %}
 
@@ -305,42 +348,51 @@ The following code example shows the customization options for connector line:
 
 {% highlight xaml %}
 
-        <chart:PieSeries Interior="#777777" ItemsSource="{Binding Performance}" XBindingPath="ServerLoad"
-            YBindingPath="Server1" EnableSmartLabels="True" ConnectorType="Bezier" LabelPosition="OutsideExtended">
-                <chart:PieSeries.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo HorizontalAlignment="Center"
-                                              VerticalAlignment="Center"    ShowConnectorLine="True" 
-                                              ConnectorHeight="80" ShowLabel="True" />
-                </chart:PieSeries.AdornmentsInfo>
-        </chart:PieSeries>
+<chart:PieSeries
+    Interior="#777777"
+    ItemsSource="{Binding Performance}"
+    XBindingPath="ServerLoad"
+    YBindingPath="Server1"
+    EnableSmartLabels="True"
+    ConnectorType="Bezier"
+    LabelPosition="OutsideExtended">
+    <chart:PieSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            ShowConnectorLine="True"
+            ConnectorHeight="80"
+            ShowLabel="True"/>
+    </chart:PieSeries.AdornmentsInfo>
+</chart:PieSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        PieSeries series = new PieSeries()
-            {
-                ItemsSource = new ServerViewModel().Performance,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-                EnableSmartLabels = true,
-                ExplodeAll = true,
-                ExplodeRadius = 3,
-                ConnectorType=ConnectorMode.Bezier,
-                LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-            };
-
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                ShowConnectorLine = true,
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center,
-                ConnectorHeight= 80
-            };
-
-    {% endhighlight %}
+PieSeries series = new PieSeries()
+{
+    ItemsSource       = new ServerViewModel().Performance,
+    XBindingPath      = "ServerLoad",
+    YBindingPath      = "Server1",
+    EnableSmartLabels = true,
+    ExplodeAll        = true,
+    ExplodeRadius     = 3,
+    ConnectorType     = ConnectorMode.Bezier,
+    LabelPosition     = CircularSeriesLabelPosition.OutsideExtended,
+    Interior          = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel          = true,
+    ShowConnectorLine  = true,
+    HorizontalAlignment= HorizontalAlignment.Center,
+    VerticalAlignment  = VerticalAlignment.Center,
+    ConnectorHeight    = 80
+};
+
+{% endhighlight %}
 
 {% endtabs %}
 
@@ -366,19 +418,20 @@ The following code example shows the customization options for connector line:
 
 {% highlight xaml %}
 
-        <syncfusion:ChartAdornmentInfo ShowLabel="True" UseSeriesPalette="True">
-
-        </syncfusion:ChartAdornmentInfo>
+<syncfusion:ChartAdornmentInfo 
+    ShowLabel="True" 
+    UseSeriesPalette="True">
+</syncfusion:ChartAdornmentInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-        {
-            ShowLabel = true,
-            UseSeriesPalette = true
-        };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    UseSeriesPalette = true
+};
 
 {% endhighlight %}
 
@@ -394,39 +447,54 @@ The following code example demonstrates the EnableSmartLabels property:
 
 {% highlight xaml %}
 
-            <chart:PieSeries Interior="#777777" ItemsSource="{Binding CategoricalData}" ConnectorType="Bezier" XBindingPath="Year"
-            YBindingPath="Plastic" EnableSmartLabels="True" LabelPosition="OutsideExtended" ExplodeAll="True" ExplodeRadius="3">
-                <chart:PieSeries.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo ShowLabel="True" HorizontalAlignment="Center" VerticalAlignment="Center" ShowConnectorLine="True"></chart:ChartAdornmentInfo>
-                </chart:PieSeries.AdornmentsInfo>
-            </chart:PieSeries>
+<chart:PieSeries
+    Interior="#777777"
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic"
+    ConnectorType="Bezier"
+    EnableSmartLabels="True"
+    LabelPosition="OutsideExtended"
+    ExplodeAll="True"
+    ExplodeRadius="3">
+
+    <chart:PieSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo
+            ShowLabel="True"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            ShowConnectorLine="True">
+        </chart:ChartAdornmentInfo>
+    </chart:PieSeries.AdornmentsInfo>
+</chart:PieSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            PieSeries series = new PieSeries()
-            {
-                ItemsSource = new ViewModel().Tax,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-                EnableSmartLabels = true,
-                ExplodeAll = true,
-                ExplodeRadius = 3,
-                Palette = ChartColorPalette.Custom,
-                LabelPosition=CircularSeriesLabelPosition.OutsideExtended,
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-            };
-
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                ShowConnectorLine = true,
-                UseSeriesPalette = true,
-                HorizontalAlignment = HorizontalAlignment.Center,
-                VerticalAlignment = VerticalAlignment.Center
-            };
-            series.AdornmentsInfo = adornmentInfo;
+PieSeries series = new PieSeries()
+{
+    ItemsSource = new ViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic",
+    EnableSmartLabels = true,
+    ExplodeAll = true,
+    ExplodeRadius = 3,
+    Palette = ChartColorPalette.Custom,
+    LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    ShowConnectorLine = true,
+    UseSeriesPalette = true,
+    HorizontalAlignment = HorizontalAlignment.Center,
+    VerticalAlignment = VerticalAlignment.Center
+};
+
+series.AdornmentsInfo = adornmentInfo;
 
 {% endhighlight %}
 
diff --git a/wpf/Charts/Adornments/Marker.md b/wpf/Charts/Adornments/Marker.md
index d43bc666b5..622401199d 100644
--- a/wpf/Charts/Adornments/Marker.md
+++ b/wpf/Charts/Adornments/Marker.md
@@ -21,21 +21,24 @@ The following code example demonstrates the column series with [`Diamond`](https
 
 {% highlight xaml %}
 
-        <syncfusion:ColumnSeries.AdornmentsInfo>
-            <syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolInterior="Black" Symbol="Diamond">
-            </syncfusion:ChartAdornmentInfo>
-        </syncfusion:ColumnSeries.AdornmentsInfo> 
+<syncfusion:ColumnSeries.AdornmentsInfo>
+    <syncfusion:ChartAdornmentInfo
+        ShowMarker="True"
+        SymbolInterior="Black"
+        Symbol="Diamond">
+    </syncfusion:ChartAdornmentInfo>
+</syncfusion:ColumnSeries.AdornmentsInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowMarker = true,
-                Symbol = ChartSymbol.Diamond,
-                SymbolInterior=new SolidColorBrush(Colors.Black)          
-            };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowMarker = true,
+    Symbol = ChartSymbol.Diamond,
+    SymbolInterior = new SolidColorBrush(Colors.Black)
+};
 
 {% endhighlight %}
 
@@ -73,23 +76,28 @@ We have some predefined symbols such as
 
 {% highlight xaml %}
 
-            <syncfusion:ChartAdornmentInfo ShowMarker="True" SymbolStroke="Black" SymbolHeight="10" 
-            SymbolWidth="10" SymbolInterior="DarkGray" Symbol="Ellipse">
-            </syncfusion:ChartAdornmentInfo>o>
+<syncfusion:ChartAdornmentInfo
+    ShowMarker="True"
+    SymbolStroke="Black"
+    SymbolHeight="10"
+    SymbolWidth="10"
+    SymbolInterior="DarkGray"
+    Symbol="Ellipse">
+</syncfusion:ChartAdornmentInfo>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowMarker = true,
-                SymbolStroke = new SolidColorBrush(Colors.Black),
-                SymbolInterior = new SolidColorBrush(Colors.DarkGray),
-                SymbolHeight = 10,
-                SymbolWidth = 10,
-                Symbol = ChartSymbol.Ellipse
-            };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowMarker = true,
+    SymbolStroke = new SolidColorBrush(Colors.Black),
+    SymbolInterior = new SolidColorBrush(Colors.DarkGray),
+    SymbolHeight = 10,
+    SymbolWidth = 10,
+    Symbol = ChartSymbol.Ellipse
+};
 
 {% endhighlight %}
 
@@ -106,69 +114,74 @@ The following code example demonstrates how to use SymbolTemplate.
 
 {% highlight xaml %}
 
-    <Window.Resources>
- 
-        <DataTemplate x:Key="symbolTemplate">
-            <Grid>
-                <Grid Name="backgroundGrid" Width="24" Height="24" Visibility="Visible">
-                    <Ellipse Fill="#FFE2DBDB" Name="Fill" Visibility="Visible" />
-                </Grid>
-                <Path Stretch="Uniform" Fill="#FF0F0E0E" Width="24" Height="24" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
-                    <Path.Data>
-                        <PathGeometry FillRule="Nonzero" Figures="M23.9296875,10.6165618896484L20.759765625,11.2200794219971 18.09375,
-                            13.0306243896484 16.283203125,15.6966400146484 15.6796875,18.8665618896484 16.283203125,
-                            22.0423431396484 18.09375,24.7259368896484 20.759765625,26.5540618896484 23.9296875,27.1634368896484 27.1025371551514,
-                            26.5540618896484 29.77734375,24.7259368896484 31.5966796875,22.0423431396484 32.203125,18.8665618896484 31.5966796875,
-                            15.6966400146484 29.77734375,13.0306243896484 27.1025371551514,11.2200794219971 23.9296875,10.6165618896484z M25.265625,
-                            7.35874938964844L26.6953125,9.86656188964844 29.3671875,8.64781188964844 29.765625,11.4837493896484 32.7421875,
-                            11.2728118896484 32.015625,14.1790618896484 34.921875,14.9759368896484 33.1875,17.4134368896484 35.578125,
-                            19.1478118896484 33.140625,20.7884368896484 34.640625,23.3665618896484 31.8046875,23.9759368896484 32.3203125,
-                            26.9759368896484 29.4375,26.5540618896484 28.921875,29.4837493896484 26.25,27.9603118896484 24.75,
-                            30.4681243896484 22.8046875,28.2181243896484 20.5078125,30.0228118896484 19.5703125,27.1634368896484 16.640625,
-                            28.0306243896484 16.875,25.1009368896484 13.875,24.7728118896484 15.140625,22.1478118896484 12.421875,
-                            20.7415618896484 14.5546875,18.6790618896484 12.4921875,16.5228118896484 15.2578125,15.3040618896484 14.203125,
-                            12.5384368896484 17.1328125,12.3978118896484 17.1328125,9.42124938964844 19.921875,10.4056243896484 21.046875,
-                            7.61656188964844 23.296875,9.49156188964844 25.265625,7.35874938964844z" />
-                    </Path.Data>
-                    <Path.RenderTransform>
-                        <TransformGroup>
-                            <TransformGroup.Children>
-                                <RotateTransform Angle="0" />
-                                <ScaleTransform ScaleX="1" ScaleY="1" />
-                            </TransformGroup.Children>
-                        </TransformGroup>
-                    </Path.RenderTransform>
-                </Path>
-            </Grid>
-        </DataTemplate>
+<Window.Resources>
 
-    </Window.Resources>
+    <DataTemplate x:Key="symbolTemplate">
+        <Grid>
+            <Grid Name="backgroundGrid" Width="24" Height="24" Visibility="Visible">
+                <Ellipse Fill="#FFE2DBDB" Name="Fill" Visibility="Visible"/>
+            </Grid>
+            <Path Stretch="Uniform" Fill="#FF0F0E0E" Width="24" Height="24" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
+                <Path.Data>
+                    <PathGeometry FillRule="Nonzero" Figures="M23.9296875,10.6165618896484L20.759765625,11.2200794219971 18.09375,
+                        13.0306243896484 16.283203125,15.6966400146484 15.6796875,18.8665618896484 16.283203125,
+                        22.0423431396484 18.09375,24.7259368896484 20.759765625,26.5540618896484 23.9296875,27.1634368896484 27.1025371551514,
+                        26.5540618896484 29.77734375,24.7259368896484 31.5966796875,22.0423431396484 32.203125,18.8665618896484 31.5966796875,
+                        15.6966400146484 29.77734375,13.0306243896484 27.1025371551514,11.2200794219971 23.9296875,10.6165618896484z M25.265625,
+                        7.35874938964844L26.6953125,9.86656188964844 29.3671875,8.64781188964844 29.765625,11.4837493896484 32.7421875,
+                        11.2728118896484 32.015625,14.1790618896484 34.921875,14.9759368896484 33.1875,17.4134368896484 35.578125,
+                        19.1478118896484 33.140625,20.7884368896484 34.640625,23.3665618896484 31.8046875,23.9759368896484 32.3203125,
+                        26.9759368896484 29.4375,26.5540618896484 28.921875,29.4837493896484 26.25,27.9603118896484 24.75,
+                        30.4681243896484 22.8046875,28.2181243896484 20.5078125,30.0228118896484 19.5703125,27.1634368896484 16.640625,
+                        28.0306243896484 16.875,25.1009368896484 13.875,24.7728118896484 15.140625,22.1478118896484 12.421875,
+                        20.7415618896484 14.5546875,18.6790618896484 12.4921875,16.5228118896484 15.2578125,15.3040618896484 14.203125,
+                        12.5384368896484 17.1328125,12.3978118896484 17.1328125,9.42124938964844 19.921875,10.4056243896484 21.046875,
+                        7.61656188964844 23.296875,9.49156188964844 25.265625,7.35874938964844z"/>
+                </Path.Data>
+                <Path.RenderTransform>
+                    <TransformGroup>
+                        <TransformGroup.Children>
+                            <RotateTransform Angle="0"/>
+                            <ScaleTransform ScaleX="1" 
+                            ScaleY="1"/>
+                        </TransformGroup.Children>
+                    </TransformGroup>
+                </Path.RenderTransform>
+            </Path>
+        </Grid>
+    </DataTemplate>
+</Window.Resources>
 
 <Grid>
-        <chart:SfChart  Width="400" Height="300" >
-    ...
-            
-        <syncfusion:ColumnSeries Interior="#777777" ItemsSource="{Binding Demands}" XBindingPath="Category" YBindingPath="Value">
+    <chart:SfChart Width="400" Height="300">
+    ...  
+        <syncfusion:ColumnSeries 
+            Interior="#777777" 
+            ItemsSource="{Binding Demands}" 
+            XBindingPath="Category" 
+            YBindingPath="Value">
             <syncfusion:ColumnSeries.AdornmentsInfo>
-                    <syncfusion:ChartAdornmentInfo ShowMarker="True" AdornmentsPosition="Top" SymbolTemplate="{StaticResource symbolTemplate}">
+                    <syncfusion:ChartAdornmentInfo 
+                        ShowMarker="True" 
+                        AdornmentsPosition="Top" 
+                        SymbolTemplate="{StaticResource symbolTemplate}">
                     </syncfusion:ChartAdornmentInfo>
             </syncfusion:ColumnSeries.AdornmentsInfo>
          </syncfusion:ColumnSeries>
-
     ...
-        </chart:SfChart>
+    </chart:SfChart>
 </Grid>
         
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        AdornmentsPosition = AdornmentsPosition.Top,
-        SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate,
-        Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-    };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    AdornmentsPosition = AdornmentsPosition.Top,
+    SymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate,
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
 
 {% endhighlight %}
 
diff --git a/wpf/Charts/Adornments/Positioning-Adornment.md b/wpf/Charts/Adornments/Positioning-Adornment.md
index b8a57a9b3b..9e176b7ea8 100644
--- a/wpf/Charts/Adornments/Positioning-Adornment.md
+++ b/wpf/Charts/Adornments/Positioning-Adornment.md
@@ -23,22 +23,30 @@ The following code example explains the positioning of adornments in the middle
 
 {% highlight xaml %}
 
-        <syncfusion:ChartAdornmentInfo ShowMarker="True" AdornmentsPosition="TopAndBottom" SymbolInterior="DarkGray"  Symbol="Ellipse">
-        </syncfusion:ChartAdornmentInfo>
+
+<syncfusion:ChartAdornmentInfo
+    ShowMarker="True"
+    AdornmentsPosition="TopAndBottom"
+    SymbolInterior="DarkGray"
+    Symbol="Ellipse">
+</syncfusion:ChartAdornmentInfo>
+
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries series = new ColumnSeries();
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowMarker = true,
-                Symbol = ChartSymbol.Ellipse,
-                SymbolInterior = new SolidColorBrush(Colors.DarkGray),
-                AdornmentsPosition=AdornmentsPosition.TopAndBottom
-            };
-        series.AdornmentsInfo = adornmentInfo;
+ColumnSeries series = new ColumnSeries();
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowMarker = true,
+    Symbol = ChartSymbol.Ellipse,
+    SymbolInterior = new SolidColorBrush(Colors.DarkGray),
+    AdornmentsPosition = AdornmentsPosition.TopAndBottom
+};
+
+series.AdornmentsInfo = adornmentInfo;
 
 {% endhighlight %}
 
@@ -67,17 +75,17 @@ The following code sample illustrates the center position of data marker labels,
 
 {% highlight xaml %}
 
-        <chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Center"/>
+<chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Center"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                LabelPosition =AdornmentsLabelPosition.Center
-            };      
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition =AdornmentsLabelPosition.Center
+};  
 
 {% endhighlight %}
 
@@ -93,17 +101,17 @@ The following code sample illustrates the inner position of data marker labels,
 
 {% highlight xaml %}
 
-        <chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Inner"/>
+<chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Inner"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                LabelPosition =AdornmentsLabelPosition.Inner
-            };      
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition =AdornmentsLabelPosition.Inner
+};      
 
 {% endhighlight %}
 
@@ -120,17 +128,17 @@ The following code sample illustrates the outer position of data marker labels,
 
 {% highlight xaml %}
 
-        <chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Outer"/>
+<chart:ChartAdornmentInfo  ShowLabel="True" LabelPosition="Outer"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowLabel = true,
-                LabelPosition =AdornmentsLabelPosition.Outer
-            };      
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition =AdornmentsLabelPosition.Outer
+};      
 
 {% endhighlight %}
 
diff --git a/wpf/Charts/Animation.md b/wpf/Charts/Animation.md
index 3589a6f61b..cb7e021c1b 100644
--- a/wpf/Charts/Animation.md
+++ b/wpf/Charts/Animation.md
@@ -40,11 +40,12 @@ The following example shows the Animation feature for chart series.
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-<syncfusion:ColumnSeries EnableAnimation="True" AnimationDuration="00:00:03" 
-
-XBindingPath="Category" YBindingPath="Count" ItemsSource="{Binding}"/>
-
+    <syncfusion:ColumnSeries 
+        EnableAnimation="True" 
+        AnimationDuration="00:00:03"
+        XBindingPath="Category"
+        YBindingPath="Count"
+        ItemsSource="{Binding Data}"/>
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -53,17 +54,11 @@ XBindingPath="Category" YBindingPath="Count" ItemsSource="{Binding}"/>
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
-        ItemsSource = new ViewModel().Data,
-
-        XBindingPath = "Category",
-
-        YBindingPath = "Count",
-
-        EnableAnimation = true,
-
-        AnimationDuration = new TimeSpan(00, 00, 03)
-
+    ItemsSource = new ViewModel().Data,
+    XBindingPath = "Category",
+    YBindingPath = "Count",
+    EnableAnimation = true,
+    AnimationDuration = new TimeSpan(00, 00, 03)
 };
 
 chart.Series.Add(columnSeries);
diff --git a/wpf/Charts/Annotations.md b/wpf/Charts/Annotations.md
index 13db7bc29a..e55247bec7 100644
--- a/wpf/Charts/Annotations.md
+++ b/wpf/Charts/Annotations.md
@@ -24,21 +24,26 @@ You can create an instance for any type of Annotation and add it to [`Annotation
 
 {% highlight xml %}
 
-            <chart:SfChart.Annotations>            
-                    <chart:EllipseAnnotation  X1="1.5" Y1="20" Text="Ellipse" X2="3" Y2="23" >
-                    </chart:EllipseAnnotation>                           
-            </chart:SfChart.Annotations>
+<chart:SfChart.Annotations>
+    <chart:EllipseAnnotation  
+        X1="1.5" 
+        Y1="20" 
+        Text="Ellipse" 
+        X2="3" 
+        Y2="23">
+    </chart:EllipseAnnotation>
+</chart:SfChart.Annotations>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        EllipseAnnotation annotation=new EllipseAnnotation()
-        {
-            X1 = 1.5, Y1 = 20,
-            X2 = 3, Y2 = 23,
-            Text = "Ellipse"
-        };
+EllipseAnnotation annotation=new EllipseAnnotation()
+{
+    X1 = 1.5, Y1 = 20,
+    X2 = 3, Y2 = 23,
+    Text = "Ellipse"
+};
 
 chart.Annotations.Add(annotation);
 
@@ -61,23 +66,30 @@ To position the annotation based on axis, set the X1 and Y1, X2 and Y2 propertie
 
 {% highlight xml %}
        
-         <chart:RectangleAnnotation  X1="1.25" Y1="1300" FontSize="10" FontFamily="Calibri" Text="Axis Value" X2="2.25" Y2="1500" CoordinateUnit="Axis">
-                        </chart:RectangleAnnotation>
+<chart:RectangleAnnotation
+    X1="1.25"
+    Y1="1300"
+    X2="2.25"
+    Y2="1500"                   
+    Text="Axis Value"
+    FontSize="10"
+    FontFamily="Calibri"
+    CoordinateUnit="Axis">  
+</chart:RectangleAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        RectangleAnnotation annotation=new RectangleAnnotation()
-        {
-            X1 = 1.25, Y1 = 1300,
-            X2 = 2.25, Y2 = 1500,
-            Text = "Axis Value",
-            CoordinateUnit=CoordinateUnit.Axis,
-            Text="Axis Value"
-        };
-
-chart.Annotations.Add(annotation);
+RectangleAnnotation annotation = new RectangleAnnotation()
+{
+    X1 = 1.25,
+    Y1 = 1300,
+    X2 = 2.25,
+    Y2 = 1500,
+    Text = "Axis Value",
+    CoordinateUnit = CoordinateUnit.Axis,
+};
 
 {% endhighlight %}
 
@@ -94,20 +106,31 @@ To position based on the pixel values you have to set the CoordinateUnit as Pixe
 
 {% highlight xml %}
 
-            <chart:RectangleAnnotation  X1="50" Y1="150" Text="Pixel Value" X2="100" Y2="125" CoordinateUnit="Pixel">
-                    </chart:RectangleAnnotation>
+
+<chart:RectangleAnnotation
+    X1="50"
+    Y1="150"
+    X2="100"
+    Y2="125"
+    Text="Pixel Value"
+    CoordinateUnit="Pixel">
+</chart:RectangleAnnotation>
+
             
 {% endhighlight %}
 
 {% highlight c# %}
 
-        RectangleAnnotation annotation=new RectangleAnnotation()
-        {
-            X1 = 50, Y1 = 150,
-            X2 = 100, Y2 = 125,
-            CoordinateUnit=CoordinateUnit.Pixel,
-            Text="Pixel Value"
-        };
+
+RectangleAnnotation annotation = new RectangleAnnotation()
+{
+    X1 = 50,
+    Y1 = 150,
+    X2 = 100,
+    Y2 = 125,
+    CoordinateUnit = CoordinateUnit.Pixel,
+    Text = "Pixel Value"
+};
 
 chart.Annotations.Add(annotation);
 
@@ -125,101 +148,142 @@ You can also add annotation for a particular axis when there is multiple axes us
 
 {% highlight xaml %}
 
-        <chart:SfChart Width="400" Height="400" BorderBrush="Transparent">
-            <chart:SfChart.RowDefinitions>
-                <chart:ChartRowDefinition></chart:ChartRowDefinition>
-                <chart:ChartRowDefinition></chart:ChartRowDefinition>
-            </chart:SfChart.RowDefinitions>
-            <!--PrimaryAxis-->
-            <chart:SfChart.PrimaryAxis>
-                <chart:CategoryAxis  FontSize="11" ShowGridLines="False"/>
-            </chart:SfChart.PrimaryAxis>
-            <chart:SfChart.SecondaryAxis>
-                <chart:NumericalAxis x:Name="ColumnAxis" Maximum="2000" FontSize="11" Interval="500" chart:ChartBase.Row="0" ShowGridLines="False"/>
-            </chart:SfChart.SecondaryAxis>
-
-            <chart:SfChart.Annotations>
-                <chart:AnnotationCollection>
-                    <chart:RectangleAnnotation YAxisName="ScatterAxis" Fill="LightGray" Stroke="DarkGray" Opacity="0.5" X1="0.5" Y1="900" X2="2.5" Y2="1600" >
-                    </chart:RectangleAnnotation>
-
-                    <chart:HorizontalLineAnnotation YAxisName="ColumnAxis" Stroke="DarkGray" X1="-0.5" X2="3.5" Y1="1700" LineCap="Arrow"></chart:HorizontalLineAnnotation>
-                </chart:AnnotationCollection>
-            </chart:SfChart.Annotations>
-
-            <chart:ColumnSeries  Interior="#777777" ItemsSource="{Binding CategoricalData}" XBindingPath="Category" YBindingPath="Plastic">
-            </chart:ColumnSeries>
-
-            <chart:ScatterSeries Interior="#777777" ItemsSource="{Binding CategoricalData}" XBindingPath="Category" YBindingPath="Plastic">
-                <chart:ScatterSeries.YAxis>
-                    <chart:NumericalAxis x:Name="ScatterAxis" Maximum="2000" FontSize="11" Interval="500" chart:ChartBase.Row="1" ShowGridLines="False"/>
-                </chart:ScatterSeries.YAxis>
-            </chart:ScatterSeries>
-        </chart:SfChart>
+<chart:SfChart Width="400" Height="400" BorderBrush="Transparent">
+    <chart:SfChart.RowDefinitions>
+        <chart:ChartRowDefinition/>
+        <chart:ChartRowDefinition/>
+    </chart:SfChart.RowDefinitions>
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis FontSize="11" ShowGridLines="False"/>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis
+            x:Name="ColumnAxis"
+            Maximum="2000"
+            FontSize="11"
+            Interval="500"
+            chart:ChartBase.Row="0"
+            ShowGridLines="False"/>
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:SfChart.Annotations>
+        <chart:AnnotationCollection>
+            <chart:RectangleAnnotation
+                YAxisName="ScatterAxis"
+                Fill="LightGray"
+                Stroke="DarkGray"
+                Opacity="0.5"
+                X1="0.5"
+                Y1="900"
+                X2="2.5"
+                Y2="1600">
+            </chart:RectangleAnnotation>
+
+            <chart:HorizontalLineAnnotation
+                YAxisName="ColumnAxis"
+                Stroke="DarkGray"
+                X1="-0.5"
+                X2="3.5"
+                Y1="1700"
+                LineCap="Arrow">
+            </chart:HorizontalLineAnnotation>
+        </chart:AnnotationCollection>
+    </chart:SfChart.Annotations>
+
+    <chart:ColumnSeries
+        Interior="#777777"
+        ItemsSource="{Binding CategoricalData}"
+        XBindingPath="Category"
+        YBindingPath="Plastic"/>
+
+    <chart:ScatterSeries
+        Interior="#777777"
+        ItemsSource="{Binding CategoricalData}"
+        XBindingPath="Category"
+        YBindingPath="Plastic">
+        <chart:ScatterSeries.YAxis>
+            <chart:NumericalAxis
+                x:Name="ScatterAxis"
+                Maximum="2000"
+                FontSize="11"
+                Interval="500"
+                chart:ChartBase.Row="1"
+                ShowGridLines="False"/>
+        </chart:ScatterSeries.YAxis>
+    </chart:ScatterSeries>
+</chart:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfChart chart = new SfChart();
-            chart.RowDefinitions.Add(new ChartRowDefinition());
-            chart.RowDefinitions.Add(new ChartRowDefinition());
-            chart.PrimaryAxis = new CategoryAxis();
-            chart.SecondaryAxis = new NumericalAxis();
-            ChartBase.SetRow(chart.SecondaryAxis, 0);
-
-            HorizontalLineAnnotation annotation = new HorizontalLineAnnotation()
-            {
-                X1 = -0.5,
-                Y1 = 1700,
-                X2 = 3.5,
-                YAxisName = "ColumnAxis",
-                LineCap=LineCap.Arrow,
-                Stroke=new SolidColorBrush(Colors.DarkGray)
-            };
-
-            RectangleAnnotation rect = new RectangleAnnotation()
-            {
-                YAxisName = "ScatterAxis",
-                Fill = new SolidColorBrush(Colors.LightGray),
-                Stroke = new SolidColorBrush(Colors.DarkGray),
-                Opacity = 0.5,
-                X1 = 0.5,
-                Y1 = 900,
-                X2 = 2.5,
-                Y2 = 1600
-            };
-
-            ColumnSeries columnSeries = new ColumnSeries()
-            {
-                ItemsSource = new CategoricalViewModel().CategoricalData,
-                XBindingPath = "Category",
-                YBindingPath = "Plastic",
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))               
-            };
-
-            ScatterSeries scatterSeries = new ScatterSeries()
-            {
-                ItemsSource = new CategoricalViewModel().CategoricalData,
-                XBindingPath = "Category",
-                YBindingPath = "Plastic",
-                Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))               
-            };
-
-            NumericalAxis axis = new NumericalAxis()
-            {
-                Name = "ScatterAxis",
-                Maximum = 2000,
-                FontSize = 11,
-                Interval = 500,
-                ShowGridLines = false
-            };
-
-            scatterSeries.YAxis = axis;
-            ChartBase.SetRow(axis, 1);
-
-        chart.Series.Add(columnSeries);
-        chart.Series.Add(scatterSeries);
+           SfChart chart = new SfChart();
+
+chart.RowDefinitions.Add(new ChartRowDefinition());
+chart.RowDefinitions.Add(new ChartRowDefinition());
+
+chart.PrimaryAxis = new CategoryAxis();
+
+chart.SecondaryAxis = new NumericalAxis();
+ChartBase.SetRow(chart.SecondaryAxis, 0);
+
+HorizontalLineAnnotation annotation = new HorizontalLineAnnotation()
+{
+    X1 = -0.5,
+    Y1 = 1700,
+    X2 = 3.5,
+    YAxisName = "ColumnAxis",
+    LineCap = LineCap.Arrow,
+    Stroke = new SolidColorBrush(Colors.DarkGray)
+};
+
+RectangleAnnotation rect = new RectangleAnnotation()
+{
+    YAxisName = "ScatterAxis",
+    Fill = new SolidColorBrush(Colors.LightGray),
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    Opacity = 0.5,
+    X1 = 0.5,
+    Y1 = 900,
+    X2 = 2.5,
+    Y2 = 1600
+};
+
+ColumnSeries columnSeries = new ColumnSeries()
+{
+    ItemsSource = new CategoricalViewModel().CategoricalData,
+    XBindingPath = "Category",
+    YBindingPath = "Plastic",
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+ScatterSeries scatterSeries = new ScatterSeries()
+{
+    ItemsSource = new CategoricalViewModel().CategoricalData,
+    XBindingPath = "Category",
+    YBindingPath = "Plastic",
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
+};
+
+NumericalAxis axis = new NumericalAxis()
+{
+    Name = "ScatterAxis",
+    Maximum = 2000,
+    FontSize = 11,
+    Interval = 500,
+    ShowGridLines = false
+};
+
+scatterSeries.YAxis = axis;
+ChartBase.SetRow(axis, 1);
+
+chart.Annotations.Add(rect);
+chart.Annotations.Add(annotation);
+
+chart.Series.Add(columnSeries);
+chart.Series.Add(scatterSeries);
 
 {% endhighlight %}
 
@@ -235,21 +299,20 @@ You can also add annotation for a particular axis when there is multiple axes us
 
 {% highlight xml %}
 
-        <chart:SfChart.Annotations>
-          <chart:TextAnnotation Text="Annotation" X1="2.5" Y1="1400" >
-                    </chart:TextAnnotation>
-        </chart:SfChart.Annotations>
+<chart:SfChart.Annotations>
+    <chart:TextAnnotation Text="Annotation" X1="2.5" Y1="1400"/>
+</chart:SfChart.Annotations>
             
 {% endhighlight %}
 
 {% highlight c# %}
 
-        TextAnnotation annotation=new TextAnnotation()
-        {
-            X1 = 2.5, 
-            Y1 = 1400,
-            Text="Annotation"
-        };
+TextAnnotation annotation=new TextAnnotation()
+{
+    X1 = 2.5, 
+    Y1 = 1400,
+    Text="Annotation"
+};
 
 chart.Annotations.Add(annotation);
 
@@ -288,26 +351,36 @@ The following properties are used to customize the text:
 
 {% highlight xml %}
 
-    <chart:TextAnnotation Angle="90" EnableEditing="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" FontWeight="Bold"
-    Foreground="Black"  Text="Annotation" X1="3.5" Y1="500" >
+
+<chart:TextAnnotation
+    Angle="90"
+    EnableEditing="True"
+    HorizontalAlignment="Stretch"
+    VerticalAlignment="Stretch"
+    FontWeight="Bold"
+    Foreground="Black"
+    Text="Annotation"
+    X1="3.5"
+    Y1="500"/>
+
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-       TextAnnotation annotation = new TextAnnotation()
-            {
-                X1 = 3.5,
-                Y1 = 500,
-                Text = "Annotation",
-                EnableEditing=true,
-                Foreground=new SolidColorBrush(Colors.Black),
-                FontStyle=FontStyles.Bold,
-                HorizontalAlignment=HorizontalAlignment.Stretch,
-                VerticalAlignment=VerticalAlignment.Stretch
-            };
+TextAnnotation annotation = new TextAnnotation()
+{
+    X1 = 3.5,
+    Y1 = 500,
+    Text = "Annotation",
+    EnableEditing=true,
+    Foreground=new SolidColorBrush(Colors.Black),
+    FontStyle=FontStyles.Bold,
+    HorizontalAlignment=HorizontalAlignment.Stretch,
+    VerticalAlignment=VerticalAlignment.Stretch
+};
 
-    chart.Annotations.Add(annotation);
+chart.Annotations.Add(annotation);
 
 {% endhighlight %}
 
@@ -353,21 +426,26 @@ The [`EllipseAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 
 {% highlight xml %}
 
-     <chart:EllipseAnnotation  X1="1.5" Y1="1400" X2="2.5" Y2="1600" Text="Ellipse">
-                    </chart:EllipseAnnotation>
+<chart:EllipseAnnotation
+    X1="1.5"
+    Y1="1400"
+    X2="2.5"
+    Y2="1600"
+    Text="Ellipse">
+</chart:EllipseAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        EllipseAnnotation ellipse = new EllipseAnnotation()
-            {
-                X1 = 1.5,
-                Y1 = 1400,
-                X2 = 2.5,
-                Y2 = 1600,
-                Text = "Ellipse"
-            };
+EllipseAnnotation ellipse = new EllipseAnnotation()
+{
+    X1 = 1.5,
+    Y1 = 1400,
+    X2 = 2.5,
+    Y2 = 1600,
+    Text = "Ellipse"
+};
 
 {% endhighlight %}
 
@@ -383,21 +461,27 @@ The [`RectangleAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
 
 {% highlight xml %}
 
-        <chart:RectangleAnnotation  X1="2.5" Y1="1500" X2="3.5" Y2="1750" Text="Rectangle">
-        </chart:RectangleAnnotation>
+
+<chart:RectangleAnnotation
+    X1="2.5"
+    Y1="1500"
+    X2="3.5"
+    Y2="1750"
+    Text="Rectangle">
+</chart:RectangleAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        RectangleAnnotation rectangle = new RectangleAnnotation()
-            {
-                X1 = 2.5,
-                Y1 = 1500,
-                X2 = 3.5,
-                Y2 = 1750,
-                Text = "Rectangle"
-            };
+RectangleAnnotation rectangle = new RectangleAnnotation()
+{
+    X1 = 2.5,
+    Y1 = 1500,
+    X2 = 3.5,
+    Y2 = 1750,
+    Text = "Rectangle"
+};
 
 {% endhighlight %}
 
@@ -413,21 +497,26 @@ The [`LineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha
 
 {% highlight xml %}
 
-        <chart:LineAnnotation  X1="1.5" Y1="1150" X2="3.5" Y2="1600" Text="Line">
-        </chart:LineAnnotation>
+<chart:LineAnnotation  
+    X1="1.5" 
+    Y1="1150" 
+    X2="3.5" 
+    Y2="1600" 
+    Text="Line">
+</chart:LineAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        LineAnnotation line = new LineAnnotation()
-            {
-                X1 = 1.5,
-                Y1 = 1150,
-                X2 = 3.5,
-                Y2 = 1600,
-                Text = "Line"
-            };
+LineAnnotation line = new LineAnnotation()
+{
+    X1 = 1.5,
+    Y1 = 1150,
+    X2 = 3.5,
+    Y2 = 1600,
+    Text = "Line"
+};
 
 {% endhighlight %}
 
@@ -443,26 +532,31 @@ The [`VerticalLineAnnotation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.
 
 {% highlight xml %}
 
-        <chart:HorizontalLineAnnotation  X1="-0.5" Y1="1500" X2="4.5">
-            </chart:HorizontalLineAnnotation>
+<chart:HorizontalLineAnnotation
+    X1="-0.5"
+    Y1="1500"
+    X2="4.5">
+</chart:HorizontalLineAnnotation>
 
-        <chart:VerticalLineAnnotation X1="2.5"></chart:VerticalLineAnnotation>
+<chart:VerticalLineAnnotation
+    X1="2.5">
+</chart:VerticalLineAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        HorizontalLineAnnotation hor = new HorizontalLineAnnotation()
-            {
-                X1 = -0.5,
-                Y1 = 1500,
-                X2 = 4.5,
-            };
+HorizontalLineAnnotation hor = new HorizontalLineAnnotation()
+{
+    X1 = -0.5,
+    Y1 = 1500,
+    X2 = 4.5,
+};
 
-        VerticalLineAnnotation ver = new VerticalLineAnnotation()
-            {
-                X1 = 2.5
-            };
+VerticalLineAnnotation ver = new VerticalLineAnnotation()
+{
+    X1 = 2.5
+};
 
 {% endhighlight %}
 
@@ -489,22 +583,28 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/
 
 {% highlight xml %}
 
-       <chart:LineAnnotation  X1="0.5" Y1="1500" X2="3.5" Y2="1500" LineCap="Arrow" Text="Line">
-    </chart:LineAnnotation>
+<chart:LineAnnotation
+    X1="0.5"
+    Y1="1500"
+    X2="3.5"
+    Y2="1500"
+    LineCap="Arrow"
+    Text="Line">
+</chart:LineAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        LineAnnotation ellipse = new LineAnnotation()
-            {
-                X1 = 0.5,
-                Y1 = 1500,
-                X2 = 3.5,
-                Y2 = 1500,
-                Text = "Line",
-                LineCap=LineCap.Arrow
-            };
+LineAnnotation ellipse = new LineAnnotation()
+{
+    X1 = 0.5,
+    Y1 = 1500,
+    X2 = 3.5,
+    Y2 = 1500,
+    Text = "Line",
+    LineCap = LineCap.Arrow
+};
 
 {% endhighlight %}
 
@@ -521,28 +621,35 @@ To display single headed arrow, set the [`LineCap`](https://help.syncfusion.com/
 
 {% highlight xml %}
 
-        <chart:HorizontalLineAnnotation ShowAxisLabel="True" X1="-0.5" Y1="1500" X2="4.5">
-                    </chart:HorizontalLineAnnotation>
+<chart:HorizontalLineAnnotation
+    ShowAxisLabel="True"
+    X1="-0.5"
+    Y1="1500"
+    X2="4.5">
+</chart:HorizontalLineAnnotation>
 
-        <chart:VerticalLineAnnotation ShowAxisLabel="True" X1="2.5"></chart:VerticalLineAnnotation>
+<chart:VerticalLineAnnotation
+    ShowAxisLabel="True"
+    X1="2.5">
+</chart:VerticalLineAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        HorizontalLineAnnotation hor = new HorizontalLineAnnotation()
-            {
-                X1 = -0.5,
-                Y1 = 1500,
-                X2 = 4.5,
-                ShowAxisLabel=true               
-            };
+HorizontalLineAnnotation hor = new HorizontalLineAnnotation()
+{
+    X1 = -0.5,
+    Y1 = 1500,
+    X2 = 4.5,
+    ShowAxisLabel=true               
+};
 
-        VerticalLineAnnotation ver = new VerticalLineAnnotation()
-            {
-                X1 = 2.5,
-                ShowAxisLabel=true
-            };
+VerticalLineAnnotation ver = new VerticalLineAnnotation()
+{
+    X1 = 2.5,
+    ShowAxisLabel=true
+};
 
 {% endhighlight %}
 
@@ -563,24 +670,32 @@ The text alignment can be changed using [`HorizontalTextAlignment`](https://help
 {% tabs %}
 {% highlight xaml %}
 
-        <chart:EllipseAnnotation  X1="1.5" Y1="1400" X2="2.5" Y2="1600" FontWeight="Bold"  HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Ellipse">
-        </chart:EllipseAnnotation> 
+<chart:EllipseAnnotation
+    X1="1.5"
+    Y1="1400"
+    X2="2.5"
+    Y2="1600"
+    FontWeight="Bold"
+    HorizontalTextAlignment="Center"
+    VerticalTextAlignment="Center"
+    Text="Ellipse">
+</chart:EllipseAnnotation> 
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        EllipseAnnotation ellipse = new EllipseAnnotation()
-            {
-                X1 = 1.5,
-                Y1 = 1400,
-                X2 = 2.5,
-                Y2 = 1600,
-                HorizontalTextAlignment =HorizontalAlignment.Center,
-                VerticalTextAlignment = VerticalAlignment.Center,
-                FontStyle=FontStyles.Bold,
-                Text = "Ellipse"               
-            };
+EllipseAnnotation ellipse = new EllipseAnnotation()
+{
+    X1 = 1.5,
+    Y1 = 1400,
+    X2 = 2.5,
+    Y2 = 1600,
+    HorizontalTextAlignment = HorizontalAlignment.Center,
+    VerticalTextAlignment = VerticalAlignment.Center,
+    FontStyle = FontStyles.Bold,
+    Text = "Ellipse"
+};
 
 {% endhighlight %}
 
@@ -607,32 +722,45 @@ SfChart allows customization of shape annotation using the following properties.
 
 {% highlight xaml %}
 
-         <chart:HorizontalLineAnnotation  X1="-0.5" StrokeThickness="3" StrokeDashCap="Square" StrokeEndLineCap="Square" StrokeStartLineCap="Square"
-                          Stroke="DarkGray" Fill="LightGray" StrokeDashArray="1,3" Y1="1600" X2="4.5" Y2="1600" Text="Line">
-        </chart:HorizontalLineAnnotation>                
+<chart:HorizontalLineAnnotation
+    X1="-0.5"
+    X2="4.5"
+    Y1="1600"
+    Y2="1600"
+    StrokeThickness="3"
+    Stroke="DarkGray"
+    Fill="LightGray"
+    StrokeDashArray="1,3"
+    StrokeDashCap="Square"
+    StrokeStartLineCap="Square"
+    StrokeEndLineCap="Square"
+    Text="Line">    
+</chart:HorizontalLineAnnotation>     
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfChart chart = new SfChart();
-
-            HorizontalLineAnnotation annotation = new HorizontalLineAnnotation()
-            {
+SfChart chart = new SfChart();
+
+HorizontalLineAnnotation annotation = new HorizontalLineAnnotation()
+{
+    X1 = -0.5,
+    X2 = 4.5,
+    Y1 = 1600,
+    Y2 = 1600,
+    StrokeThickness = 3,
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    Fill = new SolidColorBrush(Colors.LightGray),
+    StrokeDashArray = new DoubleCollection() { 1, 3 },
+    StrokeStartLineCap = PenLineCap.Square,
+    StrokeEndLineCap = PenLineCap.Square,
+    StrokeDashCap = PenLineCap.Round,
+    Text = "Line"
+};
 
-                X1 = -0.5,
-                X2 = 4.5,
-                Y1 = 1500,
-                StrokeThickness = 3,
-                Stroke = new SolidColorBrush(Colors.DarkGray),
-                Fill = new SolidColorBrush(Colors.LightGray),
-                StrokeDashArray = new DoubleCollection() { 1, 3 },
-                StrokeStartLineCap = PenLineCap.Square,
-                StrokeEndLineCap = PenLineCap.Square,
-                StrokeDashCap = PenLineCap.Round
-            };
+chart.Annotations.Add(annotation);
 
-            chart.Annotations.Add(annotation);
 
 {% endhighlight %}
 
@@ -656,25 +784,32 @@ The following API’s are used in ImageAnnotation.
 
 {% highlight xaml %}
 
-        <syncfusion:ImageAnnotation  Text="Annotation" HorizontalTextAlignment="Center" 
-            VerticalTextAlignment="Top" ImageSource="Images\Graduate.png" X1="2.5" Y1="1200" X2="3.6" Y2="1700" >
-        </syncfusion:ImageAnnotation>                       
+<syncfusion:ImageAnnotation
+    Text="Annotation"
+    HorizontalTextAlignment="Center"
+    VerticalTextAlignment="Top"
+    ImageSource="Images\Graduate.png"
+    X1="2.5"
+    Y1="1200"
+    X2="3.6"
+    Y2="1700">
+</syncfusion:ImageAnnotation>                      
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ImageAnnotation annotation = new ImageAnnotation()
-            {
-                Text = "Annotation",
-                HorizontalTextAlignment = HorizontalAlignment.Center,
-                VerticalTextAlignment = VerticalAlignment.Top,
-                X1 = 2.5,
-                Y1 = 1200,
-                X2 = 3.6,
-                Y2 = "1700",
-                ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute))
-            };
+ImageAnnotation annotation = new ImageAnnotation()
+{
+    Text = "Annotation",
+    HorizontalTextAlignment = HorizontalAlignment.Center,
+    VerticalTextAlignment = VerticalAlignment.Top,
+    X1 = 2.5,
+    Y1 = 1200,
+    X2 = 3.6,
+    Y2 = "1700",
+    ImageSource = new BitmapImage(new Uri(@"Images\Graduate.png", UriKind.RelativeOrAbsolute))
+};
 
 {% endhighlight %}
 
@@ -704,25 +839,32 @@ The following code example demonstrates the dragging the rectangle annotation.
 
 {% highlight xaml %}
 
-        <chart:RectangleAnnotation  X1="0.6" CanDrag="True" X2="2.2" Y2="1500" Y1="1800" 
-                Stroke="DarkGray" Fill="LightGray" Opacity="0.5">
-        </chart:RectangleAnnotation>
+<chart:RectangleAnnotation
+    X1="0.6"
+    Y1="1800"
+    X2="2.2"
+    Y2="1500"
+    CanDrag="True"
+    Stroke="DarkGray"
+    Fill="LightGray"
+    Opacity="0.5">
+</chart:RectangleAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        RectangleAnnotation an = new RectangleAnnotation()
-            {
-                X1 = 0.6,
-                Y1 = 1800,
-                X2 = 2.2,
-                Y2 = 1500,
-                Fill = new SolidColorBrush(Colors.LightGray),
-                Stroke = new SolidColorBrush(Colors.DarkGray),
-                CanDrag = true,
-                Opacity = 0.5
-            };
+RectangleAnnotation an = new RectangleAnnotation()
+{
+    X1 = 0.6,
+    Y1 = 1800,
+    X2 = 2.2,
+    Y2 = 1500,
+    Fill = new SolidColorBrush(Colors.LightGray),
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    CanDrag = true,
+    Opacity = 0.5
+};
 
 {% endhighlight %}
 
@@ -741,29 +883,37 @@ You can resize the annotation by enabling [`CanResize`](https://help.syncfusion.
 
 {% highlight xaml %}
 
-        <chart:RectangleAnnotation  X1="0.6" CanResize="True" X2="2.2" Y2="1500" Y1="1800" 
-            Stroke="DarkGray" Fill="LightGray" Opacity="0.5" >
-        </chart:RectangleAnnotation>
+<chart:RectangleAnnotation
+    X1="0.6"
+    Y1="1800"
+    X2="2.2"
+    Y2="1500"
+    CanResize="True"
+    Stroke="DarkGray"
+    Fill="LightGray"
+    Opacity="0.5">
+</chart:RectangleAnnotation>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-         RectangleAnnotation an = new RectangleAnnotation()
-            {
-                X1 = 0.6,
-                Y1 = 1800,
-                X2 = 2.2,
-                Y2 = 1500,
-                Fill = new SolidColorBrush(Colors.LightGray),
-                Stroke = new SolidColorBrush(Colors.DarkGray),
-                CanDrag = true,
-                Opacity = 0.5
-            };
+RectangleAnnotation an = new RectangleAnnotation()
+{
+    X1 = 0.6,
+    Y1 = 1800,
+    X2 = 2.2,
+    Y2 = 1500,
+    Fill = new SolidColorBrush(Colors.LightGray),
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    CanDrag = true,
+    Opacity = 0.5,
+    CanResize = true
+};
 
-    {% endhighlight %}
+{% endhighlight %}
 
-    {% endtabs %}
+{% endtabs %}
 
 ![Eesizing Annotation in WPF Chart](Annotation_images/wpf-chart-resize-annotation.jpeg)
 
@@ -785,27 +935,34 @@ The following code example demonstrates the default tooltip.
 
 {% highlight xaml %}
 
-        <chart:EllipseAnnotation  X1="2.5" Y1="1500" X2="3.6" Y2="1680" 
-            ShowToolTip="True" ToolTipContent="Annotation">
-        </chart:EllipseAnnotation>
+<chart:EllipseAnnotation
+    X1="2.5"
+    Y1="1500"
+    X2="3.6"
+    Y2="1680"
+    ShowToolTip="True"
+    ToolTipContent="Annotation">
+</chart:EllipseAnnotation>
             
 {% endhighlight %}
 
 {% highlight c# %}
 
-        SfChart chart = new SfChart();
-        EllipseAnnotation annotation=new EllipseAnnotation ()
-        {
-            X1 = 2.5, 
-            Y1 = 1500, 
-            X2 = 3.6, 
-            Y2 = 1680,
-            Stroke = new SolidColorBrush(Colors.DarkGray),
-            Fill = new SolidColorBrush (Colors.LightGray),
-            ShowToolTip = true ,
-            ToolTipContent = "Annotation"
-        };
-        chart.Annotations.Add(annotation);
+SfChart chart = new SfChart();
+
+EllipseAnnotation annotation = new EllipseAnnotation()
+{
+    X1 = 2.5,
+    Y1 = 1500,
+    X2 = 3.6,
+    Y2 = 1680,
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    Fill = new SolidColorBrush(Colors.LightGray),
+    ShowToolTip = true,
+    ToolTipContent = "Annotation"
+};
+
+chart.Annotations.Add(annotation);
 
 {% endhighlight %}
 
@@ -820,38 +977,54 @@ The default appearance of the Tooltip can be changed using [`TooltipTemplate`](h
 {% tabs %}
 {% highlight xaml %}
 
-    <syncfusion:SfChart x:Name="chart">
-        <syncfusion:SfChart.Resources>
-                <DataTemplate  x:Key="tooltipTemplate">
-                    <Border CornerRadius="5" BorderBrush="DarkGray"  BorderThickness="1">                     
-                        <TextBlock FontSize="11" Text="Annotation"                                   
-                                   Foreground="Black"/>
-                    </Border>
-                 </DataTemplate>
-        </syncfusion:SfChart.Resources>
-        <syncfusion:SfChart.Annotations>
-            <syncfusion:EllipseAnnotation  X1="2.5" Y1="1500" Stroke="DarkGray" Fill="LightGray" ShowToolTip="True"    X2="3.6" Y2="1680" ToolTipTemplate="{StaticResource tooltipTemplate}">
-            </syncfusion:EllipseAnnotation>
-        </syncfusion:SfChart.Annotations>
-    </syncfusion:SfChart>
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <DataTemplate x:Key="tooltipTemplate">
+            <Border
+        CornerRadius="5"
+        BorderBrush="DarkGray"
+        BorderThickness="1">
+                <TextBlock
+            FontSize="11"
+            Text="Annotation"
+            Foreground="Black" />
+            </Border>
+        </DataTemplate>
+    </syncfusion:SfChart.Resources>
+
+    <syncfusion:SfChart.Annotations>
+        <syncfusion:EllipseAnnotation
+            X1="2.5"
+            Y1="1500"
+            X2="3.6"
+            Y2="1680"
+            Stroke="DarkGray"
+            Fill="LightGray"
+            ShowToolTip="True"
+            ToolTipTemplate="{StaticResource tooltipTemplate}">
+        </syncfusion:EllipseAnnotation>
+    </syncfusion:SfChart.Annotations>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        SfChart chart = new SfChart();
-        EllipseAnnotation annotation=new EllipseAnnotation ()
-        {
-            X1 = 2.5, 
-            Y1 = 1500, 
-            X2 = 3.6, 
-            Y2 = 1680,
-            Stroke = new SolidColorBrush(Colors.DarkGray),
-            Fill = new SolidColorBrush (Colors.LightGray),
-            ShowToolTip = true ,
-            ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate
-        };
-        chart.Annotations.Add(annotation);
+SfChart chart = new SfChart();
+
+EllipseAnnotation annotation=new EllipseAnnotation ()
+{
+    X1 = 2.5, 
+    Y1 = 1500, 
+    X2 = 3.6, 
+    Y2 = 1680,
+    Stroke = new SolidColorBrush(Colors.DarkGray),
+    Fill = new SolidColorBrush (Colors.LightGray),
+    ShowToolTip = true ,
+    ToolTipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate
+};
+
+chart.Annotations.Add(annotation);
 
 {% endhighlight %}
 
@@ -868,29 +1041,34 @@ SfChart allows you to clip the annotation if the annotation crosses the boundary
 
 {% highlight xaml %}
 
-        <chart:SfChart.Annotations>            
-                  
-            <chart:ImageAnnotation ImageSource="Images\Graduate.png"  X1="6" Y1="16" X2="9" Y2="18"     EnableClipping="True"/>
-
-        </chart:SfChart.Annotations>
+<chart:SfChart.Annotations>
+    <chart:ImageAnnotation
+        ImageSource="Images\Graduate.png"
+        X1="6"
+        Y1="16"
+        X2="9"
+        Y2="18"
+        EnableClipping="True">
+    </chart:ImageAnnotation>
+</chart:SfChart.Annotations>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    SfChart chart = new SfChart();
+SfChart chart = new SfChart();
 
-        ImageAnnotation image = new ImageAnnotation()
-            {
-                X1 = 6,
-                Y1 = 16,
-                X2 = 9,
-                Y2 = 18,
-                ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)),
-                EnableClipping=true
-            };
+ImageAnnotation image = new ImageAnnotation()
+{
+    X1 = 6,
+    Y1 = 16,
+    X2 = 9,
+    Y2 = 18,
+    ImageSource = new BitmapImage(new Uri("Images\Graduate.png", UriKind.RelativeOrAbsolute)),
+    EnableClipping=true
+};
 
-        chart.Annotations.Add(image);
+chart.Annotations.Add(image);
 
 {% endhighlight %}
 
@@ -1023,31 +1201,38 @@ The corresponding DateTime value will be given as values for X1 and X2 propertie
 
 {% highlight xaml %}
 
-        <chart:SfChart.PrimaryAxis>
-            <chart:DateTimeAxis  />
-        </chart:SfChart.PrimaryAxis>
+<chart:SfChart.PrimaryAxis>
+    <chart:DateTimeAxis/>
+</chart:SfChart.PrimaryAxis>
 
-        <chart:SfChart.SecondaryAxis>
-            <chart:NumericalAxis />
-        </chart:SfChart.SecondaryAxis>
+<chart:SfChart.SecondaryAxis>
+    <chart:NumericalAxis/>
+</chart:SfChart.SecondaryAxis>
 
-        <chart:SfChart.Annotations>
-            <chart:RectangleAnnotation  X1="2019/12/17" Y1="1200" X2="2020/02/19" Y2="1300" >
-                    </chart:RectangleAnnotation>
-        </chart:SfChart.Annotations>
+<chart:SfChart.Annotations>
+    <chart:RectangleAnnotation
+        X1="2019/12/17"
+        Y1="1200"
+        X2="2020/02/19"
+        Y2="1300">
+    </chart:RectangleAnnotation>
+</chart:SfChart.Annotations>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
- 			SfChart chart = new SfChart();
-            chart.PrimaryAxis = new DateTimeAxis();
-            chart.SecondaryAxis = new NumericalAxis();
-            RectangleAnnotation annotation = new RectangleAnnotation()
-            {
-                X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300,  
-            };
-            chart.Annotations.Add(annotation);
+SfChart chart = new SfChart();
+
+chart.PrimaryAxis = new DateTimeAxis();
+chart.SecondaryAxis = new NumericalAxis();
+
+RectangleAnnotation annotation = new RectangleAnnotation()
+{
+    X1 = new DateTime(2019,12,17), X2 = new DateTime(2020,02,19), Y1 = 1200, Y2 = 1300,  
+};
+
+chart.Annotations.Add(annotation);
 
 {% endhighlight %}
 
@@ -1078,12 +1263,8 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to display trackball label or tooltip over chart annotation`](https://support.syncfusion.com/kb/article/9592/how-to-display-trackball-label-or-tooltip-over-chart-annotation)
-
-[`How to add annotations by using MVVM binding`](https://support.syncfusion.com/kb/article/4632/how-to-add-annotations-by-using-mvvm-binding-in-wpf-chart-sfchart)
-
-[`How to change the cursor of the annotation`](https://support.syncfusion.com/kb/article/4574/how-to-change-the-cursor-of-annotation-in-wpf-chart-sfchart)
-
-[`How to bind the ViewModel property to content template of a TextAnnotation`](https://support.syncfusion.com/kb/article/3009/how-to-bind-the-content-template-of-text-annotation-in-wpf-chart)
-
-[`How to draw horizontal line in chart`](https://support.syncfusion.com/kb/article/3020/how-to-draw-horizontal-line-in-wpf-chart-sfchart)
+[`How to display trackball label or tooltip over chart annotation?`](https://support.syncfusion.com/kb/article/9592/how-to-display-trackball-label-or-tooltip-over-chart-annotation)
+[`How to add annotations by using MVVM binding?`](https://support.syncfusion.com/kb/article/4632/how-to-add-annotations-by-using-mvvm-binding-in-wpf-chart-sfchart)
+[`How to change the cursor of the annotation?`](https://support.syncfusion.com/kb/article/4574/how-to-change-the-cursor-of-annotation-in-wpf-chart-sfchart)
+[`How to bind the ViewModel property to content template of a TextAnnotation?`](https://support.syncfusion.com/kb/article/3009/how-to-bind-the-content-template-of-text-annotation-in-wpf-chart)
+[`How to draw horizontal line in chart?`](https://support.syncfusion.com/kb/article/3020/how-to-draw-horizontal-line-in-wpf-chart-sfchart)
diff --git a/wpf/Charts/Appearance.md b/wpf/Charts/Appearance.md
index 3af66caa81..6b6fcd358a 100644
--- a/wpf/Charts/Appearance.md
+++ b/wpf/Charts/Appearance.md
@@ -40,7 +40,7 @@ Each palette applies a set of predefined brushes to the series in a predefined o
 
 {% highlight xaml %}
 
-<chart:SfChart Height="250" Width="350" Palette="Metro"  >
+<chart:SfChart Height="250" Width="350" Palette="Metro">
 
 {% endhighlight %}
 
@@ -84,26 +84,22 @@ Each palette applies a set of predefined brushes to the segment in a predefined
 
 {% highlight xaml %}
 
-<chart:DoughnutSeries YBindingPath="Percentage" Palette="Metro"
-
-XBindingPath="Category" ItemsSource="{Binding Tax}" />
+<chart:DoughnutSeries 
+    YBindingPath="Percentage" 
+    Palette="Metro"
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 DoughnutSeries series = new DoughnutSeries()
-
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     Palette = ChartColorPalette.Metro
-
 };
 
 chart.Series.Add(series);
@@ -120,26 +116,22 @@ The following code example defined Palette as **AutumnBrights**.
 
 {% highlight xaml %}
 
-<chart:DoughnutSeries   YBindingPath="Percentage" Palette="AutumnBrights"
-
-XBindingPath="Category" ItemsSource="{Binding Tax}" />
+<chart:DoughnutSeries 
+    YBindingPath="Percentage" 
+    Palette="AutumnBrights"
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 DoughnutSeries series = new DoughnutSeries()
-
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     Palette = ChartColorPalette.AutumnBrights
-
 };
 
 chart.Series.Add(series);
@@ -161,26 +153,19 @@ SfChart provides option which enables you to define your own color brushes with
 
 {% highlight xaml %}
 
-<chart:DoughnutSeries  YBindingPath="Percentage" Palette="Custom"
-
-XBindingPath="Category" ItemsSource="{Binding Tax}" >   
-
-<chart:DoughnutSeries.ColorModel>
-
-<chart:ChartColorModel>
-
-<chart:ChartColorModel.CustomBrushes>
-
-<SolidColorBrush Color="Cyan"/>
-
-<SolidColorBrush Color="DarkCyan"/>                                                
-
-</chart:ChartColorModel.CustomBrushes>
-
-</chart:ChartColorModel>
-
-</chart:DoughnutSeries.ColorModel>
-
+<chart:DoughnutSeries
+    ItemsSource="{Binding Tax}"
+    XBindingPath="Category"
+    YBindingPath="Percentage"
+    Palette="Custom">
+    <chart:DoughnutSeries.ColorModel>
+        <chart:ChartColorModel>
+            <chart:ChartColorModel.CustomBrushes>
+                <SolidColorBrush Color="Cyan"/>
+                <SolidColorBrush Color="DarkCyan"/>
+            </chart:ChartColorModel.CustomBrushes>
+        </chart:ChartColorModel>
+    </chart:DoughnutSeries.ColorModel>
 </chart:DoughnutSeries>
 
 {% endhighlight %}
@@ -188,24 +173,16 @@ XBindingPath="Category" ItemsSource="{Binding Tax}" >
 {% highlight c# %}
 
 ChartColorModel colorModel = new ChartColorModel();
-
 colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan));
-
 colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan));
 
 DoughnutSeries series = new DoughnutSeries()
 {
-
-    ItemsSource = new ViewModel().Tax,
-
+    ItemsSource  = new ViewModel().Tax,
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
-    Palette = ChartColorPalette.Custom,
-
-    ColorModel = colorModel
-
+    Palette      = ChartColorPalette.Custom,
+    ColorModel   = colorModel
 };
 
 chart.Series.Add(series);
@@ -223,25 +200,20 @@ You can define the custom palette for series as in the below code example:
 
 {% highlight xaml %}
 
-<chart:SfChart Height="250" Width="350" Palette="Custom">
-
-<chart:SfChart.ColorModel>
-
-<chart:ChartColorModel>
-
-<chart:ChartColorModel.CustomBrushes>
-
-<SolidColorBrush Color="BlueViolet"/>
-
-<SolidColorBrush Color="PeachPuff"/>
-
-<SolidColorBrush Color="Purple"/>
+<chart:SfChart
+    Height="250"
+    Width="350"
+    Palette="Custom">
 
-</chart:ChartColorModel.CustomBrushes>
-
-</chart:ChartColorModel>
-
-</chart:SfChart.ColorModel>
+    <chart:SfChart.ColorModel>
+        <chart:ChartColorModel>
+            <chart:ChartColorModel.CustomBrushes>
+                <SolidColorBrush Color="BlueViolet"/>
+                <SolidColorBrush Color="PeachPuff"/>
+                <SolidColorBrush Color="Purple"/>
+            </chart:ChartColorModel.CustomBrushes>
+        </chart:ChartColorModel>
+    </chart:SfChart.ColorModel>
 
 </chart:SfChart>
 
@@ -250,13 +222,10 @@ You can define the custom palette for series as in the below code example:
 {% highlight c# %}
 
 chart.Palette = ChartColorPalette.Custom;
-
 ChartColorModel colorModel = new ChartColorModel();
 
 colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet));
-
 colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff));
-
 colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple));
 
 chart.ColorModel = colorModel;
@@ -323,46 +292,52 @@ ChartColorModel colorModel = new ChartColorModel();
 
 LinearGradientBrush gradientColor1 = new LinearGradientBrush();
 
-GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(255, 231, 199) };
+GradientStop stop1 = new GradientStop()
+{
+    Offset = 1,
+    Color = Color.FromRgb(255, 231, 199)
+};
 
-GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 182, 159) };
+GradientStop stop2 = new GradientStop()
+{
+    Offset = 0,
+    Color = Color.FromRgb(252, 182, 159)
+};
 
 gradientColor1.GradientStops.Add(stop1);
-
 gradientColor1.GradientStops.Add(stop2);
 
 LinearGradientBrush gradientColor2 = new LinearGradientBrush();
 
-stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(250, 221, 125) };
+stop1 = new GradientStop()
+{
+    Offset = 1,
+    Color = Color.FromRgb(250, 221, 125)
+};
 
-stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(252, 204, 45) };
+stop2 = new GradientStop()
+{
+    Offset = 0,
+    Color = Color.FromRgb(252, 204, 45)
+};
 
 gradientColor2.GradientStops.Add(stop1);
-
 gradientColor2.GradientStops.Add(stop2);
 
 ...
 
 colorModel.CustomBrushes.Add(gradientColor1);
-
 colorModel.CustomBrushes.Add(gradientColor2);
 
 ...
 
 ColumnSeries series = new ColumnSeries()
-
 {
-
-    ItemsSource = new ViewModel().Data,
-
+    ItemsSource  = new ViewModel().Data,
     XBindingPath = "Element",
-
     YBindingPath = "YValue",
-
-    Palette = ChartColorPalette.Custom,
-
-    ColorModel = colorModel
-
+    Palette      = ChartColorPalette.Custom,
+    ColorModel   = colorModel
 };
 
 chart.Series.Add(series);
@@ -379,14 +354,15 @@ The following code sample and screenshot illustrates how to apply the gradient c
 
 {% highlight xaml %}
 
-<chart:ColumnSeries XBindingPath="XValue" 
-                    YBindingPath="YValue"
-                    ItemsSource="{Binding Data}">
+<chart:ColumnSeries 
+    XBindingPath="XValue" 
+    YBindingPath="YValue"
+    ItemsSource="{Binding Data}">
                 
     <chart:ColumnSeries.Interior>
         <LinearGradientBrush>
-            <GradientStop Offset="1" Color="#A8EAEE" />
-            <GradientStop Offset="0" Color="#7BB0F9" />
+            <GradientStop Offset="1" Color="#A8EAEE"/>
+            <GradientStop Offset="0" Color="#7BB0F9"/>
         </LinearGradientBrush>
     </chart:ColumnSeries.Interior>
 
@@ -402,28 +378,29 @@ SfChart chart = new SfChart();
 
 LinearGradientBrush gradientColor = new LinearGradientBrush();
 
-GradientStop stop1 = new GradientStop() { Offset = 1, Color = Color.FromRgb(168, 234, 238) };
+GradientStop stop1 = new GradientStop()
+{
+    Offset = 1,
+    Color = Color.FromRgb(168, 234, 238)
+};
 
-GradientStop stop2 = new GradientStop() { Offset = 0, Color = Color.FromRgb(123, 176, 249) };
+GradientStop stop2 = new GradientStop()
+{
+    Offset = 0,
+    Color = Color.FromRgb(123, 176, 249)
+};
 
 gradientColor.GradientStops.Add(stop1);
-
 gradientColor.GradientStops.Add(stop2);
 
 ...
 
 ColumnSeries series = new ColumnSeries()
-
 {
-
-    ItemsSource = new ViewModel().Data,
-
+    ItemsSource  = new ViewModel().Data,
     XBindingPath = "Element",
-
     YBindingPath = "YValue",
-
-    Interior = gradientColor,
-
+    Interior     = gradientColor
 };
 
 chart.Series.Add(series);
@@ -443,20 +420,15 @@ The color for the chart segments can be bound from its items source collection b
 
 {% highlight xaml %}
 
-<chart:ColumnSeries  SegmentColorPath="ColorPath">
-
-</chart:ColumnSeries>
+<chart:ColumnSeries SegmentColorPath="ColorPath"></chart:ColumnSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ColumnSeries series = new ColumnSeries()
- 
 {
-        
    SegmentColorPath = "SegmentColor"
-            
 };
 
 {% endhighlight %}
@@ -479,63 +451,38 @@ The following code example demonstrates applying the palette color to the legend
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-<chart:ChartLegend DockPosition="Left" >
-
-<chart:ChartLegend.ItemTemplate>
-
-<DataTemplate>
-
-<StackPanel Orientation="Horizontal">
-
-<Grid Margin="20,0,0,0">
-
-<Grid.ColumnDefinitions>
-
-<ColumnDefinition/>
-
-<ColumnDefinition/>
-
-</Grid.ColumnDefinitions>
-
-<Ellipse Width="10" Height="10" 
-
-Fill="{Binding Interior}">
-
-<Ellipse.Effect>
-
-<DropShadowEffect Direction="315" 
-
-BlurRadius="0.8"   
-
-ShadowDepth="3" 
-
-Color="Black"/>
-
-</Ellipse.Effect>
-
-</Ellipse>
-
-<TextBlock Margin="5,0,0,0" 
-
-FontSize="10"  
-
-Grid.Column="1" 
-
-Foreground="Black" 
-
-Text="{Binding Label}"></TextBlock>
-
-</Grid>
-
-</StackPanel>
-
-</DataTemplate>
-
-</chart:ChartLegend.ItemTemplate>
-
-</chart:ChartLegend>
-
+    <chart:ChartLegend DockPosition="Left">
+        <chart:ChartLegend.ItemTemplate>
+            <DataTemplate>
+                <StackPanel Orientation="Horizontal">
+                    <Grid Margin="20,0,0,0">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition/>
+                            <ColumnDefinition/>
+                        </Grid.ColumnDefinitions>
+
+                        <Ellipse Width="10" Height="10" Fill="{Binding Interior}">
+                            <Ellipse.Effect>
+                                <DropShadowEffect
+                                    Direction="315"
+                                    BlurRadius="0.8"
+                                    ShadowDepth="3"
+                                    Color="Black"/>
+                            </Ellipse.Effect>
+                        </Ellipse>
+
+                        <TextBlock
+                            Grid.Column="1"
+                            Margin="5,0,0,0"
+                            FontSize="10"
+                            Foreground="Black"
+                            Text="{Binding Demand}">
+                        </TextBlock>
+                    </Grid>
+                </StackPanel>
+            </DataTemplate>
+        </chart:ChartLegend.ItemTemplate>
+    </chart:ChartLegend>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -544,11 +491,8 @@ Text="{Binding Label}"></TextBlock>
 
 chart.Legend = new ChartLegend()
 {
-
    DockPosition = ChartDock.Left,
-
    ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
@@ -567,90 +511,77 @@ SfChart provides the option to define your own template for Tooltip. The followi
 
 {% highlight xaml %}
 
-<chart:BarSeries ItemsSource="{Binding CategoricalDatas}"  
-
-chart:ChartTooltip.ShowDuration="5000"
-
-XBindingPath="Category" YBindingPath="Value" 
-
-ShowTooltip="True"  Palette="FloraHues" >
-
-<chart:BarSeries.TooltipTemplate>
-
-<DataTemplate >
-
-<Border BorderBrush="Black" BorderThickness="1">
-
-<Grid  Height="40">
-
-<Grid.RowDefinitions>
-
-<RowDefinition Height="0.5*"/>
-
-<RowDefinition Height="0.5*"/>
-
-</Grid.RowDefinitions>
-
-<Grid.ColumnDefinitions>
-
-<ColumnDefinition/>
-
-<ColumnDefinition/>
-
-<ColumnDefinition/>
-
-</Grid.ColumnDefinitions>
-
-<Rectangle Fill="White" Grid.RowSpan="2" 
-
-Grid.ColumnSpan="3" ></Rectangle>
-
-<Image Grid.RowSpan="2" Grid.Column="0" 
-
-HorizontalAlignment="Left" Margin="3" 
-
-Source="{Binding Item.ImagePath}" ></Image>
-
-<TextBlock Margin="3,3,6,3" Text="{Binding Item.Category }" 
-
-FontSize="10" Grid.Column="1" 
-
-Grid.ColumnSpan="2" 
-
-HorizontalAlignment="Left"
-
-VerticalAlignment="Center" TextAlignment="Center" 
-
-Foreground="Black" />
-
-<TextBlock VerticalAlignment="Center" Margin="3,3,6,3" 
-
-Grid.Column="2" Grid.Row="1" 
-
-TextAlignment="Left" Text="{Binding Item.Value}" 
-
-HorizontalAlignment="Left" 
-
-Foreground="Black" FontSize="10"/>
-
-<TextBlock VerticalAlignment="Center" 
-
-Grid.Column="1" Grid.Row="1" 
-
-TextAlignment="Left" Text="Value:"
-
-HorizontalAlignment="Left" 
-
-Foreground="Black" FontSize="10"/>
-
-</Grid>
-
-</Border>
-
-</DataTemplate>
-
-</chart:BarSeries.TooltipTemplate>
-
+<chart:BarSeries
+    ItemsSource="{Binding CategoricalDatas}"
+    XBindingPath="Category"
+    YBindingPath="Value"
+    ShowTooltip="True"
+    Palette="FloraHues"
+    chart:ChartTooltip.ShowDuration="5000">
+
+    <chart:BarSeries.TooltipTemplate>
+        <DataTemplate>
+            <Border BorderBrush="Black" BorderThickness="1">
+                <Grid Height="40">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="0.5*"/>
+                        <RowDefinition Height="0.5*"/>
+                    </Grid.RowDefinitions>
+
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition/>
+                        <ColumnDefinition/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+
+                    <Rectangle
+                        Fill="White"
+                        Grid.RowSpan="2"
+                        Grid.ColumnSpan="3"/>
+
+                    <Image
+                        Grid.RowSpan="2"
+                        Grid.Column="0"
+                        HorizontalAlignment="Left"
+                        Margin="3"
+                        Source="{Binding Item.ImagePath}"/>
+
+                    <TextBlock
+                        Grid.Column="1"
+                        Grid.ColumnSpan="2"
+                        Margin="3,3,6,3"
+                        FontSize="10"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        TextAlignment="Center"
+                        Foreground="Black"
+                        Text="{Binding Item.Category}"/>
+
+                    <TextBlock
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        HorizontalAlignment="Left"
+                        Margin="3,3,6,3"
+                        FontSize="10"
+                        Foreground="Black"
+                        Text="Value:"
+                        TextAlignment="Left"/>
+
+                    <TextBlock
+                        Grid.Row="1"
+                        Grid.Column="2"
+                        VerticalAlignment="Center"
+                        HorizontalAlignment="Left"
+                        Margin="3,3,6,3"
+                        FontSize="10"
+                        Foreground="Black"
+                        Text="{Binding Item.Value}"
+                        TextAlignment="Left"/>
+                </Grid>
+            </Border>
+        </DataTemplate>
+    </chart:BarSeries.TooltipTemplate>
 </chart:BarSeries>
 
 {% endhighlight %}
@@ -659,19 +590,12 @@ Foreground="Black" FontSize="10"/>
 
 BarSeries series = new BarSeries()
 {
-
     ItemsSource = new ViewModel().CategoricalDatas,
-
     XBindingPath = "Category",
-
     YBindingPath = "Value",
-
     Palette = ChartColorPalette.FloraHues,
-
     ShowTooltip = true,
-
     TooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate
-
 };
 
 ChartTooltip.SetShowDuration(series, 5000);
@@ -688,13 +612,9 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to apply gradient colors for each series in WPF Chart`](https://www.syncfusion.com/kb/11849/how-to-apply-gradient-colors-for-each-series-in-wpf-chart)
-
-[`How to change colors of specific data points in the chart`](https://www.syncfusion.com/kb/10928/how-to-change-colors-of-specific-data-points-in-the-chart)
-
-[`How to set color for the series ColorModel property`](https://www.syncfusion.com/kb/5496/how-to-set-color-for-the-series-colormodel-property)
-
-[`How to add custom color model to series`](https://www.syncfusion.com/kb/5480/how-to-add-custom-color-model-to-series)
-
-[`How to define the fill color for each datapoint from ItemsSource`](https://www.syncfusion.com/kb/5124/how-to-define-the-fill-color-for-each-datapoint-from-itemssource)
+[`How to apply gradient colors for each series in WPF Chart?`](https://www.syncfusion.com/kb/11849/how-to-apply-gradient-colors-for-each-series-in-wpf-chart)
+[`How to change colors of specific data points in the chart?`](https://www.syncfusion.com/kb/10928/how-to-change-colors-of-specific-data-points-in-the-chart)
+[`How to set color for the series ColorModel property?`](https://www.syncfusion.com/kb/5496/how-to-set-color-for-the-series-colormodel-property)
+[`How to add custom color model to series?`](https://www.syncfusion.com/kb/5480/how-to-add-custom-color-model-to-series)
+[`How to define the fill color for each datapoint from ItemsSource?`](https://www.syncfusion.com/kb/5124/how-to-define-the-fill-color-for-each-datapoint-from-itemssource)
 
diff --git a/wpf/Charts/Area.md b/wpf/Charts/Area.md
index 3f917e86a2..3ec785f7e9 100644
--- a/wpf/Charts/Area.md
+++ b/wpf/Charts/Area.md
@@ -32,31 +32,21 @@ The following code examples illustrates the usage of these properties:
 {% highlight xaml %}
 
 <chart:SfChart Height="250" Width="350" 
-
-Header="Chart Area Header" 
-
-AreaBackground="Cyan" 
-
-Background="LightGray" 
-
-AreaBorderBrush="Gray" 
-
-AreaBorderThickness="3" >
+               Header="Chart Area Header" 
+               AreaBackground="Cyan" 
+               Background="LightGray" 
+               AreaBorderBrush="Gray" 
+               AreaBorderThickness="3" >
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.Header = "Chart Area Header";
-
 chart.AreaBackground = new SolidColorBrush(Colors.Cyan);
-
 chart.Background = new SolidColorBrush(Colors.LightGray);
-
 chart.AreaBorderBrush = new SolidColorBrush(Colors.Gray);
-
 chart.AreaBorderThickness = new Thickness(3);
 
 {% endhighlight %}
@@ -78,68 +68,39 @@ The following code example demonstrates, how you can create multiple panes in th
 
 <chart:SfChart >
 
-<!--Adding row definition to the chart-->
-
-<chart:SfChart.RowDefinitions>
-
-<chart:ChartRowDefinition/>
-
-<chart:ChartRowDefinition/>
-
-</chart:SfChart.RowDefinitions>
-
-<!--Adding column definition to the chart-->
-
-<chart:SfChart.ColumnDefinitions>
-
-<chart:ChartColumnDefinition/>
-
-<chart:ChartColumnDefinition/>
-
-</chart:SfChart.ColumnDefinitions>
-
-<chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis chart:ChartBase.ColumnSpan="2"/>
-
-</chart:SfChart.PrimaryAxis>
-
-
-
-<chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis  PlotOffset="13" chart:ChartBase.ColumnSpan="2" />
-
-</chart:SfChart.SecondaryAxis>
-
-
-<chart:ColumnSeries Palette="LightCandy"
-
-ItemsSource="{Binding SneakersDetail}"         
-
-XBindingPath="Brand" 
-
-YBindingPath="ItemsCount1" />
-
-<chart:ColumnSeries Palette="Metro"
-
-ItemsSource="{Binding SneakersDetail}"  
-
-XBindingPath="Brand" 
-
-YBindingPath="ItemsCount" >
-
-<chart:ColumnSeries.YAxis>
-
-<chart:NumericalAxis  PlotOffset="10"
-
-chart:SfChart.Row="1" >
-
-</chart:NumericalAxis>
-
-</chart:ColumnSeries.YAxis>
-
-</chart:ColumnSeries>
+    <!--Adding row definition to the chart-->
+    <chart:SfChart.RowDefinitions>
+        <chart:ChartRowDefinition/>
+        <chart:ChartRowDefinition/>
+    </chart:SfChart.RowDefinitions>
+
+    <!--Adding column definition to the chart-->
+    <chart:SfChart.ColumnDefinitions>
+        <chart:ChartColumnDefinition/>
+        <chart:ChartColumnDefinition/>
+    </chart:SfChart.ColumnDefinitions>
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis chart:ChartBase.ColumnSpan="2"/>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis  PlotOffset="13" chart:ChartBase.ColumnSpan="2" />
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:ColumnSeries Palette="LightCandy"
+                        ItemsSource="{Binding SneakersDetail}"         
+                        XBindingPath="Brand" 
+                        YBindingPath="ItemsCount1" />
+
+    <chart:ColumnSeries Palette="Metro" 
+                        ItemsSource="{Binding SneakersDetail}" 
+                        XBindingPath="Brand" 
+                        YBindingPath="ItemsCount" >
+        <chart:ColumnSeries.YAxis>
+            <chart:NumericalAxis PlotOffset="10" chart:SfChart.Row="1" />
+        </chart:ColumnSeries.YAxis>
+    </chart:ColumnSeries>
 
 </chart:SfChart>
 
@@ -148,65 +109,43 @@ chart:SfChart.Row="1" >
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.RowDefinitions.Add(new ChartRowDefinition());
-
 chart.RowDefinitions.Add(new ChartRowDefinition());
-
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
-
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
 
 CategoryAxis xAxis = new CategoryAxis();
-
 ChartBase.SetColumnSpan(xAxis, 2);
-
 chart.PrimaryAxis = xAxis;
 
 NumericalAxis yAxis = new NumericalAxis();
-
 yAxis.PlotOffset = 13;
 
 ChartBase.SetColumnSpan(yAxis, 2);
-
 chart.SecondaryAxis = yAxis;
 
 ColumnSeries columnSeries1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount",
-
     Palette = ChartColorPalette.LightCandy,
-
 };
 
 NumericalAxis axis = new NumericalAxis();
-
 axis.PlotOffset = 10;
-
 SfChart.SetRow(axis, 1);
 
 ColumnSeries columnSeries2 = new ColumnSeries()
 {
-    
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount1",
-
     Palette = ChartColorPalette.Metro,
-
     YAxis = axis
-
 };
 
 chart.Series.Add(columnSeries1);
-
 chart.Series.Add(columnSeries2);
 
 {% endhighlight %}
@@ -228,60 +167,36 @@ You can set the row span in chart like the following code example.
 
 <chart:SfChart>
 
-<!--Adding row definition to the chart-->
-
-<chart:SfChart.RowDefinitions>
-
-<chart:ChartRowDefinition/>
-
-<chart:ChartRowDefinition/>
-
-</chart:SfChart.RowDefinitions>
-
-<chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis   chart:ChartBase.RowSpan="2" 
-
-chart:SfChart.Row="0"
-
-TickLinesPosition="Outside">                                                              
-
-</chart:CategoryAxis>
-
-</chart:SfChart.PrimaryAxis>
-
-<chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis />
-
-</chart:SfChart.SecondaryAxis>
-
-<chart:ColumnSeries XBindingPath="Brand"
-
-ItemsSource="{Binding SneakersDetail}"  
-
-YBindingPath="ItemsCount1" 
-
-/>
-
-
-
-<chart:LineSeries Interior="CadetBlue" XBindingPath="Brand"
-
-ItemsSource="{Binding SneakersDetail}"   
-
-YBindingPath="ItemsCount">
-
-<chart:LineSeries.YAxis>
-
-<chart:NumericalAxis chart:ChartBase.RowSpan="2">
-
-</chart:NumericalAxis>
-
-</chart:LineSeries.YAxis>              
-
-</chart:LineSeries>
-
+    <!--Adding row definition to the chart-->
+    <chart:SfChart.RowDefinitions>
+        <chart:ChartRowDefinition/>
+        <chart:ChartRowDefinition/>
+    </chart:SfChart.RowDefinitions>
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis chart:ChartBase.RowSpan="2" 
+                            chart:SfChart.Row="0"
+                            TickLinesPosition="Outside">
+        </chart:CategoryAxis>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis />
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:ColumnSeries XBindingPath="Brand"
+                        ItemsSource="{Binding SneakersDetail}"  
+                        YBindingPath="ItemsCount1"/>
+
+    <chart:LineSeries Interior="CadetBlue" 
+                      XBindingPath="Brand"
+                      ItemsSource="{Binding SneakersDetail}"   
+                      YBindingPath="ItemsCount">
+        <chart:LineSeries.YAxis>
+            <chart:NumericalAxis chart:ChartBase.RowSpan="2">
+            </chart:NumericalAxis>
+        </chart:LineSeries.YAxis>
+    </chart:LineSeries>
 </chart:SfChart>
 
 {% endhighlight %}
@@ -289,65 +204,42 @@ YBindingPath="ItemsCount">
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.RowDefinitions.Add(new ChartRowDefinition());
-
 chart.RowDefinitions.Add(new ChartRowDefinition());
-
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
-
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
 
 CategoryAxis xAxis = new CategoryAxis();
-
 xAxis.TickLinesPosition = AxisElementPosition.Outside;
-
 ChartBase.SetColumnSpan(xAxis, 2);
-
-SfChart.SetRow(xAxis, 0);
-
+SfChart.SetRow(xAxis, 0);            
 chart.PrimaryAxis = xAxis;
 
 NumericalAxis yAxis = new NumericalAxis();
-
 ChartBase.SetColumnSpan(yAxis, 2);
-
 chart.SecondaryAxis = yAxis;
 
 ColumnSeries columnSeries1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount1",
-
 };
 
 NumericalAxis axis = new NumericalAxis();
-
 axis.PlotOffset = 10;
-
 ChartBase.SetColumnSpan(axis, 2);
 
 LineSeries lineSeries = new LineSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount",
-
     Interior = new SolidColorBrush(Colors.CadetBlue),
-
     YAxis = axis
-
 };
 
 chart.Series.Add(columnSeries1);
-
 chart.Series.Add(lineSeries);
 
 {% endhighlight %}
@@ -363,7 +255,6 @@ More like serialization, you can use [`Clone`](https://help.syncfusion.com/cr/wp
 {% highlight C# %}
 
 var chartCopy = chart.Clone() as SfChart;
-
 grid.Children.Add(chartCopy as SfChart);
 
 //Here, 'grid' is an empty container in the application to hold the chart. 
@@ -378,21 +269,12 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 **See also**
 
 [`PointToValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_PointToValue_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Windows_Point_)
-
 [`ValueToPoint`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_ValueToPoint_Syncfusion_UI_Xaml_Charts_ChartAxis_System_Double_)
-
-[`How to add space between multiple columns in a Chart segment`](https://support.syncfusion.com/kb/article/5022/how-to-add-space-between-multiple-columns-in-wpf-chart-sfchart-segment)
-
-[`How to allot space between the segments`](https://support.syncfusion.com/kb/article/5110/how-to-customize-the-space-between-segments-in-wpf-chart-sfchart)
-
-[`How to display the chart area alone in Chart`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart)
-
-[`How to redraw the chart while dragging the series out of the range`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range)
-
-[`How to set the Z Index to the series`](https://support.syncfusion.com/kb/article/3014/how-to-set-the-z-index-to-scatter-series-of-wpf-chart-sfchart)
-
-[`How to get coordinates of x and y in MouseDown event`](https://support.syncfusion.com/kb/article/2786/how-to-get-coordinates-of-x-and-y-in-wpf-chart-sfchart)
-
-[`How to set ItemWidthPercent before drawing chart`](https://support.syncfusion.com/kb/article/2805/how-to-set-spacing-between-each-columns-in-wpf-chart-sfchart)
-
-[`How to view corner segments without cutting in edge of WPF Chart`](https://support.syncfusion.com/kb/article/9372/how-to-view-corner-segments-without-cutting-in-edge-of-wpf-chart)
\ No newline at end of file
+[`How to add space between multiple columns in a Chart segment?`](https://support.syncfusion.com/kb/article/5022/how-to-add-space-between-multiple-columns-in-wpf-chart-sfchart-segment)
+[`How to allot space between the segments?`](https://support.syncfusion.com/kb/article/5110/how-to-customize-the-space-between-segments-in-wpf-chart-sfchart)
+[`How to display the chart area alone in Chart?`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart)
+[`How to redraw the chart while dragging the series out of the range?`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range)
+[`How to set the Z Index to the series?`](https://support.syncfusion.com/kb/article/3014/how-to-set-the-z-index-for-a-scatter-series-in-a-wpf-chart-sfchart)
+[`How to get coordinates of x and y in MouseDown event?`](https://support.syncfusion.com/kb/article/2786/how-to-get-coordinates-of-x-and-y-in-wpf-chart-sfchart)
+[`How to set ItemWidthPercent before drawing chart?`](https://support.syncfusion.com/kb/article/2805/how-to-set-spacing-between-each-columns-in-wpf-chart-sfchart)
+[`How to view corner segments without cutting in edge of WPF Chart?`](https://support.syncfusion.com/kb/article/9372/how-to-view-corner-segments-without-cutting-in-edge-of-wpf-chart)
\ No newline at end of file
diff --git a/wpf/Charts/Axis.md b/wpf/Charts/Axis.md
index 9178667989..c854fe9703 100644
--- a/wpf/Charts/Axis.md
+++ b/wpf/Charts/Axis.md
@@ -88,33 +88,27 @@ In [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Ch
 
 {% highlight xaml %}
 
-<syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis Header="Metals"/>
-
-</syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Header="Values(In Tonnes)"/>
-
-</syncfusion:NumericalAxis>
-
-</syncfusion:SfChart.SecondaryAxis>
+<syncfusion:SfChart>
+    <syncfusion:SfChart.PrimaryAxis>
+        <syncfusion:CategoryAxis Header="Metals"/>
+    </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:SfChart.SecondaryAxis>
+        <syncfusion:NumericalAxis Header="Values(In Tonnes)"/>
+    </syncfusion:SfChart.SecondaryAxis>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis() { Header = "Medals" };
-
 chart.SecondaryAxis = new NumericalAxis() { Header = "Values(In Tonnes)" };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF ChartAxis with Header](Axis_images/wpf-chart-axis-header.jpeg)
+![WPF ChartAxis with Header](Axis_images/wpf-chart-axis-header.jpg)
 
 
 **Header** **Customization**
@@ -125,52 +119,28 @@ Default appearance of the header can be customized using [`HeaderTemplate`](http
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
+<syncfusion:SfChart x:Name="chart">
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="headerTemplate1">
-
             <Border BorderBrush="Black" CornerRadius="5" BorderThickness="1">
-
-                    <TextBlock Text="Demands" FontSize="12" 
-                                   
-                               FontStyle="Italic" 
-                                   
-                               FontWeight="Bold" Margin="3"/>
-
+                <TextBlock Text="Demands" FontSize="12" FontStyle="Italic" FontWeight="Bold" Margin="3"/>
             </Border>
-
         </DataTemplate>
 
         <DataTemplate x:Key="headerTemplate2">
-
             <Border BorderBrush="Black" CornerRadius="5" BorderThickness="1">
-
-                    <TextBlock FontSize="12" Margin="3"
-                                   
-                               FontStyle="Italic" FontWeight="Bold"/>
-
+                <TextBlock FontSize="12" Margin="3" FontStyle="Italic" FontWeight="Bold"/>
             </Border>
-
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.PrimaryAxis>
-
         <syncfusion:CategoryAxis HeaderTemplate="{StaticResource headerTemplate1}"/>
-
     </syncfusion:SfChart.PrimaryAxis>
 
     <syncfusion:SfChart.SecondaryAxis>
-
-        <syncfusion:NumericalAxis Header="Values(In Tonnes)"
-                                          
-                                  HeaderTemplate="{StaticResource headerTemplate2}"/>
-
+        <syncfusion:NumericalAxis Header="Values(In Tonnes)" HeaderTemplate="{StaticResource headerTemplate2}"/>
     </syncfusion:SfChart.SecondaryAxis>
-        
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -179,23 +149,19 @@ Default appearance of the header can be customized using [`HeaderTemplate`](http
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     HeaderTemplate = chart.Resources["headerTemplate1"] as DataTemplate
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     HeaderTemplate = chart.Resources["headerTemplate2"] as DataTemplate
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![Customizing Header of WPF ChartAxis](Axis_images/wpf-chart-axis-header-customization.jpeg)
+![Customizing Header of WPF ChartAxis](Axis_images/wpf-chart-axis-header-customization.jpg)
 
 
 **HeaderStyle**
@@ -207,35 +173,21 @@ chart.SecondaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis Header="Metals" >
-
-<syncfusion:CategoryAxis.HeaderStyle>
-
-<syncfusion:LabelStyle FontFamily="Algerian" FontSize="13" Foreground="Black"> 
-
-</syncfusion:LabelStyle>
-
-</syncfusion:CategoryAxis.HeaderStyle>
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis Header="Metals" >
+        <syncfusion:CategoryAxis.HeaderStyle>
+            <syncfusion:LabelStyle FontFamily="Algerian" FontSize="13" Foreground="Black">
+            </syncfusion:LabelStyle>
+        </syncfusion:CategoryAxis.HeaderStyle>
+    </syncfusion:CategoryAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Header="Values(In Tonnes)"/>
-
-<syncfusion:NumericalAxis.HeaderStyle>
-
-<syncfusion:LabelStyle FontFamily="Algerian" FontSize="13" Foreground="Black"> 
-
-</syncfusion:LabelStyle>
-
-</syncfusion:NumericalAxis.HeaderStyle>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Header="Values(In Tonnes)">
+        <syncfusion:NumericalAxis.HeaderStyle>
+            <syncfusion:LabelStyle FontFamily="Algerian" FontSize="13" Foreground="Black">
+            </syncfusion:LabelStyle>
+        </syncfusion:NumericalAxis.HeaderStyle>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -244,38 +196,28 @@ chart.SecondaryAxis = new NumericalAxis()
 
 LabelStyle style = new LabelStyle()
 {
-
     FontFamily = new FontFamily("Algerian"),
-
     FontSize = 13,
-
     Foreground = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     Header = "Medals",
-
     LabelStyle = style
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Header = "Values(In Tonnes)",
-
     LabelStyle = style
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![Changing Header Style in WPF ChartAxis](Axis_images/wpf-chart-axis-header-style.jpeg)
+![Changing Header Style in WPF ChartAxis](Axis_images/wpf-chart-axis-header-style.jpg)
 
 ## Axis Labels
 
@@ -294,11 +236,8 @@ The [`LabelsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  LabelsPosition="Inside">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  LabelsPosition="Inside">
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -307,16 +246,14 @@ The [`LabelsPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     LabelsPosition = AxisElementPosition.Inside
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![Changing Axis Label Position in WPF Chart](Axis_images/wpf-chart-axis-label-position.jpeg)
+![Changing Axis Label Position in WPF Chart](Axis_images/wpf-chart-axis-label-position.jpg)
 
 
 **LabelRotationAngle**
@@ -328,11 +265,7 @@ chart.PrimaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  LabelRotationAngle="90" >
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  LabelRotationAngle="90"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -341,16 +274,14 @@ chart.PrimaryAxis = new NumericalAxis()
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
-     LabelRotationAngle = 90
-
+    LabelRotationAngle = 90
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF Chart displays Axis Rotation Angle](Axis_images/wpf-chart-axis-rotation-angle.jpeg)
+![WPF Chart displays Axis Rotation Angle](Axis_images/wpf-chart-axis-rotation-angle.jpg)
 
 **Custom** **Labels**
 
@@ -361,27 +292,16 @@ SfChart allows user to define the labels for the axis. For defining the axis lab
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis >
-
-<syncfusion:CategoryAxis.CustomLabels>
-
-<syncfusion:ChartAxisLabel Position="0" LabelContent="0-1"/>
-
-<syncfusion:ChartAxisLabel Position="1" LabelContent="1-2"/>
-
-<syncfusion:ChartAxisLabel Position="2" LabelContent="2-3"/>
-
-<syncfusion:ChartAxisLabel Position="3" LabelContent="3-4"/>
-
-<syncfusion:ChartAxisLabel Position="4" LabelContent="4-5"/>
-
-<syncfusion:ChartAxisLabel Position="5" LabelContent="5-5"/>
-
-</syncfusion:CategoryAxis.CustomLabels>
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis>
+        <syncfusion:CategoryAxis.CustomLabels>
+            <syncfusion:ChartAxisLabel Position="0" LabelContent="0-1"/>
+            <syncfusion:ChartAxisLabel Position="1" LabelContent="1-2"/>
+            <syncfusion:ChartAxisLabel Position="2" LabelContent="2-3"/>
+            <syncfusion:ChartAxisLabel Position="3" LabelContent="3-4"/>
+            <syncfusion:ChartAxisLabel Position="4" LabelContent="4-5"/>
+            <syncfusion:ChartAxisLabel Position="5" LabelContent="5-6"/>
+        </syncfusion:CategoryAxis.CustomLabels>
+    </syncfusion:CategoryAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -389,26 +309,19 @@ SfChart allows user to define the labels for the axis. For defining the axis lab
 {% highlight c# %}
 
 CategoryAxis axis = new CategoryAxis();
-
 axis.CustomLabels.Add(new ChartAxisLabel() { Position = 0, LabelContent = "0-1" });
-
 axis.CustomLabels.Add(new ChartAxisLabel() { Position = 1, LabelContent = "1-2" });
-
 axis.CustomLabels.Add(new ChartAxisLabel() { Position = 2, LabelContent = "2-3" });
-
 axis.CustomLabels.Add(new ChartAxisLabel() { Position = 3, LabelContent = "3-4" });
-
 axis.CustomLabels.Add(new ChartAxisLabel() { Position = 4, LabelContent = "4-5" });
-
-axis.CustomLabels.Add(new ChartAxisLabel() { Position = 5, LabelContent = "5-5" });
-
+axis.CustomLabels.Add(new ChartAxisLabel() { Position = 5, LabelContent = "5-6" });
 chart.PrimaryAxis = axis;
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF Chart with Custom Axis Label](Axis_images/wpf-chart-custom-axis-label.jpeg)
+![WPF Chart with Custom Axis Label](Axis_images/wpf-chart-custom-axis-label.jpg)
 
 
 You can also directly bind the collection of labels to the [`LabelsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelsSource) property for defining custom labels. The following code example demonstrates the defining the label collection in code behind and binding the property in XAML page.
@@ -418,11 +331,7 @@ You can also directly bind the collection of labels to the [`LabelsSource`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis LabelsSource="{Binding Labels}" ContentPath="Content" PositionPath="Position">
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis LabelsSource="{Binding Labels}" ContentPath="Content" PositionPath="Position"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -431,48 +340,29 @@ You can also directly bind the collection of labels to the [`LabelsSource`](http
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
-    ContentPath ="Content",
-
+    ContentPath = "Content",
     PositionPath = "Position",
-
     LabelsSource = Labels
-
 };
 
-
 public List<LabelItem> Labels { get; set; }
 
 Labels = new List<LabelItem>
-
 {
-
-    new LabelItem() {Position=0, Content = "0-1"},
-
-    new LabelItem() {Position=1, Content = "1-2"},
-
-    new LabelItem() {Position=2, Content = "2-3"},
-
-    new LabelItem() {Position=3, Content = "3-4"},
-
-    new LabelItem() {Position=4, Content = "4-5"},
-
-    new LabelItem() {Position=5, Content = "5-6"},
-
-    new LabelItem() {Position=6, Content = "6-7"},
-
-    new LabelItem() {Position=7, Content = "7-8"},
-
+    new LabelItem() { Position = 0, Content = "0-1"},
+    new LabelItem() { Position = 1, Content = "1-2"},
+    new LabelItem() { Position = 2, Content = "2-3"},        
+    new LabelItem() { Position = 3, Content = "3-4"},
+    new LabelItem() { Position = 4, Content = "4-5"},
+    new LabelItem() { Position = 5, Content = "5-6"},
+    new LabelItem() { Position = 6, Content = "6-7"},
+    new LabelItem() { Position = 7, Content = "7-8"},
 };
 
 public class LabelItem
-
 {
-
     public string Content { get; set; }
-
     public int Position { get; set; }
-
 }
 
 {% endhighlight %}
@@ -493,11 +383,7 @@ Axis labels can be formatting by predefined formatting types based on the axis t
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis LabelFormat="MMM/dd" FontSize="12" >
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis LabelFormat="MMM/dd" FontSize="12"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -506,18 +392,15 @@ Axis labels can be formatting by predefined formatting types based on the axis t
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelFormat = "MM/dd",
-
     FontSize = 12
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF Chart with DateTimeAxis Label](Axis_images/wpf-chart-axis-label-formatting.jpeg)
+![WPF Chart with DateTimeAxis Label](Axis_images/wpf-chart-axis-label-formatting.jpg)
 
 
 **TimeSpanAxis**
@@ -527,9 +410,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:TimeSpanAxis LabelFormat="g" ></syncfusion:TimeSpanAxis>
-
+    <syncfusion:TimeSpanAxis LabelFormat="g" ></syncfusion:TimeSpanAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -538,16 +419,14 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.PrimaryAxis = new TimeSpanAxis()
 {
-
     LabelFormat = "g",
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF Chart with TimeSpanAxis Label](Axis_images/wpf-chart-time-span-axis-label.jpeg)
+![WPF Chart with TimeSpanAxis Label](Axis_images/wpf-chart-time-span-axis-label.jpg)
 
 
 **NumericalAxis**
@@ -557,9 +436,7 @@ chart.PrimaryAxis = new TimeSpanAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis LabelFormat="0.00" />
-
+    <syncfusion:NumericalAxis LabelFormat="0.00"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -568,9 +445,7 @@ chart.PrimaryAxis = new TimeSpanAxis()
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     LabelFormat = "0.00",
-
 };
 
 {% endhighlight %}
@@ -591,28 +466,18 @@ To display the measuring units, it can be added as a prefix or suffix to the axi
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="prefixLabelTemplate">
-
-             <TextBlock FontSize="10" VerticalAlignment="Center" 
-                               
-                               Text="$"/>
-
+            <TextBlock FontSize="10" VerticalAlignment="Center" Text="$"/>
         </DataTemplate>
-                
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.SecondaryAxis>
-
-         <syncfusion:NumericalAxis FontSize="10" 
-                                          
-                                   PrefixLabelTemplate="{StaticResource prefixLabelTemplate}"/>
-
+        <syncfusion:NumericalAxis 
+            FontSize="10" 
+            PrefixLabelTemplate="{StaticResource prefixLabelTemplate}"/>
     </syncfusion:SfChart.SecondaryAxis>
-
- </syncfusion:SfChart>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
@@ -620,9 +485,7 @@ To display the measuring units, it can be added as a prefix or suffix to the axi
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     PrefixLabelTemplate = chart.Resources["prefixLabelTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
@@ -638,26 +501,18 @@ chart.SecondaryAxis = new NumericalAxis()
 
 {% highlight xaml %}
 
-  <syncfusion:SfChart x:Name="chart">
-
-    <syncfusion:SfChart.Resources>
-
-        <DataTemplate x:Key="postfixLabelTemplate">
-
-             TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/>
-
-        </DataTemplate>
-
-    </syncfusion:SfChart.Resources>
-
-    <syncfusion:SfChart.SecondaryAxis>
-
-        <syncfusion:NumericalAxis FontSize="10" 
-                                          
-                                  PostfixLabelTemplate="{StaticResource postfixLabelTemplate}"/>
-
-    </syncfusion:SfChart.SecondaryAxis>
+<syncfusion:SfChart x:Name="chart">
+        <syncfusion:SfChart.Resources>
+            <DataTemplate x:Key="postfixLabelTemplate">
+                <TextBlock FontSize="10" VerticalAlignment="Center" Text="K"/>
+            </DataTemplate>
+        </syncfusion:SfChart.Resources>
 
+        <syncfusion:SfChart.SecondaryAxis>
+            <syncfusion:NumericalAxis 
+                FontSize="10" 
+                PostfixLabelTemplate="{StaticResource postfixLabelTemplate}"/>
+        </syncfusion:SfChart.SecondaryAxis>
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -666,9 +521,7 @@ chart.SecondaryAxis = new NumericalAxis()
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     PostfixLabelTemplate = chart.Resources["postfixLabelTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
@@ -687,41 +540,29 @@ chart.SecondaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="labelTemplate">
-
-            <Border Background="Gray" CornerRadius="5" >
-
-                    <TextBlock Text="{Binding LabelContent}" Foreground="White"
-                                   
-                                FontStyle="Normal" FontSize="10" 
-                                   
-                                FontWeight="Bold" Margin="3"/>
-
-                    <Border.Effect>
-
-                        <DropShadowEffect ShadowDepth="6" Direction="315"
-                                              
-                                          Color="LightGray" Opacity="0.25"
-                                              
-                                          BlurRadius="0.8" />
-
-                    </Border.Effect>
-
+            <Border Background="Gray" CornerRadius="5">
+                <TextBlock Text="{Binding LabelContent}" 
+                        Foreground="White"                                  
+                        FontStyle="Normal" 
+                        FontSize="10"                                    
+                        FontWeight="Bold" 
+                        Margin="3"/>
+                <Border.Effect>
+                    <DropShadowEffect 
+                        ShadowDepth="6" 
+                        Direction="315"                                           Color="LightGray" 
+                        Opacity="0.25"                                              
+                        BlurRadius="0.8" />
+                </Border.Effect>
             </Border>
-
-       </DataTemplate>
-
+        </DataTemplate>
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.PrimaryAxis>
-
         <syncfusion:CategoryAxis LabelTemplate="{StaticResource labelTemplate}"/>
-
     </syncfusion:SfChart.PrimaryAxis>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -730,9 +571,7 @@ chart.SecondaryAxis = new NumericalAxis()
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
@@ -751,10 +590,8 @@ This property allows us to set the distance between the axis header and the axis
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis Header="Demand" LabelExtent="50" >
-
-</syncfusion:CategoryAxis>
+    <syncfusion:CategoryAxis Header="Demand" LabelExtent="50"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
@@ -762,11 +599,8 @@ This property allows us to set the distance between the axis header and the axis
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     Header = "Demand",
-
     LabelExtent = 50
-
 };
 
 {% endhighlight %}
@@ -796,20 +630,16 @@ None option is used to display all the label even if it intersects. The followin
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis LabelsIntersectAction="None"/>
-
+    <syncfusion:DateTimeAxis  LabelsIntersectAction="None"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis = new CategoryAxis()
+chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelsIntersectAction = AxisLabelsIntersectAction.None
-
 };
 
 {% endhighlight %}
@@ -828,9 +658,7 @@ Hide option is used to hide the labels if it intersects .You can define the hide
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  LabelsIntersectAction="Hide"/>
-
+    <syncfusion:DateTimeAxis  LabelsIntersectAction="Hide"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -839,9 +667,7 @@ Hide option is used to hide the labels if it intersects .You can define the hide
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelsIntersectAction = AxisLabelsIntersectAction.Hide
-
 };
 
 {% endhighlight %}
@@ -860,11 +686,7 @@ This option is used to move the labels to next row if it intersects .The followi
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  LabelsIntersectAction="MultipleRows">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis LabelsIntersectAction="MultipleRows"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -873,9 +695,7 @@ This option is used to move the labels to next row if it intersects .The followi
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows
-
 };
 
 {% endhighlight %}
@@ -893,19 +713,15 @@ This option in [`LabelsIntersectAction`](https://help.syncfusion.com/cr/wpf/Sync
 
 {% highlight xml %}
 
-<syncfusion:CategoryAxis LabelsIntersectAction="Auto">
-
-</syncfusion:CategoryAxis>
+<syncfusion:DateTimeAxis LabelsIntersectAction="Auto"></syncfusion:DateTimeAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis = new CategoryAxis()
+chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelsIntersectAction = AxisLabelsIntersectAction.Auto
-
 };
 
 {% endhighlight %}
@@ -933,11 +749,7 @@ The following are the customizing options in [`EdgeLabelsDrawingMode`](https://h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  EdgeLabelsDrawingMode="Center" >
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis EdgeLabelsDrawingMode="Center"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -946,9 +758,7 @@ The following are the customizing options in [`EdgeLabelsDrawingMode`](https://h
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center
-
 };
 
 {% endhighlight %}
@@ -964,9 +774,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  EdgeLabelsDrawingMode="Shift" ></syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis DateTimeAxis LabelFormat="MMM-dd" EdgeLabelsDrawingMode="Shift"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -975,16 +783,14 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Shift
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF Chart displays Axis Edge Label from Left to Right Position](Axis_images/wpf-chart-shift-axis-edge-label.jpeg)
+![WPF Chart displays Axis Edge Label from Left to Right Position](Axis_images/wpf-chart-shift-axis-edge-label.jpg)
 
 
 **Hide**
@@ -994,11 +800,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  EdgeLabelsDrawingMode="Hide">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  EdgeLabelsDrawingMode="Hide"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1007,9 +809,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Hide
-
 };
 
 {% endhighlight %}
@@ -1026,11 +826,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  EdgeLabelsDrawingMode="Fit">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis EdgeLabelsDrawingMode="Fit"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1039,9 +835,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Fit
-
 };
 
 {% endhighlight %}
@@ -1069,13 +863,7 @@ The following code example and image demonstrates the AlwaysVisible option while
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis EdgeLabelsVisibilityMode="AlwaysVisible" 
-
-EnableScrollBar="True">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis EdgeLabelsVisibilityMode="AlwaysVisible" EnableScrollBar="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1084,9 +872,7 @@ EnableScrollBar="True">
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.AlwaysVisible
-
 };
 
 {% endhighlight %}
@@ -1105,11 +891,7 @@ Visible option is used to display the edge labels (first and last label) irrespe
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis EdgeLabelsVisibilityMode="Visible" EnableScrollBar="True" >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis EdgeLabelsVisibilityMode="Visible" EnableScrollBar="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1118,9 +900,7 @@ Visible option is used to display the edge labels (first and last label) irrespe
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     EdgeLabelsVisibilityMode = EdgeLabelsVisibilityMode.Visible
-
 };
 
 {% endhighlight %}
@@ -1139,15 +919,11 @@ chart.PrimaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis ShowLabelBorder="True"/>
-
+    <syncfusion:CategoryAxis ShowLabelBorder="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-</syncfusion:NumericalAxis ShowLabelBorder="True"  />       
-
+    <syncfusion:NumericalAxis ShowLabelBorder="True"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -1155,13 +931,11 @@ chart.PrimaryAxis = new NumericalAxis()
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-            
 {
-     ShowLabelBorder = true,                
+    ShowLabelBorder = true,
 };
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
     ShowLabelBorder = true
 };
@@ -1179,15 +953,11 @@ The border color and width can be customized with [`LabelBorderBrush`](https://h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis LabelBorderWidth="3" ShowLabelBorder="True" LabelBorderBrush="Red"/>
-
+    <syncfusion:CategoryAxis LabelBorderWidth="3" ShowLabelBorder="True" LabelBorderBrush="Red"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-</syncfusion:NumericalAxis ShowLabelBorder="True"  LabelBorderWidth="3" LabelBorderBrush="Red"/>       
-
+    <syncfusion:NumericalAxis ShowLabelBorder="True"  LabelBorderWidth="3" LabelBorderBrush="Red"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -1195,25 +965,17 @@ The border color and width can be customized with [`LabelBorderBrush`](https://h
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-            
 {
-    ShowLabelBorder = true,  
-
+    ShowLabelBorder = true,
     LabelBorderWidth = 3,
-
     LabelBorderBrush = new SolidColorBrush(Colors.Red)
-           
 };
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-       ShowLabelBorder = true,
-
-       LabelBorderWidth = 3,
-
-       LabelBorderBrush = new SolidColorBrush(Colors.Red),
-               
+    ShowLabelBorder = true,
+    LabelBorderWidth = 3,
+    LabelBorderBrush = new SolidColorBrush(Colors.Red),
 };
 
 {% endhighlight %}
@@ -1234,11 +996,7 @@ The following code example illustrates the [`ShowGridLines`](https://help.syncfu
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  ShowGridLines="False"  >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis ShowGridLines="False"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1247,9 +1005,7 @@ The following code example illustrates the [`ShowGridLines`](https://help.syncfu
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     ShowGridLines = false
-    
 };
 
 {% endhighlight %}
@@ -1267,28 +1023,18 @@ Style can also be applied to Major and Minor Gridlines using [`MajorGridLineStyl
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
-     <syncfusion:SfChart.Resources>
-
-         <Style TargetType="Line" x:Key="lineStyle">
-
-                <Setter Property="StrokeThickness" Value="2"/>
-
-                <Setter Property="Stroke" Value="Black"/>
-
-                <Setter Property="StrokeDashArray" Value="3,3"/>
-
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <Style TargetType="Line" x:Key="lineStyle">
+            <Setter Property="StrokeThickness" Value="2"/>
+            <Setter Property="Stroke" Value="Black"/>
+            <Setter Property="StrokeDashArray" Value="3,3"/>
         </Style>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.PrimaryAxis>
-
-            <syncfusion:NumericalAxis MajorGridLineStyle="{StaticResource lineStyle}"/>
-
+        <syncfusion:NumericalAxis MajorGridLineStyle="{StaticResource lineStyle}"/>
     </syncfusion:SfChart.PrimaryAxis>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -1297,9 +1043,7 @@ Style can also be applied to Major and Minor Gridlines using [`MajorGridLineStyl
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
-    MajorGridLineStyle = chart.Resources["lineStyle"] as Style 
-    
+    MajorGridLineStyle = chart.Resources["lineStyle"] as Style   
 };
 
 {% endhighlight %}
@@ -1317,30 +1061,20 @@ Minor gridlines will be added automatically when the small tick lines is defined
 
 {% highlight xaml %}
 
-  <syncfusion:SfChart x:Name="chart">
-
-      <syncfusion:SfChart.Resources>
-
-            <Style TargetType="Line" x:Key="lineStyle">
-
-                    <Setter Property="StrokeThickness" Value="1"/>
-
-                    <Setter Property="Stroke" Value="DarkGray"/>
-
-                    <Setter Property="StrokeDashArray" Value="3,3"/>
-
-            </Style>
-
-        </syncfusion:SfChart.Resources>
-
-        <syncfusion:SfChart.SecondaryAxis>
-
-                <syncfusion:NumericalAxis SmallTicksPerInterval="3" 
-                                          
-                                          MinorGridLineStyle="{StaticResource lineStyle}"/>
-
-       </syncfusion:SfChart.SecondaryAxis>
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <Style TargetType="Line" x:Key="lineStyle">
+            <Setter Property="StrokeThickness" Value="1"/>
+            <Setter Property="Stroke" Value="DarkGray"/>
+            <Setter Property="StrokeDashArray" Value="3,3"/>
+        </Style>
+    </syncfusion:SfChart.Resources>
 
+    <syncfusion:SfChart.SecondaryAxis>
+        <syncfusion:NumericalAxis 
+            SmallTicksPerInterval="3"                                                                                     
+            MinorGridLineStyle="{StaticResource lineStyle}"/>
+    </syncfusion:SfChart.SecondaryAxis>
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -1349,11 +1083,8 @@ Minor gridlines will be added automatically when the small tick lines is defined
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     SmallTicksPerInterval = 3,
-
     MinorGridLineStyle = chart.Resources["lineStyle"] as Style 
-    
 };
 
 {% endhighlight %}
@@ -1376,9 +1107,7 @@ Tick lines thickness can be customized using [`TickLineSize`](https://help.syncf
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  TickLineSize="10" ></syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  TickLineSize="10"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1387,9 +1116,7 @@ Tick lines thickness can be customized using [`TickLineSize`](https://help.syncf
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
-   TickLineSize = 10 
-    
+   TickLineSize = 10    
 };
 
 {% endhighlight %}
@@ -1408,11 +1135,7 @@ Tick lines can be positioned inside or outside of the chart area using [`TickLin
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis TickLinesPosition="Inside">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis TickLinesPosition="Inside"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1421,9 +1144,7 @@ Tick lines can be positioned inside or outside of the chart area using [`TickLin
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
-   TickLinesPosition = AxisElementPosition.Inside
-    
+   TickLinesPosition = AxisElementPosition.Inside   
 };
 
 {% endhighlight %}
@@ -1441,31 +1162,22 @@ Style can be applied to major tick lines using [`MajorTickLineStyle`](https://he
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
+<syncfusion:SfChart x:Name="chart">
     <syncfusion:SfChart.Resources>
-
-        <Style TargetType="Line" x:Name="lineStyle">
-
+        <Style TargetType="Line" x:Key="lineStyle">
             <Setter Property="StrokeThickness" Value="1"/>
-
             <Setter Property="Stroke" Value="Black"/>
-
             <Setter Property="StrokeDashArray" Value="3,3"/>
-
         </Style>
-
     </syncfusion:SfChart.Resources>
 
-    <syncfusion:SfChart.SecondaryAxis>
-
-                <syncfusion:NumericalAxis TickLineSize="10"
-                                          
-                                          MajorTickLineStyle="{StaticResource lineStyle}"/>
-
-    </syncfusion:SfChart.SecondaryAxis>
-
- </syncfusion:SfChart>
+    <syncfusion:SfChart.PrimaryAxis>
+        <syncfusion:NumericalAxis 
+            TickLineSize="10"                                         
+            MajorTickLineStyle="{StaticResource lineStyle}">
+        </syncfusion:NumericalAxis>
+    </syncfusion:SfChart.PrimaryAxis>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
@@ -1473,11 +1185,8 @@ Style can be applied to major tick lines using [`MajorTickLineStyle`](https://he
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     TickLineSize = 10,
-
     MajorTickLineStyle = chart.Resources["lineStyle"] as Style 
-    
 };
 
 {% endhighlight %}
@@ -1498,11 +1207,7 @@ The following code example demonstrates the small ticks set for every interval.
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis Interval="1" SmallTicksPerInterval="4" >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Interval="1" SmallTicksPerInterval="4"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1511,11 +1216,8 @@ The following code example demonstrates the small ticks set for every interval.
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     Interval = 1,
-
     SmallTicksPerInterval = 4
-    
 };
 
 {% endhighlight %}
@@ -1536,11 +1238,7 @@ The following code example demonstrates the positioning of minor tick lines insi
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis SmallTicksPerInterval="2" SmallTickLinesPosition="Inside">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis SmallTicksPerInterval="2" SmallTickLinesPosition="Inside"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1549,11 +1247,8 @@ The following code example demonstrates the positioning of minor tick lines insi
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     SmallTicksPerInterval = 2,
-
     SmallTickLinesPosition = AxisElementPosition.Inside
-    
 };
 
 {% endhighlight %}
@@ -1572,11 +1267,11 @@ The thickness of the minor tick lines can be customized using [`SmallTickLineSiz
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis Interval="1" SmallTicksPerInterval="3" SmallTickLineSize="10">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis 
+        Interval="1" 
+        SmallTicksPerInterval="3" 
+        SmallTickLineSize="10">
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1585,13 +1280,9 @@ The thickness of the minor tick lines can be customized using [`SmallTickLineSiz
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     Interval = 1,
-
     SmallTicksPerInterval = 3,
-
     SmallTickLineSize = 10
-    
 };
 
 {% endhighlight %}
@@ -1607,31 +1298,22 @@ Styling customization of minor tick lines can be defined using [`MinorTickLineSt
 {% highlight xaml %}
 
  <syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <Style TargetType="Line" x:Key="lineStyle" >
+            <Setter Property="StrokeThickness" Value="0.5"/>
+            <Setter Property="Stroke" Value="Black"/>
+        </Style>
+    </syncfusion:SfChart.Resources>
 
-     <syncfusion:SfChart.Resources>
-
-                <Style TargetType="Line" x:Name="lineStyle" >
-
-                    <Setter Property="StrokeThickness" Value="0.5"/>
-
-                    <Setter Property="Stroke" Value="Black"/>
-
-                </Style>
-
-     </syncfusion:SfChart.Resources>
-
-     <syncfusion:SfChart.SecondaryAxis>
-
-            <syncfusion:NumericalAxis FontSize="12"  Interval="1"
-                                          
-                                      SmallTicksPerInterval="3" 
-                                          
-                                      TickLineSize="10" SmallTickLineSize="5"
-                                          
-                                      MinorTickLineStyle="{StaticResource lineStyle}"/>
-
-    </syncfusion:SfChart.SecondaryAxis>
-
+    <syncfusion:SfChart.PrimaryAxis>
+        <syncfusion:NumericalAxis 
+            FontSize="12"  
+            Interval="1"                                                                            
+            SmallTicksPerInterval="3"                                                                                
+            TickLineSize="10" 
+            SmallTickLineSize="5"                                                                                
+            MinorTickLineStyle="{StaticResource lineStyle}"/>
+    </syncfusion:SfChart.PrimaryAxis>
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -1640,17 +1322,11 @@ Styling customization of minor tick lines can be defined using [`MinorTickLineSt
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     Interval = 1,
-
     SmallTicksPerInterval = 3,
-
     TickLineSize = 10,
-
     SmallTickLineSize = 5
-
     MinorTickLineStyle = chart.Resources["lineStyle"] as Style 
-    
 };
 
 {% endhighlight %}
@@ -1679,73 +1355,61 @@ The [`RangeStyles`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 {% highlight xaml %}
 
 
-  <syncfusion:SfChart.Resources>
-
-         <Style TargetType="Line" x:Key="RangeLineStyle">
-
-                <Setter Property="StrokeThickness" Value="2"/>
-
-                <Setter Property="Stroke" Value="RoyalBlue"/>
-
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <Style TargetType="Line" x:Key="RangeLineStyle">
+            <Setter Property="StrokeThickness" Value="2"/>
+            <Setter Property="Stroke" Value="RoyalBlue"/>
         </Style>
 
-         <Style TargetType="Line" x:Key="lineStyle">
-
-                <Setter Property="StrokeThickness" Value="2"/>
-
-                <Setter Property="Stroke" Value="Green"/>
-
+        <Style TargetType="Line" x:Key="lineStyle">
+            <Setter Property="StrokeThickness" Value="2"/>
+            <Setter Property="Stroke" Value="Green"/>
         </Style>
+    </syncfusion:SfChart.Resources>
 
-</syncfusion:SfChart.Resources>
-
-<syncfusion:SfChart.SecondaryAxis>  
-
-    <syncfusion:NumericalAxis MajorGridLineStyle= "{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}">
-        <syncfusion:NumericalAxis.LabelStyle>
-            <syncfusion:LabelStyle Foreground="Green"/>
-        </syncfusion:NumericalAxis.LabelStyle>    
-        <syncfusion:NumericalAxis.RangeStyles>
+    <syncfusion:SfChart.SecondaryAxis>
+        <syncfusion:NumericalAxis MajorGridLineStyle= "{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}">
+            
+            <syncfusion:NumericalAxis.LabelStyle>
+                <syncfusion:LabelStyle Foreground="Green"/>
+            </syncfusion:NumericalAxis.LabelStyle>
+            
+            <syncfusion:NumericalAxis.RangeStyles>
                 <syncfusion:ChartAxisRangeStyleCollection>
-                      <syncfusion:ChartAxisRangeStyle Start="18" End="22" MajorGridLineStyle= "{StaticResource RangeLineStyle}" MajorTickLineStyle = "{StaticResource RangeLineStyle}">                    <syncfusion:ChartAxisRangeStyle.LabelStyle>
-            <syncfusion:LabelStyle Foreground="RoyalBlue" />
-          </syncfusion:ChartAxisRangeStyle.LabelStyle>
-                     </syncfusion:ChartAxisRangeStyle>
+                    <syncfusion:ChartAxisRangeStyle Start="18" End="22" MajorGridLineStyle= "{StaticResource RangeLineStyle}" MajorTickLineStyle = "{StaticResource RangeLineStyle}">
+                        <syncfusion:ChartAxisRangeStyle.LabelStyle>
+                            <syncfusion:LabelStyle Foreground="RoyalBlue" />
+                        </syncfusion:ChartAxisRangeStyle.LabelStyle>
+                    </syncfusion:ChartAxisRangeStyle>
                 </syncfusion:ChartAxisRangeStyleCollection>
             </syncfusion:NumericalAxis.RangeStyles>
-    </syncfusion:NumericalAxis>
-
-</syncfusion:SfChart.SecondaryAxis>
+            
+        </syncfusion:NumericalAxis>
+    </syncfusion:SfChart.SecondaryAxis>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            NumericalAxis secondaryAxis = new NumericalAxis();
-
-            secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style ;
-
-            secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style;
-
-            secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green);
-     
-            ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection();
-
-            ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 };
-
-            rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style ;
+NumericalAxis secondaryAxis = new NumericalAxis();
+secondaryAxis.MajorGridLineStyle = chart.Resources["lineStyle"] as Style;
+secondaryAxis.MajorTickLineStyle = chart.Resources["lineStyle"] as Style;
+secondaryAxis.LabelStyle.Foreground = new SolidColorBrush(Colors.Green);
 
-            rangeStyle.LabelStyle = new LabelStyle();
+ChartAxisRangeStyleCollection axisRangeStyles = new ChartAxisRangeStyleCollection();
 
-            rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue);
+ChartAxisRangeStyle rangeStyle = new ChartAxisRangeStyle() { Start = 18, End = 22 };
+rangeStyle.MajorGridLineStyle = chart.Resources["RangeLineStyle"] as Style;
+rangeStyle.LabelStyle = new LabelStyle();
+rangeStyle.LabelStyle.Foreground = new SolidColorBrush(Colors.RoyalBlue);
+rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style;
 
-            rangeStyle.MajorTickLineStyle = chart.Resources["RangeLineStyle"] as Style;
-            
-            axisRangeStyles.Add(rangeStyle);
-
-            secondaryAxis.RangeStyles = axisRangeStyles;
+axisRangeStyles.Add(rangeStyle);
+secondaryAxis.RangeStyles = axisRangeStyles;
 
-       chart.SecondaryAxis = secondaryAxis;
+chart.SecondaryAxis = secondaryAxis;
             
 
 {% endhighlight %}
@@ -1763,25 +1427,15 @@ SfChart provides support to customize the style of the axis line by defining the
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  Interval="1" >
-
-<syncfusion:NumericalAxis.AxisLineStyle>
-
-<Style TargetType="Line"  >
-
-<Setter Property="StrokeThickness" Value="2"/>
-
-<Setter Property="Stroke" Value="Red"/>
-
-<Setter Property="StrokeDashArray" Value="2,2"/>
-
-</Style>
-
-</syncfusion:NumericalAxis.AxisLineStyle>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  Interval="1" >
+        <syncfusion:NumericalAxis.AxisLineStyle>
+            <Style TargetType="Line"  >
+                <Setter Property="StrokeThickness" Value="2"/>
+                <Setter Property="Stroke" Value="Red"/>
+                <Setter Property="StrokeDashArray" Value="2,2"/>
+            </Style>
+        </syncfusion:NumericalAxis.AxisLineStyle>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1790,11 +1444,8 @@ SfChart provides support to customize the style of the axis line by defining the
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     Interval = 1,
-
-    AxisLineStyle = chart.Resources["lineStyle"] as Style 
-    
+    AxisLineStyle = chart.Resources["lineStyle"] as Style                
 };
 
 {% endhighlight %}
@@ -1813,11 +1464,7 @@ The padding to the axis line is defined using [`AxisLineOffset`](https://help.sy
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis AxisLineOffset="20" >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis AxisLineOffset="20"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -1826,9 +1473,7 @@ The padding to the axis line is defined using [`AxisLineOffset`](https://help.sy
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
-    AxisLineOffset = 20
-    
+    AxisLineOffset = 20   
 };
 
 {% endhighlight %}
@@ -1851,11 +1496,7 @@ SfChart allows you to customize the origin.By default the axis will be rendered
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Origin="3" ShowAxisNextToOrigin="True">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Origin="3" ShowAxisNextToOrigin="True"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -1864,11 +1505,8 @@ SfChart allows you to customize the origin.By default the axis will be rendered
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Origin = 3,
-
-    ShowAxisNextToOrigin = true 
-    
+    ShowAxisNextToOrigin = true    
 };
 
 {% endhighlight %}
@@ -1894,13 +1532,12 @@ The following code example demonstrates the positioning of the header outside ev
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis HeaderPosition="Far"
-
-Origin="3" ShowAxisNextToOrigin="True" Header="Value(In Tonnes)" >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis 
+        HeaderPosition="Far"
+        Origin="1" 
+        ShowAxisNextToOrigin="True" 
+        Header="Value(In Tonnes)">
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -1909,15 +1546,10 @@ Origin="3" ShowAxisNextToOrigin="True" Header="Value(In Tonnes)" >
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Origin = 3,
-
     ShowAxisNextToOrigin = true,
-
     Header = "Value(In Tonnes)",
-
     HeaderPosition = AxisHeaderPosition.Far
-    
 };
 
 {% endhighlight %}
@@ -1936,11 +1568,7 @@ The origin line can be added to chart area by setting the [`ShowOrigin`](https:/
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Origin="3" ShowOrigin="True">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Origin="2" ShowOrigin="True"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -1949,11 +1577,8 @@ The origin line can be added to chart area by setting the [`ShowOrigin`](https:/
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Origin = 3,
-
-    ShowOrigin = true 
-
+    ShowOrigin = true
 };
 
 {% endhighlight %}
@@ -1971,23 +1596,14 @@ The origin line of axis can be customized by using the [`OriginLineStyle`](https
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
- 
     <syncfusion:NumericalAxis Origin="3" ShowOrigin="True">
-
-          <syncfusion:NumericalAxis.OriginLineStyle>
-
-                        <Style TargetType="Line">
-
-                            <Setter Property="Stroke" Value="Red"/>
-
-                            <Setter Property="StrokeDashArray" Value="3"/>
-
-                        </Style>
-
-          </syncfusion:NumericalAxis.OriginLineStyle>
-
+        <syncfusion:NumericalAxis.OriginLineStyle>
+            <Style TargetType="Line">
+                <Setter Property="Stroke" Value="Red"/>
+                <Setter Property="StrokeDashArray" Value="3"/>
+            </Style>
+        </syncfusion:NumericalAxis.OriginLineStyle>
     </syncfusion:NumericalAxis>
-
 </syncfusion:SfChart.SecondaryAxis>
 
 
@@ -1996,23 +1612,16 @@ The origin line of axis can be customized by using the [`OriginLineStyle`](https
 {% highlight c# %}
 
 NumericalAxis numericalAxis = new NumericalAxis()
-
-   {
-        
-        Origin = 3,
-                
-        ShowOrigin = true
-        
-    };
+{
+    Origin = 3,
+    ShowOrigin = true
+};
 
 Style style = new Style(typeof(Line));
-
 style.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.Red)));
-
 style.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection() { 3 }));
 
 numericalAxis.OriginLineStyle = style;
-
 chart.SecondaryAxis = numericalAxis;
 
 {% endhighlight %}
@@ -2043,19 +1652,11 @@ You can choose any type of [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Sync
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis></syncfusion:NumericalAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis></syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2063,7 +1664,6 @@ You can choose any type of [`ChartAxis`](https://help.syncfusion.com/cr/wpf/Sync
 {% highlight c# %}
 
 chart.PrimaryAxis = new NumericalAxis();
-
 chart.SecondaryAxis = new NumericalAxis();
 
 {% endhighlight %}
@@ -2082,11 +1682,7 @@ chart.SecondaryAxis = new NumericalAxis();
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Maximum="2750" Minimum="250" Interval="250">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Maximum="2750" Minimum="250" Interval="250"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2095,13 +1691,9 @@ chart.SecondaryAxis = new NumericalAxis();
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Maximum = 2750,
-
     Minimum = 250,
-
     Interval = 250
-
 };
 
 {% endhighlight %}
@@ -2122,11 +1714,7 @@ N> If  minimum or maximum value is set, the other value is calculated by default
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis StartRangeFromZero="True">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis StartRangeFromZero="True"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2135,9 +1723,7 @@ N> If  minimum or maximum value is set, the other value is calculated by default
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
    StartRangeFromZero = true
-
 };
 
 {% endhighlight %}
@@ -2158,11 +1744,7 @@ N> By default, Range is calculated between the minimum and maximum value of the
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis >
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis></syncfusion:CategoryAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2187,11 +1769,7 @@ In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis LabelPlacement="BetweenTicks">
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis LabelPlacement="BetweenTicks"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2200,9 +1778,7 @@ In [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     LabelPlacement = LabelPlacement.BetweenTicks
-
 };
 
 {% endhighlight %}
@@ -2221,10 +1797,8 @@ By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 
 {% endhighlight %}
@@ -2232,11 +1806,8 @@ By default, [`CategoryAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-            
 };
 
 {% endhighlight %}
@@ -2272,21 +1843,16 @@ The default value of [`AggregateFunctions`](https://help.syncfusion.com/cr/wpf/S
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-            
 };
 
 {% endhighlight %}
@@ -2304,23 +1870,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Average"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Average"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-    
     AggregateFunctions = AggregateFunctions.Average
-            
 };
 
 {% endhighlight %}
@@ -2338,23 +1898,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Count"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Count"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-    
     AggregateFunctions = AggregateFunctions.Count
-            
 };
 
 {% endhighlight %}
@@ -2372,23 +1926,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Max"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Max"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-    
     AggregateFunctions = AggregateFunctions.Max
-            
 };
 
 {% endhighlight %}
@@ -2406,23 +1954,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Min"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Min"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-    
     AggregateFunctions = AggregateFunctions.Min
-            
 };
 
 {% endhighlight %}
@@ -2440,23 +1982,17 @@ The following code example illustrates the axis with [`AggregateFunctions`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Sum"/>
-                
- </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:CategoryAxis IsIndexed="False" AggregateFunctions="Sum"/>
+</syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
-
 {
-                
     IsIndexed = false,
-    
     AggregateFunctions = AggregateFunctions.Sum
-            
 };
 
 {% endhighlight %}
@@ -2474,9 +2010,7 @@ chart.PrimaryAxis = new CategoryAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  LabelFormat="MMM-dd"></syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis LabelFormat="MMM-dd"></syncfusion:DateTimeAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2485,9 +2019,7 @@ chart.PrimaryAxis = new CategoryAxis()
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     LabelFormat = "MMM-dd"
-
 };
 
 {% endhighlight %}
@@ -2506,13 +2038,13 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  Minimum="2015/01/10" Maximum="2015/07/01" LabelFormat="MMM-dd" 
-
-IntervalType="Months" Interval="1">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  
+        Minimum="2015/01/10" 
+        Maximum="2015/07/01" 
+        LabelFormat="MMM-dd" 
+        IntervalType="Months" 
+        Interval="1">
+    </syncfusion:DateTimeAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2521,17 +2053,11 @@ IntervalType="Months" Interval="1">
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
-    Minimum = new DateTime(2015,01,10),
-
-    Maximum = new DateTime(2015,07,01),
-
+    Minimum = new DateTime(2015, 01, 10),
+    Maximum = new DateTime(2015, 07, 01),
     LabelFormat = "MMM-dd",
-
     IntervalType = DateTimeIntervalType.Months,
-
     Interval = 1
-
 };
 
 {% endhighlight %}
@@ -2558,13 +2084,12 @@ The following code snippet demonstrates the business hours support in DateTimeAx
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis EnableBusinessHours="True" OpenTime="9" 
-
-CloseTime="24" WorkingDays="Friday,Saturday,Sunday,Monday,Tuesday,Wednesday,Sunday">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis 
+        EnableBusinessHours="True" 
+        OpenTime="9" 
+        CloseTime="24" 
+        WorkingDays="Friday,Saturday,Sunday,Monday,Tuesday,Wednesday,Sunday">
+    </syncfusion:DateTimeAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2573,16 +2098,11 @@ CloseTime="24" WorkingDays="Friday,Saturday,Sunday,Monday,Tuesday,Wednesday,Sund
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     EnableBusinessHours = true,
-
     OpenTime = 9,
-
     CloseTime = 24,
-
     WorkingDays = Day.Friday | Day.Saturday | Day.Sunday |
-                Day.Monday | Day.Tuesday| Day.Wednesday| Day.Sunday
-
+    Day.Monday | Day.Tuesday | Day.Wednesday | Day.Sunday
 };
 
 {% endhighlight %}
@@ -2601,11 +2121,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeCategoryAxis LabelFormat="MMM-dd" >
-
-</syncfusion:DateTimeCategoryAxis>
-
+    <syncfusion:DateTimeCategoryAxis LabelFormat="MMM-dd"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2614,9 +2130,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.PrimaryAxis = new DateTimeCategoryAxis()
 {
-
     LabelFormat = "MMM-dd"
-
 };
 
 {% endhighlight %}
@@ -2635,11 +2149,7 @@ chart.PrimaryAxis = new DateTimeCategoryAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:TimeSpanAxis >
-
-</syncfusion:TimeSpanAxis>
-
+    <syncfusion:TimeSpanAxis></syncfusion:TimeSpanAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2664,11 +2174,7 @@ The following code snippet demonstrates the [`Minimum`](https://help.syncfusion.
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:TimeSpanAxis Minimum="00:00:00" Maximum="00:10:00">
-
-</syncfusion:TimeSpanAxis>
-
+    <syncfusion:TimeSpanAxis Minimum="00:00:00" Maximum="00:10:00"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2677,11 +2183,8 @@ The following code snippet demonstrates the [`Minimum`](https://help.syncfusion.
 
 chart.PrimaryAxis = new TimeSpanAxis()
 {
-
     Minimum = new TimeSpan(00, 00, 00),
-
     Maximum = new TimeSpan(00, 10, 00)
-
 };
 
 {% endhighlight %}
@@ -2700,9 +2203,7 @@ chart.PrimaryAxis = new TimeSpanAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:LogarithmicAxis />
-
+    <syncfusion:LogarithmicAxis/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2727,11 +2228,7 @@ You can also change the base for logarithmic values. By default the logarithmic
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:LogarithmicAxis LogarithmicBase="2">
-
-</syncfusion:LogarithmicAxis>
-
+    <syncfusion:LogarithmicAxis LogarithmicBase="2"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2740,9 +2237,7 @@ You can also change the base for logarithmic values. By default the logarithmic
 
 chart.SecondaryAxis = new LogarithmicAxis()
 {
-
     LogarithmicBase = 2
-
 };
 
 {% endhighlight %}
@@ -2761,11 +2256,7 @@ The following code snippet demonstrates the range customization of [`Logarithmic
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:LogarithmicAxis Minimum="100" Maximum="7000" >
-
-</syncfusion:LogarithmicAxis>
-
+    <syncfusion:LogarithmicAxis Minimum="100" Maximum="7000"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2774,11 +2265,8 @@ The following code snippet demonstrates the range customization of [`Logarithmic
 
 chart.SecondaryAxis = new LogarithmicAxis()
 {
-
     Minimum = 100,
-
     Maximum = 7000
-
 };
 
 {% endhighlight %}
@@ -2800,23 +2288,16 @@ By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) ar
 {% highlight xaml %}
 
 <Chart:SfChart.SecondaryAxis>
-
-  <Chart:NumericalAxis IncludeStripLineRange="True" >
-   
+    <Chart:NumericalAxis IncludeStripLineRange="True">
         <Chart:NumericalAxis.StripLines>
-            
-            <Chart:ChartStripLine Start="1000" 
-                                  
-                                  Width="1500" 
-                                  
-                                  Background="LightGray" 
-                                  
-                                  Opacity="0.6"/>
-            
+            <Chart:ChartStripLine
+                Start="1000"
+                Width="1500"
+                Background="LightGray"
+                Opacity="0.6">
+            </Chart:ChartStripLine>
         </Chart:NumericalAxis.StripLines>
-        
-  </Chart:NumericalAxis>
-
+    </Chart:NumericalAxis>
 </Chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2824,21 +2305,14 @@ By default, [`striplines`](https://help.syncfusion.com/wpf/charts/striplines) ar
 {% highlight c# %}
 
 NumericalAxis axis = new NumericalAxis();
-
 axis.IncludeStripLineRange = true;
 
 ChartStripLine stripline = new ChartStripLine()
-
 {
-
     Start = 1000,
-
     Width = 1500,
-
     Background = new SolidColorBrush(Colors.LightGray),
-
     Opacity = 0.6
-
  };
 
  axis.StripLines.Add(stripline);
@@ -2859,15 +2333,11 @@ The property is applicable only for linear axes, and it can be set as shown in t
 {% highlight xaml %}
 
 <Chart:SfChart.SecondaryAxis>
-      
-      <Chart:NumericalAxis IncludeAnnotationRange="True" />
-
+    <Chart:NumericalAxis IncludeAnnotationRange="True" />
 </Chart:SfChart.SecondaryAxis>
-         
-<Chart:SfChart.Annotations>
-      
-      <Chart:LineAnnotation X1="0" X2="4" Y1="0" Y2="3000" />
 
+<Chart:SfChart.Annotations>
+    <Chart:LineAnnotation X1="0" X2="4" Y1="0" Y2="3000" />
 </Chart:SfChart.Annotations>
 
 {% endhighlight %}
@@ -2875,23 +2345,15 @@ The property is applicable only for linear axes, and it can be set as shown in t
 {% highlight c# %}
 
 chart.SecondaryAxis = new NumericalAxis()
-            
-    {
-               
-         IncludeAnnotationRange = true
-    
-    };
+{
+    IncludeAnnotationRange = true
+};
 
 LineAnnotation annotation = new LineAnnotation();
-
 annotation.X1 = 0;
-
 annotation.X2 = 4;
-
 annotation.Y1 = 0;
-
 annotation.Y2 = 3000;
-
 chart.Annotations.Add(annotation);
 
 {% endhighlight %}
@@ -2909,9 +2371,7 @@ Axis can be inverted using the [`IsInversed`](https://help.syncfusion.com/cr/wpf
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis IsInversed="True"/>
-
+    <chart:NumericalAxis IsInversed="True"/>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2940,11 +2400,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis Interval="250">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis Interval="250"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -2953,9 +2409,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Interval = 250
-
 };
 
 {% endhighlight %}
@@ -2974,11 +2428,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis Interval="2">
-
-</syncfusion:CategoryAxis>
-
+    <syncfusion:CategoryAxis Interval="2"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -2987,9 +2437,7 @@ The following code snippet demonstrates the [`Interval`](https://help.syncfusion
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     Interval = 2
-
 };
 
 {% endhighlight %}
@@ -3022,9 +2470,7 @@ The following code snippet demonstrates the DateTimeAxis having one month interv
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  Interval="1"  IntervalType="Months" LabelFormat="MMM-dd"></syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis Interval="1" IntervalType="Months" LabelFormat="MMM-dd"></syncfusion:DateTimeAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3033,13 +2479,9 @@ The following code snippet demonstrates the DateTimeAxis having one month interv
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     Interval = 1,
-
     IntervalType = DateTimeIntervalType.Months,
-
     LabelFormat = "MMM-dd"
-
 };
 
 {% endhighlight %}
@@ -3058,11 +2500,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis DesiredIntervalsCount="7">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis DesiredIntervalsCount="7"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -3071,9 +2509,7 @@ chart.PrimaryAxis = new DateTimeAxis()
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     DesiredIntervalsCount = 7
-
 };
 
 {% endhighlight %}
@@ -3092,23 +2528,16 @@ chart.SecondaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis  MaximumLabels="2">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  MaximumLabels="2"/>
 </syncfusion:SfChart.SecondaryAxis>
 
-<syncfusion:ColumnSeries ItemsSource="{Binding Demands}" XBindingPath="Demand" YBindingPath="Year2010">
-
-<syncfusion:ColumnSeries.YAxis>
-
-<syncfusion:NumericalAxis MaximumLabels="2" >
-
-</syncfusion:NumericalAxis>
-
-</syncfusion:ColumnSeries.YAxis>
-
+<syncfusion:ColumnSeries 
+    ItemsSource="{Binding Demands}" 
+    XBindingPath="Demand" 
+    YBindingPath="Year2010">
+    <syncfusion:ColumnSeries.YAxis>
+        <syncfusion:NumericalAxis MaximumLabels="2"/>
+    </syncfusion:ColumnSeries.YAxis>
 </syncfusion:ColumnSeries>
 
 {% endhighlight %}
@@ -3117,24 +2546,17 @@ chart.SecondaryAxis = new NumericalAxis()
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     MaximumLabels = 2
-
 };
 
 NumericalAxis axis = new NumericalAxis() { MaximumLabels = 2 };
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     YAxis = axis
-
 };
 
 chart.Series.Add(series);
@@ -3179,11 +2601,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="Additional">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis RangePadding="Additional"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3192,9 +2610,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.Additional
-
 };
 
 {% endhighlight %}
@@ -3213,11 +2629,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="Round">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis RangePadding="Round"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3226,9 +2638,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.Round
-
 };
 
 {% endhighlight %}
@@ -3249,11 +2659,7 @@ The following screenshot demonstrates a chart’s x-axis with `RangePadding` set
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="None">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis RangePadding="None"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3262,9 +2668,7 @@ The following screenshot demonstrates a chart’s x-axis with `RangePadding` set
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.None
-
 };
 
 {% endhighlight %}
@@ -3282,11 +2686,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="RoundStart">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  RangePadding="RoundStart"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3295,9 +2695,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.RoundStart
-
 };
 
 {% endhighlight %}
@@ -3316,11 +2714,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="RoundEnd">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis RangePadding="RoundEnd"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3329,9 +2723,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.RoundEnd
-
 };
 
 {% endhighlight %}
@@ -3350,11 +2742,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="PrependInterval">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  RangePadding="PrependInterval"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3363,9 +2751,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.PrependInterval
-
 };
 
 {% endhighlight %}
@@ -3384,11 +2770,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis  RangePadding="AppendInterval">
-
-</syncfusion:DateTimeAxis>
-
+    <syncfusion:DateTimeAxis  RangePadding="AppendInterval"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3397,9 +2779,7 @@ When [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Char
 
 chart.PrimaryAxis = new DateTimeAxis()
 {
-
     RangePadding = DateTimeRangePadding.AppendInterval
-
 };
 
 {% endhighlight %}
@@ -3443,11 +2823,7 @@ The following screenshot illustrates a chart’s y-axis with [`RangePadding`](ht
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="Normal">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis RangePadding="Normal"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3456,9 +2832,7 @@ The following screenshot illustrates a chart’s y-axis with [`RangePadding`](ht
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.Additional
-
 };
 
 {% endhighlight %}
@@ -3479,11 +2853,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="Additional">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis RangePadding="Additional"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3492,9 +2862,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.Additional
-
 };
 
 {% endhighlight %}
@@ -3513,11 +2881,7 @@ The following screenshot demonstrates [`RangePadding`](https://help.syncfusion.c
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="None">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  RangePadding="None"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3526,9 +2890,7 @@ The following screenshot demonstrates [`RangePadding`](https://help.syncfusion.c
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.None
-
 };
 
 {% endhighlight %}
@@ -3547,13 +2909,9 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 {% highlight xaml %}
 
-<syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="RoundStart">
-
-</syncfusion:NumericalAxis>
-
-</syncfusion:SfChart.PrimaryAxis>
+ <syncfusion:SfChart.PrimaryAxis>
+     <syncfusion:NumericalAxis  RangePadding="RoundStart"/>
+ </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
@@ -3561,9 +2919,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.RoundStart
-
 };
 
 {% endhighlight %}
@@ -3584,11 +2940,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="RoundEnd">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis RangePadding="RoundEnd"></syncfusion:NumericalAxis>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3597,9 +2949,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.RoundEnd
-
 };
 
 {% endhighlight %}
@@ -3620,11 +2970,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="PrependInterval">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  RangePadding="PrependInterval"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3633,9 +2979,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.PrependInterval
-
 };
 
 {% endhighlight %}
@@ -3656,11 +3000,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  RangePadding="AppendInterval">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  RangePadding="AppendInterval"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3669,9 +3009,7 @@ The following screenshot demonstrates a chart’s x-axis with [`RangePadding`](h
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     RangePadding = NumericalPadding.AppendInterval
-
 };
 
 {% endhighlight %}
@@ -3690,19 +3028,11 @@ chart.PrimaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  PlotOffset="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  PlotOffset="30"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis PlotOffset="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis PlotOffset="30"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -3711,16 +3041,12 @@ chart.PrimaryAxis = new NumericalAxis()
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     PlotOffset = 30
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     PlotOffset = 30
-
 };
 
 {% endhighlight %}
@@ -3738,19 +3064,11 @@ chart.SecondaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  PlotOffsetStart="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis  PlotOffsetStart="30"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis PlotOffsetStart="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis PlotOffsetStart="30"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -3759,16 +3077,12 @@ chart.SecondaryAxis = new NumericalAxis()
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     PlotOffsetStart = 30
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     PlotOffsetStart = 30
-
 };
 
 {% endhighlight %}
@@ -3786,19 +3100,11 @@ chart.SecondaryAxis = new NumericalAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  PlotOffsetEnd="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis PlotOffsetEnd="30"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis PlotOffsetEnd="30">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis PlotOffsetEnd="30"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -3807,16 +3113,12 @@ chart.SecondaryAxis = new NumericalAxis()
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     PlotOffsetEnd = 30
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     PlotOffsetEnd = 30
-
 };
 
 {% endhighlight %}
@@ -3840,9 +3142,7 @@ In [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingDeltaType = "Days">
-
+    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingDeltaType = "Days"/>
 </chart:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3852,7 +3152,6 @@ In [`DateTimeAxis`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 chart.PrimaryAxis = new DateTimeAxis()
 {
       AutoScrollingDelta = 3,
-	  
       AutoScrollingDeltaType = DateTimeIntervalType.Days
 };
 
@@ -3869,9 +3168,7 @@ The [`AutoScrollingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingMode = "Start">
-
+    <chart:DateTimeAxis AutoScrollingDelta = "3" AutoScrollingMode = "Start"/>
 </chart:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3881,7 +3178,6 @@ The [`AutoScrollingMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 chart.PrimaryAxis = new DateTimeAxis()
 {
       AutoScrollingDelta = 3,
-	  
       AutoScrollingMode = ChartAutoScrollingMode.Start
 };
 
@@ -3903,13 +3199,7 @@ If you set [`EnableAutoIntervalOnZooming`](https://help.syncfusion.com/cr/wpf/Sy
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:NumericalAxis  EnableScrollBar="True" Interval="1"
-
-EnableAutoIntervalOnZooming="False">
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis EnableScrollBar="True" Interval="1" EnableAutoIntervalOnZooming="False"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -3918,13 +3208,9 @@ EnableAutoIntervalOnZooming="False">
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     EnableScrollBar = true,
-
     EnableAutoIntervalOnZooming = false,
-
     Interval = 1
-
 };
 
 {% endhighlight %}
@@ -3943,28 +3229,23 @@ By default, all the series are plotted based on primary and secondary axis. You
 
 {% highlight xaml %}
 
-<syncfusion:ColumnSeries ItemsSource="{Binding Demands}"
-
-XBindingPath="Demand"  YBindingPath="Year2011">
-
+<syncfusion:ColumnSeries 
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"  
+    YBindingPath="Year2011">
 </syncfusion:ColumnSeries>
 
-<syncfusion:LineSeries  ItemsSource="{Binding Demands}"
-
-XBindingPath="Date"  YBindingPath="Year2011">
-
-<syncfusion:LineSeries.XAxis>
-
-<syncfusion:DateTimeAxis />
-
-</syncfusion:LineSeries.XAxis>
-
-<syncfusion:LineSeries.YAxis>
-
-<syncfusion:NumericalAxis/>
-
-</syncfusion:LineSeries.YAxis>
-
+<syncfusion:LineSeries  
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Date"  
+    YBindingPath="Year2011">
+    <syncfusion:LineSeries.XAxis>
+        <syncfusion:DateTimeAxis />
+    </syncfusion:LineSeries.XAxis>
+
+    <syncfusion:LineSeries.YAxis>
+        <syncfusion:NumericalAxis/>
+    </syncfusion:LineSeries.YAxis>
 </syncfusion:LineSeries>
 
 {% endhighlight %}
@@ -3973,42 +3254,29 @@ XBindingPath="Date"  YBindingPath="Year2011">
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
-    YBindingPath = "Year2011"
-    
+    YBindingPath = "Year2011"  
 };
 
 LineSeries series2 = new LineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Date",
-
     YBindingPath = "Year2011",
-
 };
 
 series2.XAxis = new DateTimeAxis()
 {
-
     Header = "Additional X Axis"
-
 };
 
 series2.YAxis = new NumericalAxis()
 {
-
     Header = "Additional Y Axis"
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 
@@ -4029,40 +3297,27 @@ In the above screenshot, the LineSeries is plotted based on additional X & Y axe
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1" />
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis =  new CategoryAxis()           
 {
-     ShowLabelBorder = true,
-            
+    ShowLabelBorder = true,        
 };
             
-ChartMultiLevelLabel label = new ChartMultiLevelLabel()
-           
+ChartMultiLevelLabel label = new ChartMultiLevelLabel()      
 {
- 
-       Start = -0.5,
-
-       End = 2.5,
-
-       Text = "Quarter 1"
-
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label);
@@ -4134,46 +3389,30 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
+    <chart:CategoryAxis LabelBorderBrush="Red" LabelBorderWidth="3"  ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
+</chart:SfChart.PrimaryAxis>
 
-<chart:CategoryAxis  LabelBorderBrush="Red" LabelBorderWidth="3"  ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
+{% endhighlight %}
 
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"  />
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
-</chart:SfChart.PrimaryAxis>
-
-{% endhighlight %}
-
-{% highlight c# %}
+{% highlight c# %}
 
 chart.PrimaryAxis =  new CategoryAxis()
-            
 {
     LabelBorderWidth = 3,
-
     ShowLabelBorder = true,
-
     LabelBorderBrush = new SolidColorBrush(Colors.Red),
-            
 };
             
-ChartMultiLevelLabel label = new ChartMultiLevelLabel()
-           
+ChartMultiLevelLabel label = new ChartMultiLevelLabel()          
 {
- 
-       Start = -0.5,
-
-       End = 2.5,
-
-       Text = "Quarter 1",
-
-       BorderWidth = 4
-
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
+    BorderWidth = 4
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label);
@@ -4196,148 +3435,99 @@ chart.PrimaryAxis.MultiLevelLabels.Add(label);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis  ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"/>
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis  ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis =  new CategoryAxis()       
 {
-     ShowLabelBorder = true,          
+    ShowLabelBorder = true,          
 };
 
-ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
+ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()           
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
-    Start = 2.5,
-                
+    Start = 2.5,               
     End = 5.5,
-                
     Text = "Quarter 2"
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
-    Start = 5.5,
-                
+    Start = 5.5,               
     End = 8.5,
-                
     Text = "Quarter 3"
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4"
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-      ShowLabelBorder = true,
+    ShowLabelBorder = true,
 };
 
-ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
+ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()      
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low"
-            
+    Start = 32,               
+    End = 36,
+    Text = "Low"       
 };
             
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
             
 ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
-
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High"
+    Start = 42,
+    End = 48,
+    Text = "High"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
@@ -4356,156 +3546,104 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"  />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  />
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  />
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" />
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis MultiLevelLabelsBorderType="Brace" ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
-
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-   ShowLabelBorder = true,
-  
-   MultiLevelLabelsBorderType = BorderType.Brace
-            
+    ShowLabelBorder = true,
+    MultiLevelLabelsBorderType = BorderType.Brace
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3",
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4",
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-   ShowLabelBorder = true,
-
-   MultiLevelLabelsBorderType = BorderType.Brace
+    ShowLabelBorder = true,
+    MultiLevelLabelsBorderType = BorderType.Brace
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low",
-            
+    Start = 32,
+    End = 36,
+    Text = "Low",
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium",
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High",
+    Start = 42,
+    End = 48,
+    Text = "High",
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 
-
 {% endhighlight %}
 
 {% endtabs %}
@@ -4518,161 +3656,106 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 
 {% highlight xaml %}
 
-<chart:SfChart.PrimaryAxis  MultiLevelLabelsBorderType="None" ShowLabelBorder="True">
-
-<chart:CategoryAxis>
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" />
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" />
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+<chart:SfChart.PrimaryAxis MultiLevelLabelsBorderType="None" ShowLabelBorder="True">
+    <chart:CategoryAxis>
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis MultiLevelLabelsBorderType="None" ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium" />
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" />
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis MultiLevelLabelsBorderType="None" ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
-
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-    ShowLabelBorder = true,          
-
+    ShowLabelBorder = true,
     MultiLevelLabelsBorderType = BorderType.None
-            
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1"
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2"
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4"
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-    
-    ShowLabelBorder = true,          
-
+    ShowLabelBorder = true,
     MultiLevelLabelsBorderType = BorderType.None
-
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low"
-            
+    Start = 32,
+    End = 36,
+    Text = "Low"
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High"
+    Start = 42,
+    End = 48,
+    Text = "High"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 
-
 {% endhighlight %}
 
 {% endtabs %}
@@ -4686,154 +3769,101 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis   ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"/>
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" />
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" />
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" />
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis  ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low" />
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowLabelBorder="True" MultiLevelLabelsBorderType="WithoutTopAndBottomBorder">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-   ShowLabelBorder = true,
-
-   MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder
-            
+    ShowLabelBorder = true,
+    MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder                
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2",
-           
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3",
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4",
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-    
     ShowLabelBorder = true,
-
-   MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder
-
+    MultiLevelLabelsBorderType = BorderType.WithoutTopAndBottomBorder
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low",
-            
+    Start = 32,
+    End = 36,
+    Text = "Low",
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium",
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High",
+    Start = 42,
+    End = 48,
+    Text = "High",
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
@@ -4854,17 +3884,17 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="11.5" FontFamily="Algerian" Foreground="Blue" FontSize="14" Text="Year - 2016"/>
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel 
+                Start="-0.5" End="11.5" 
+                FontFamily="Algerian" 
+                Foreground="Blue" 
+                FontSize="14" 
+                Text="Year - 2016">
+            </chart:ChartMultiLevelLabel>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -4872,27 +3902,18 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight c# %}
 
 chart.PrimaryAxis =  new CategoryAxis()
-            
 {
       ShowLabelBorder = true,            
 };
             
 ChartMultiLevelLabel label = new ChartMultiLevelLabel()
-           
 {
- 
-    Start = -0.5,
-                
+    Start = -0.5,               
     End = 11.5,
-                
-    Text = "Year - 2016",
-                
+    Text = "Year - 2016", 
     Foreground = new SolidColorBrush(Colors.Blue),
-                
     FontSize = 14,
-                
     FontFamily = new FontFamily("Algerian")
-
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label);
@@ -4915,148 +3936,101 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1" />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis  ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"/>
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-     ShowLabelBorder = true,                       
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
-{
-    
+{                
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2"
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
+
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3"
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4"
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4"
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-      ShowLabelBorder = true,            
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low"
-            
+
+    Start = 32,
+    End = 36,
+    Text = "Low"
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()            
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High"
+    Start = 42,
+    End = 48,
+    Text = "High"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
@@ -5075,145 +4049,96 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"   LabelAlignment="Near" />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  LabelAlignment="Near"/>
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  LabelAlignment="Near"/>
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"  LabelAlignment="Near"/>
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1" LabelAlignment="Near"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" LabelAlignment="Near"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" LabelAlignment="Near"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" LabelAlignment="Near"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"  LabelAlignment="Near"/>
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"  LabelAlignment="Near"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High"  LabelAlignment="Near"/>
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low" LabelAlignment="Near"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium" LabelAlignment="Near"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High" LabelAlignment="Near"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-    ShowLabelBorder = true,                       
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
-    
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2",
-
     LabelAlignment = LabelAlignment.Near
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3",
-
     LabelAlignment = LabelAlignment.Near
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4",
-
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
-{   
-    ShowLabelBorder = true,            
+{
+    ShowLabelBorder = true,
 };
 
-ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
+ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low",
-
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = 32,
+    End = 36,
+    Text = "Low",
+    LabelAlignment = LabelAlignment.Near
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 {
     Start = 36,
-                
+
     End = 42,
-    
+
     Text = "Medium",
 
     LabelAlignment = LabelAlignment.Near
@@ -5222,15 +4147,11 @@ ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High",
-
-     LabelAlignment = LabelAlignment.Near
+    Start = 42,
+    End = 48,
+    Text = "High",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
@@ -5249,162 +4170,106 @@ chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  ShowLabelBorder="True">
-
-<chart:CategoryAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="-0.5" End="2.5"  Text="Quarter 1"   LabelAlignment="Far" />
-
-<chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2"  LabelAlignment="Far"/>
-
-<chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3"  LabelAlignment="Far"/>
-
-<chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4"  LabelAlignment="Far"/>
-
-</chart:CategoryAxis.MultiLevelLabels>
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis ShowLabelBorder="True">
+        <chart:CategoryAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="-0.5" End="2.5" Text="Quarter 1" LabelAlignment="Far"/>
+            <chart:ChartMultiLevelLabel Start="2.5" End="5.5" Text="Quarter 2" LabelAlignment="Far"/>
+            <chart:ChartMultiLevelLabel Start="5.5" End="8.5" Text="Quarter 3" LabelAlignment="Far"/>
+            <chart:ChartMultiLevelLabel Start="8.5" End="11.5" Text="Quarter 4" LabelAlignment="Far"/>
+        </chart:CategoryAxis.MultiLevelLabels>
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis  ShowLabelBorder="True">
-                    
-<chart:NumericalAxis.MultiLevelLabels>
-                    
-<chart:ChartMultiLevelLabel Start="32" End="36"  Text="Low"  LabelAlignment="Far"/>
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium"  LabelAlignment="Far"/>
-
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High" LabelAlignment="Far"/>
-                    
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low" LabelAlignment="Far"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium" LabelAlignment="Far"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High" LabelAlignment="Far"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-chart.PrimaryAxis =  new CategoryAxis()
-            
+chart.PrimaryAxis = new CategoryAxis()
 {
-      ShowLabelBorder = true,          
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label1 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = -0.5,
-
-     End = 2.5,
-
-     Text = "Quarter 1",
-    
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = -0.5,
+    End = 2.5,
+    Text = "Quarter 1",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label1);
 
 ChartMultiLevelLabel label2 = new ChartMultiLevelLabel()
-           
 {
-    
     Start = 2.5,
-                
     End = 5.5,
-                
     Text = "Quarter 2",
-
     LabelAlignment = LabelAlignment.Near
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label2);
 
 ChartMultiLevelLabel label3 = new ChartMultiLevelLabel()
-
 {
-     
     Start = 5.5,
-                
     End = 8.5,
-                
     Text = "Quarter 3",
-
     LabelAlignment = LabelAlignment.Near
-            
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label3);
 
 ChartMultiLevelLabel label4 = new ChartMultiLevelLabel()
-
 {
-     Start = 8.5,
-               
-     End = 11.5,
-                
-     Text = "Quarter 4",
-
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = 8.5,
+    End = 11.5,
+    Text = "Quarter 4",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.PrimaryAxis.MultiLevelLabels.Add(label4);
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-      ShowLabelBorder = true,          
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-     Start = 32,
-                
-     End = 36,
-     
-     Text = "Low",
-
-     LabelAlignment = LabelAlignment.Near
-            
+    Start = 32,
+    End = 36,
+    Text = "Low",
+    LabelAlignment = LabelAlignment.Near
 };
-            
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
-            
-ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
 
+ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()           
 {
     Start = 36,
-                
     End = 42,
-    
     Text = "Medium",
-
     LabelAlignment = LabelAlignment.Near
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-     Start = 42,
-     
-     End = 48,
-    
-     Text = "High",
-
-     LabelAlignment = LabelAlignment.Near
+    Start = 42,
+    End = 48,
+    Text = "High",
+    LabelAlignment = LabelAlignment.Near
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label7);
@@ -5422,21 +4287,13 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis ShowLabelBorder="True">
-
-<chart:NumericalAxis.MultiLevelLabels>
-
-<chart:ChartMultiLevelLabel Start="32" End="36" Text="Low Temperature"/>
-
-<chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium Temperature"/>
-                        
-<chart:ChartMultiLevelLabel Start="42" End="48" Text="High Temperature"/>
-
-</chart:NumericalAxis.MultiLevelLabels>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowLabelBorder="True">
+        <chart:NumericalAxis.MultiLevelLabels>
+            <chart:ChartMultiLevelLabel Start="32" End="36" Text="Low Temperature"/>
+            <chart:ChartMultiLevelLabel Start="36" End="42" Text="Medium Temperature"/>
+            <chart:ChartMultiLevelLabel Start="42" End="48" Text="High Temperature"/>
+        </chart:NumericalAxis.MultiLevelLabels>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -5444,50 +4301,36 @@ The text of [`ChartMultiLevelLabel`](https://help.syncfusion.com/cr/wpf/Syncfusi
 {% highlight c# %}
 
 chart.SecondaryAxis = new NumericalAxis()
-            
 {
-     ShowLabelBorder = true,          
+    ShowLabelBorder = true,
 };
 
 ChartMultiLevelLabel label5 = new ChartMultiLevelLabel()
-            
 {
-                
-        Start = 32,
-        
-        End = 36,
-        
-        Text = "Low Temperature"
+    Start = 32,
+    End = 36,
+    Text = "Low Temperature"
 };
 
 chart.SecondaryAxis.MultiLevelLabels.Add(label5);
 
 ChartMultiLevelLabel label6 = new ChartMultiLevelLabel()
-
 {
-        Start = 36,
-                
-        End = 42,
-        
-        Text = "Medium Temperature"
-            
+    Start = 36,
+    End = 42,
+    Text = "Medium Temperature"
 };
-    
+
 chart.SecondaryAxis.MultiLevelLabels.Add(label6);
 
 ChartMultiLevelLabel label7 = new ChartMultiLevelLabel()
-
 {
-                
-       Start = 42,
-               
-       End = 48,
-       
-       Text = "High Temperature"
- 
- };
+    Start = 42,
+    End = 48,
+    Text = "High Temperature"
+};
 
- chart.SecondaryAxis.MultiLevelLabels.Add(label7);
+chart.SecondaryAxis.MultiLevelLabels.Add(label7);
 
 {% endhighlight %}
 
@@ -5535,28 +4378,16 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to get axis range in chart`](https://support.syncfusion.com/kb/article/9439/how-can-i-retrieve-the-charts-axis-range-in-wpf)
-
-[`How to wrap the multi-level axis label's text in WPF Chart`](https://support.syncfusion.com/kb/article/8937/how-to-wrap-the-multi-level-axis-labels-text-in-wpf-charts)
-
-[`How to use the DateTimeAxis as SecondaryAxis in WPF Chart`](https://support.syncfusion.com/kb/article/8435/how-to-use-the-datetimeaxis-as-secondaryaxis-in-wpf-sfchart)
-
-[`How to apply the custom labels in WPF Logarithmic Axis`](https://support.syncfusion.com/kb/article/8370/how-to-apply-the-custom-labels-in-wpf-charts-logarithmicaxis)
-
-[`How to customize label formats of date-time axis during the interval transitions`](https://support.syncfusion.com/kb/article/6378/how-to-customize-the-label-formats-of-date-time-axis-during-interval-transitions-in-wpf)
-
-[`How to rotate axis label in the Chart`](https://support.syncfusion.com/kb/article/4968/how-to-rotate-axis-label-in-the-wpf-chart-sfchart)
-
-[`How to hide axis in chart`](https://support.syncfusion.com/kb/article/4919/how-to-hide-axis-in-wpf-chart-sfchart)
-
-[`How to position the primary and secondary axes as the center of chart`](https://support.syncfusion.com/kb/article/3829/how-to-set-the-position-of-primary-and-secondary-axes-of-wpf-sfchart-)
-
-[`How to display the axis labels in a particular format`](https://support.syncfusion.com/kb/article/3503/how-to-display-axis-labels-in-a-particular-format-of-wpf-chart)
-
-[`How to display the axis labels for all datapoints`](https://support.syncfusion.com/kb/article/3172/how-to-display-the-axis-labels-for-all-datapoints-in-wpf-chart-sfchart)
-
-[`How to define ticker labels of custom axis`](https://support.syncfusion.com/kb/article/2776/how-to-define-ticker-labels-of-custom-axis-in-wpf-chart-sfchart)
-
-[`How to display striplines in DateTimeAxis of WPF Chart`](https://support.syncfusion.com/kb/article/9199/how-to-display-striplines-in-datetimeaxis-of-wpf-chart)
-
-[`How to set the custom labels with auto range for axis`](https://support.syncfusion.com/kb/article/5497/how-to-set-the-custom-labels-with-auto-range-for-axis-in-wpf-chart-sfchart)
+[`How to get axis range in chart?`](https://support.syncfusion.com/kb/article/9439/how-can-i-retrieve-the-charts-axis-range-in-wpf)
+[`How to wrap the multi-level axis label's text in WPF Chart?`](https://support.syncfusion.com/kb/article/8937/how-to-wrap-the-multi-level-axis-labels-text-in-wpf-charts)
+[`How to use the DateTimeAxis as SecondaryAxis in WPF Chart?`](https://support.syncfusion.com/kb/article/8435/how-to-use-the-datetimeaxis-as-secondaryaxis-in-wpf-sfchart)
+[`How to apply the custom labels in WPF Logarithmic Axis?`](https://support.syncfusion.com/kb/article/8370/how-to-apply-the-custom-labels-in-wpf-charts-logarithmicaxis)
+[`How to customize label formats of date-time axis during the interval transitions?`](https://support.syncfusion.com/kb/article/6378/how-to-customize-the-label-formats-of-date-time-axis-during-interval-transitions-in-wpf)
+[`How to rotate axis label in the Chart?`](https://support.syncfusion.com/kb/article/4968/how-to-rotate-axis-label-in-the-wpf-chart-sfchart)
+[`How to hide axis in chart?`](https://support.syncfusion.com/kb/article/4919/how-to-hide-axis-in-wpf-chart-sfchart)
+[`How to position the primary and secondary axes as the center of chart?`](https://support.syncfusion.com/kb/article/3829/how-to-set-the-position-of-primary-and-secondary-axes-of-wpf-sfchart-)
+[`How to display the axis labels in a particular format?`](https://support.syncfusion.com/kb/article/3503/how-to-display-axis-labels-in-a-particular-format-of-wpf-chart)
+[`How to display the axis labels for all datapoints?`](https://support.syncfusion.com/kb/article/3172/how-to-display-the-axis-labels-for-all-datapoints-in-wpf-chart-sfchart)
+[`How to define ticker labels of custom axis?`](https://support.syncfusion.com/kb/article/2776/how-to-define-ticker-labels-of-custom-axis-in-wpf-chart-sfchart)
+[`How to display striplines in DateTimeAxis of WPF Chart?`](https://support.syncfusion.com/kb/article/9199/how-to-display-striplines-in-datetimeaxis-of-wpf-chart)
+[`How to set the custom labels with auto range for axis?`](https://support.syncfusion.com/kb/article/5497/how-to-set-the-custom-labels-with-auto-range-for-axis-in-wpf-chart-sfchart)
diff --git a/wpf/Charts/Axis_images/Axis_img1.png b/wpf/Charts/Axis_images/Axis_img1.png
deleted file mode 100644
index c37c74836c..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img1.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img10.png b/wpf/Charts/Axis_images/Axis_img10.png
deleted file mode 100644
index b5962e0046..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img10.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img11.png b/wpf/Charts/Axis_images/Axis_img11.png
deleted file mode 100644
index 6860bf5d7d..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img11.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img12.png b/wpf/Charts/Axis_images/Axis_img12.png
deleted file mode 100644
index 27d73330e6..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img12.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img13.png b/wpf/Charts/Axis_images/Axis_img13.png
deleted file mode 100644
index 6860bf5d7d..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img13.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img14.png b/wpf/Charts/Axis_images/Axis_img14.png
deleted file mode 100644
index b0079dcb49..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img14.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img15.png b/wpf/Charts/Axis_images/Axis_img15.png
deleted file mode 100644
index dc9fbb2b76..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img15.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img16.png b/wpf/Charts/Axis_images/Axis_img16.png
deleted file mode 100644
index 0571e2bd5f..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img16.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img17.png b/wpf/Charts/Axis_images/Axis_img17.png
deleted file mode 100644
index dc9fbb2b76..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img17.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img18.png b/wpf/Charts/Axis_images/Axis_img18.png
deleted file mode 100644
index 17a37e3746..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img18.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img19.png b/wpf/Charts/Axis_images/Axis_img19.png
deleted file mode 100644
index 5b47da7d12..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img19.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img2.png b/wpf/Charts/Axis_images/Axis_img2.png
deleted file mode 100644
index c37c74836c..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img2.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img20.png b/wpf/Charts/Axis_images/Axis_img20.png
deleted file mode 100644
index 011d016a7e..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img20.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img21.png b/wpf/Charts/Axis_images/Axis_img21.png
deleted file mode 100644
index b1ed55068f..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img21.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img22.png b/wpf/Charts/Axis_images/Axis_img22.png
deleted file mode 100644
index eab9433821..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img22.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img23.png b/wpf/Charts/Axis_images/Axis_img23.png
deleted file mode 100644
index 377e568ed0..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img23.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img24.png b/wpf/Charts/Axis_images/Axis_img24.png
deleted file mode 100644
index 6fa7481c3e..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img24.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img25.png b/wpf/Charts/Axis_images/Axis_img25.png
deleted file mode 100644
index 76591d2cb7..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img25.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img26.png b/wpf/Charts/Axis_images/Axis_img26.png
deleted file mode 100644
index 6ba921b275..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img26.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img27.png b/wpf/Charts/Axis_images/Axis_img27.png
deleted file mode 100644
index 3959ff9855..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img27.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img28.png b/wpf/Charts/Axis_images/Axis_img28.png
deleted file mode 100644
index 4636cf54c9..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img28.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img29.png b/wpf/Charts/Axis_images/Axis_img29.png
deleted file mode 100644
index e7e5f8749b..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img29.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img3.png b/wpf/Charts/Axis_images/Axis_img3.png
deleted file mode 100644
index 7e22513bdb..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img3.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img30.png b/wpf/Charts/Axis_images/Axis_img30.png
deleted file mode 100644
index daa437e2ec..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img30.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img31.png b/wpf/Charts/Axis_images/Axis_img31.png
deleted file mode 100644
index c7814b888d..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img31.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img32.png b/wpf/Charts/Axis_images/Axis_img32.png
deleted file mode 100644
index ac3c77ac13..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img32.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img33.png b/wpf/Charts/Axis_images/Axis_img33.png
deleted file mode 100644
index ae481e41f3..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img33.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img34.png b/wpf/Charts/Axis_images/Axis_img34.png
deleted file mode 100644
index f9e761cbdd..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img34.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img35.png b/wpf/Charts/Axis_images/Axis_img35.png
deleted file mode 100644
index 9f30e25f3f..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img35.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img4.png b/wpf/Charts/Axis_images/Axis_img4.png
deleted file mode 100644
index 7e22513bdb..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img4.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img5.png b/wpf/Charts/Axis_images/Axis_img5.png
deleted file mode 100644
index 47ef9d47a1..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img5.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img6.png b/wpf/Charts/Axis_images/Axis_img6.png
deleted file mode 100644
index bb134c5192..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img6.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img7.png b/wpf/Charts/Axis_images/Axis_img7.png
deleted file mode 100644
index a45eaf5543..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img7.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img8.png b/wpf/Charts/Axis_images/Axis_img8.png
deleted file mode 100644
index d4ea0102ac..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img8.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/Axis_img9.png b/wpf/Charts/Axis_images/Axis_img9.png
deleted file mode 100644
index a2abec363c..0000000000
Binary files a/wpf/Charts/Axis_images/Axis_img9.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/axisBinding.png b/wpf/Charts/Axis_images/axisBinding.png
deleted file mode 100644
index 13108d227c..0000000000
Binary files a/wpf/Charts/Axis_images/axisBinding.png and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-always-visible-edge-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-always-visible-edge-axis-label.jpeg
index a08484ee4c..46bd657b5d 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-always-visible-edge-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-always-visible-edge-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-edge-label-in-center.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-edge-label-in-center.jpeg
index 08ec40b00c..e24fbbe202 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-edge-label-in-center.jpeg and b/wpf/Charts/Axis_images/wpf-chart-axis-edge-label-in-center.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-edge-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-edge-label.jpeg
index 0322dad598..f72e40af79 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-edge-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-axis-edge-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpeg
deleted file mode 100644
index 83387b2996..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpg
new file mode 100644
index 0000000000..16aa2ca00c
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-header-customization.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpeg
deleted file mode 100644
index 67ce7a02d3..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpg
new file mode 100644
index 0000000000..ac0cab1857
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-header-style.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-header.jpeg
deleted file mode 100644
index bb08a6a63b..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-header.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-header.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-header.jpg
new file mode 100644
index 0000000000..32e15fcdb4
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-header.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label-border-customization.png b/wpf/Charts/Axis_images/wpf-chart-axis-label-border-customization.png
index 6009a688e5..22d3b1fc78 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-label-border-customization.png and b/wpf/Charts/Axis_images/wpf-chart-axis-label-border-customization.png differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpeg
deleted file mode 100644
index 6d68894bb0..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpg
new file mode 100644
index 0000000000..72623434f8
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-label-formatting.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpeg
deleted file mode 100644
index 480f054dcd..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpg
new file mode 100644
index 0000000000..a8b4b556be
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-label-position.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-label.jpeg
index 1681749c6b..4b9a4eb89d 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpeg b/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpeg
deleted file mode 100644
index 702ad77bac..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpg b/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpg
new file mode 100644
index 0000000000..13b1f30804
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-axis-rotation-angle.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpeg
deleted file mode 100644
index c7450bd818..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpg b/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpg
new file mode 100644
index 0000000000..d8d2d71b75
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-custom-axis-label.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-datetime-axis.jpeg b/wpf/Charts/Axis_images/wpf-chart-datetime-axis.jpeg
index c3b8059a5f..da18db9e41 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-datetime-axis.jpeg and b/wpf/Charts/Axis_images/wpf-chart-datetime-axis.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-fit-axis-label-position.jpeg b/wpf/Charts/Axis_images/wpf-chart-fit-axis-label-position.jpeg
index f1d113c8e9..a718136ee5 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-fit-axis-label-position.jpeg and b/wpf/Charts/Axis_images/wpf-chart-fit-axis-label-position.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-gridlines.jpeg b/wpf/Charts/Axis_images/wpf-chart-gridlines.jpeg
index 7c69273f1f..b5f5b6ff59 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-gridlines.jpeg and b/wpf/Charts/Axis_images/wpf-chart-gridlines.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-hide-axis-edge-label-position.jpeg b/wpf/Charts/Axis_images/wpf-chart-hide-axis-edge-label-position.jpeg
index 096a3cc721..da9fc277bb 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-hide-axis-edge-label-position.jpeg and b/wpf/Charts/Axis_images/wpf-chart-hide-axis-edge-label-position.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-hide-smart-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-hide-smart-axis-label.jpeg
index 3e0f40a4c6..fa57cc33e5 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-hide-smart-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-hide-smart-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-label-axis-border.png b/wpf/Charts/Axis_images/wpf-chart-label-axis-border.png
index f652a78e58..096c7edd49 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-label-axis-border.png and b/wpf/Charts/Axis_images/wpf-chart-label-axis-border.png differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-minor-gridlines.jpeg b/wpf/Charts/Axis_images/wpf-chart-minor-gridlines.jpeg
index 81163f897d..046c3bd171 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-minor-gridlines.jpeg and b/wpf/Charts/Axis_images/wpf-chart-minor-gridlines.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-at-outside-pane-area.jpeg b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-at-outside-pane-area.jpeg
index d61fea379d..f59df1951c 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-at-outside-pane-area.jpeg and b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-at-outside-pane-area.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-customization.jpeg b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-customization.jpeg
index bb28d8c300..add6d03309 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-customization.jpeg and b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-customization.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-inside-pane-area.jpeg b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-inside-pane-area.jpeg
index 9e73484d31..ebe3c0925d 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-inside-pane-area.jpeg and b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines-inside-pane-area.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines.jpeg b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines.jpeg
index f6356f2c48..6ae87a9f7d 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-minor-ticklines.jpeg and b/wpf/Charts/Axis_images/wpf-chart-minor-ticklines.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-multiple-rows-chart-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-multiple-rows-chart-axis-label.jpeg
index 98cc1952e7..2431df6472 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-multiple-rows-chart-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-multiple-rows-chart-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-numerical-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-numerical-axis-label.jpeg
index ed1991ac97..a542eac16a 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-numerical-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-numerical-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-origin-header-position.jpeg b/wpf/Charts/Axis_images/wpf-chart-origin-header-position.jpeg
index 3bd61037a4..b9c959bc78 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-origin-header-position.jpeg and b/wpf/Charts/Axis_images/wpf-chart-origin-header-position.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-rotated-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-rotated-axis-label.jpeg
index 3af60c4d4f..d09e489f59 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-rotated-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-rotated-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpeg
deleted file mode 100644
index a56c08ee91..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpg b/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpg
new file mode 100644
index 0000000000..498e678045
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-shift-axis-edge-label.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-space-between-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-space-between-axis-label.jpeg
index eda5de2a6b..673075a662 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-space-between-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-space-between-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-ticklines-at-outside-area-pane.jpeg b/wpf/Charts/Axis_images/wpf-chart-ticklines-at-outside-area-pane.jpeg
index 2073caebdd..f9723112fb 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-ticklines-at-outside-area-pane.jpeg and b/wpf/Charts/Axis_images/wpf-chart-ticklines-at-outside-area-pane.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-ticklines-inside-area-pane.jpeg b/wpf/Charts/Axis_images/wpf-chart-ticklines-inside-area-pane.jpeg
index b7221c3323..313504a790 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-ticklines-inside-area-pane.jpeg and b/wpf/Charts/Axis_images/wpf-chart-ticklines-inside-area-pane.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-ticklines-thickness.jpeg b/wpf/Charts/Axis_images/wpf-chart-ticklines-thickness.jpeg
index 5933e91573..ab999409cd 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-ticklines-thickness.jpeg and b/wpf/Charts/Axis_images/wpf-chart-ticklines-thickness.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpeg
deleted file mode 100644
index 2328b346ad..0000000000
Binary files a/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpeg and /dev/null differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpg b/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpg
new file mode 100644
index 0000000000..d4c5f0642b
Binary files /dev/null and b/wpf/Charts/Axis_images/wpf-chart-time-span-axis-label.jpg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-units-in-after-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-units-in-after-axis-label.jpeg
index b38217e8de..75a341c67b 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-units-in-after-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-units-in-after-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-units-in-before-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-units-in-before-axis-label.jpeg
index 15fb241ad9..b62a2bb695 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-units-in-before-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-units-in-before-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-visible-edge-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-visible-edge-axis-label.jpeg
index f227b8f00d..0c01aa70e0 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-visible-edge-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-visible-edge-axis-label.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-without-gridlines.jpeg b/wpf/Charts/Axis_images/wpf-chart-without-gridlines.jpeg
index 8e189138c8..56137b705b 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-without-gridlines.jpeg and b/wpf/Charts/Axis_images/wpf-chart-without-gridlines.jpeg differ
diff --git a/wpf/Charts/Axis_images/wpf-chart-without-smart-axis-label.jpeg b/wpf/Charts/Axis_images/wpf-chart-without-smart-axis-label.jpeg
index 07b3634b3e..84039d26d7 100644
Binary files a/wpf/Charts/Axis_images/wpf-chart-without-smart-axis-label.jpeg and b/wpf/Charts/Axis_images/wpf-chart-without-smart-axis-label.jpeg differ
diff --git a/wpf/Charts/CodedUI.md b/wpf/Charts/CodedUI.md
index a6bd382366..b9cb1a7776 100644
--- a/wpf/Charts/CodedUI.md
+++ b/wpf/Charts/CodedUI.md
@@ -61,7 +61,6 @@ N> Syncfusion.SfChart.CUITExtension.WPF.dll need to be installed in GAC location
 
 ## Getting Started
 
-
 ### Coded UI Project Creation
 
 Run Visual Studio in administrator mode
@@ -106,35 +105,32 @@ Once the record is completed, click the GenerateCode icon in CodedUITestBuilder
 {% highlight c# %}
 
 
-			public void RecordedMethod1()
-
-			  {
-
-				 #region Variable Declarations
-
-				 WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom;
+public void RecordedMethod1()            
+{
+    #region Variable Declarations
 
-                 WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
+    WpfSfChart uISfChartCustom = this.UICUITestSampleDemoWindow.UISfChartCustom;
 
-                 WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom;
+    WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
 
-                 WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom;
+    WpfLegend uIChartLegendCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIChartLegendCustom;
 
-                 WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom;
+    WpfChartAxis uINumericalAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UINumericalAxisCustom;
 
-                 WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom;
+    WpfChartAxis uICategoryAxisCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UICategoryAxisCustom;
 
-                 WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom;
+    WpfZoomingBehavior uIZoomInCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomInCustom;
 
-                 WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom;
+    WpfZoomingBehavior uIZoomOutCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomOutCustom;
 
-                 WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom;
+    WpfZoomingBehavior uIZoomResetCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomResetCustom;
 
-                 WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom;
+    WpfZoomingBehavior uIZoomPanCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIZoomPanCustom;
 
-				 #endregion
+    WpfZoomingBehavior uISelectionZoomCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UISelectionZoomCustom;
 
-			 }
+    #endregion
+}
 
 {% endhighlight %}
 
@@ -164,21 +160,14 @@ Click Generate code icon to generate assertion code then close the builder if va
 {% highlight c# %}
 
 public void AssertMethod1()
-
 {
-
-           #region Variable Declarations
-
-           WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
-
-           #endregion
-
-          // Verify that the 'SegmentsCount' property of 'ColumnSeries' custom control equals '10'
-
-          Assert.AreEqual(this.AssertMethod1ExpectedValues.UIColumnSeriesCustomSegmentsCount, uIColumnSeriesCustom.SegmentsCount, "Segemnts Count Mismatched...");
-
+    #region Variable Declarations
+    WpfChartSeries uIColumnSeriesCustom = this.UICUITestSampleDemoWindow.UISfChartCustom.UIColumnSeriesCustom;
+    #endregion
+    
+    // Verify that the 'SegmentsCount' property of 'ColumnSeries' custom control equals '10'
+    Assert.AreEqual(this.AssertMethod1ExpectedValues.UIColumnSeriesCustomSegmentsCount, uIColumnSeriesCustom.SegmentsCount, "Segemnts Count Mismatched...");
 }
-
 {% endhighlight %}
 
 ## Run Tests
diff --git a/wpf/Charts/DataBinding.md b/wpf/Charts/DataBinding.md
index cd04e7996b..3bf1401449 100644
--- a/wpf/Charts/DataBinding.md
+++ b/wpf/Charts/DataBinding.md
@@ -18,19 +18,11 @@ SfChart offers ItemsSource property to bind various datasource ranges from simpl
 
 {% highlight xaml %}
 
-<syncfusion:SfChart >
-
-<syncfusion:LineSeries
-
-ItemsSource="{Binding Demands}"
-
-XBindingPath="Demand"
-
-YBindingPath="Year2010">
-
-</syncfusion:LineSeries>
-
-
+<syncfusion:SfChart>
+    <syncfusion:LineSeries
+        ItemsSource="{Binding Demands}"
+        XBindingPath="Demand"
+        YBindingPath="Year2010"/>
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -41,83 +33,45 @@ SfChart chart = new SfChart();
 
 LineSeries lineSeries = new LineSeries()
 {
-
       ItemsSource = new ViewModel().Demands,
-
       XBindingPath = "Demand",
-
       YBindingPath = "Year2010",
-
 };
 
 chart.Series.Add(lineSeries);
 
 public class GoldDemand
-
 {
-
       public string Demand { get; set; }
-
-
-
       public double Year2010 { get; set; }
-
-
-
       public double Year2011 { get; set; }
-
 }
 
 public sealed partial class MainPage : Page
-
-{
-
-public MainPage()
-
 {
-
-      this.InitializeComponent();
-
-      this.Demands = new ObservableCollection<GoldDemand>
-
+      public ObservableCollection<GoldDemand> Demands { get; set; } 
+      
+      public MainPage()
       {
-
-      new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2},
-
-      new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
-
-      new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
-
-      new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
-
-      new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
-
-
-
-      new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0},
-
-      new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
-
-      new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
-
-
-
-      new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
-
-      new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
-
-      new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
-
-      new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}
-
-      };
-
-      DataContext = this;
-
-}
-
-public ObservableCollection<GoldDemand> Demands { get; set; } 
-
+            this.InitializeComponent();
+            this.Demands = new ObservableCollection<GoldDemand>
+            {
+            new GoldDemand() {Demand = "Jewelry", Year2010 = 1998.0, Year2011 = 2361.2},
+            new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
+            new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
+            new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
+            new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
+            new GoldDemand() {Demand = "Others", Year2010 = 1090.5, Year2011 = 1032.0},
+            new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
+            new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0},
+            new GoldDemand() {Demand = "Electronics", Year2010 = 1284.0, Year2011 = 1328.0},
+            new GoldDemand() {Demand = "Research", Year2010 = 1090.5, Year2011 = 1032.0},
+            new GoldDemand() {Demand = "Investment", Year2010 = 1643.0, Year2011 = 1898.0},
+            new GoldDemand() {Demand = "Bank Purchases", Year2010 = 987.0, Year2011 = 887.0}
+            };
+
+            DataContext = this;
+      }
 }
 
 {% endhighlight %}
@@ -133,7 +87,11 @@ The complex property binding feature enables you to access nested object referen
 
 {% highlight xaml %}
 
-<syncfusion:LineSeries ItemsSource="{Binding  DataWithMulData}" XBindingPath="StadiumObject.CupDetailsObj.CupName" YBindingPath="StadiumObject.NumSeats" /> 
+
+<syncfusion:LineSeries
+    ItemsSource="{Binding DataWithMulData}"
+    XBindingPath="StadiumObject.CupDetailsObj.CupName"
+    YBindingPath="StadiumObject.NumSeats" />
 
 {% endhighlight %}
 
@@ -143,49 +101,31 @@ StadiumDetails stadiumDetails = new StadiumDetails();
 
 LineSeries series = new LineSeries()
 {
-
       ItemsSource = new ViewModel().DataWithMulData,
-
       XBindingPath = "stadiumDetails.CupDetailsObj.CupName",
-
       YBindingPath = "stadiumDetails.NumSeats",
-
       Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 chart.Series.Add(series);
 
 public class StadiumDetails
-
 {
-
       public string PlaceName { get; set; }
-
       public int NumSeats { get; set; }
-
       public int Price { get; set; }
-
       public CupDetails CupDetailsObj { get; set; }
-
 }
 
 public class CupDetails
-
 {
-
       public string CupName { get; set; }
-
 }
 
 public class DataPointWithMulData
-
 {
-
       public string Name { get; set; }
-
       public StadiumDetails StadiumObject { get; set; }
-
 }
 
 {% endhighlight %}
@@ -203,92 +143,54 @@ The following code example demonstrates how to bind the array values for the XBi
 {% highlight xaml %}
 
 <chart:SfChart>
-
-      <chart:ColumnSeries x:Name="series" ItemsSource="{Binding Brands}"
-
-                          XBindingPath="Brand[1]" YBindingPath="Count[0]" >
-
-      </chart:ColumnSeries>
-
+    <chart:ColumnSeries
+        x:Name="series"
+        ItemsSource="{Binding Brands}"
+        XBindingPath="Brand[1]"
+        YBindingPath="Count[0]"/>
 </chart:SfChart>
 
-
 {% endhighlight %}
 
 {% highlight C# %}
 
 public class Model
-
 {
-
       public string[] Brand { get; set; }
-
       public double[] Count { get; set; }
-
 }
 
 public class ViewModel
-
 {
-
    public ViewModel()
-
    {
-
       Brands = new ObservableCollection<Model>();
-
-      Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count 
-
-= new  double[] { 34, 23 } });
-
-      Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count 
-
-=  new double[] { 50, 20 } });
-
-      Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count 
-
-= new double[] { 24, 30 } });
-
-      Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count 
-
-= new double[] { 38, 23 } });
-
-      Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count 
-
-= new double[] { 27, 29 } });
-
+      Brands.Add(new Model() { Brand = new string[] { "Reebok", "Adidas" }, Count = new  double[] { 34, 23 } });
+      Brands.Add(new Model() { Brand = new string[] { "Benz", "Audi" }, Count =  new double[] { 50, 20 } });
+      Brands.Add(new Model() { Brand = new string[] { "iPhone", "Nokia" }, Count = new double[] { 24, 30 } });
+      Brands.Add(new Model() { Brand = new string[] { "Lenovo", "Acer" }, Count = new double[] { 38, 23 } });
+      Brands.Add(new Model() { Brand = new string[] { "Fastrack", "Titan" },Count = new double[] { 27, 29 } });
    }
 
    public ObservableCollection<Model> Brands { get; set; }
-
 }
 
 private void CreateChart()
-
 {
-
    ViewModel view = new ViewModel();
-
    SfChart chart = new SfChart();
 
    ColumnSeries series = new ColumnSeries();
-
    series.ItemsSource = view.Brands;
-
    series.XBindingPath = "Brand[1]";
-
    series.YBindingPath = "Count[0]";
 
    chart.Series.Add(series);
-
    grid.Children.Add(chart);
-
 }
 
-
 {% endhighlight %}
 
-
 {% endtabs %}
 
 ### Listening Property Changes
@@ -299,12 +201,15 @@ You can notify the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio
 
 {% highlight xaml %}
 
-<chart:ScatterSeries ScatterWidth="20" ScatterHeight="20"  Label="Coal" ListenPropertyChange="True"
-
-ItemsSource="{Binding EnergyProductions}" Interior="#BCBCBC"
-
-XBindingPath="ID" YBindingPath="Coal">
-
+<chart:ScatterSeries
+    ScatterWidth="20"
+    ScatterHeight="20"
+    Label="Coal"
+    ListenPropertyChange="True"
+    ItemsSource="{Binding EnergyProductions}"
+    Interior="#BCBCBC"
+    XBindingPath="ID"
+    YBindingPath="Coal">
 </chart:ScatterSeries>
 
 {% endhighlight %}
@@ -313,23 +218,14 @@ XBindingPath="ID" YBindingPath="Coal">
 
 ScatterSeries series = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     ScatterWidth = 20,
-
     ScatterHeight = 20,
-
     Label ="Coal",
-
     ListenPropertyChange=true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 chart.Series.Add(series);
@@ -346,24 +242,14 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to bind a list of Tuple in WPF Charts`](https://support.syncfusion.com/kb/article/10198/how-to-bind-a-list-of-tuple-in-wpf-charts)
-
-[`How to bind the underlying DataTable model to the DataMarker Template in WPF Charts`](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts)
-
-[`How to bind the SQL Database to WPF Charts`](https://support.syncfusion.com/kb/article/9945/how-to-bind-the-sql-database-to-wpf-charts)
-
-[`How to bind the JSON data in WPF Chart`](https://support.syncfusion.com/kb/article/9418/how-to-bind-the-json-data-in-wpf-chart)
-
-[`How to bind KeyValuePair collection in WPF Chart`](https://support.syncfusion.com/kb/article/9234/how-to-bind-keyvaluepair-collection-in-wpf-sfchart)
-
-[`How to bind the series collection property using MVVM pattern`](https://support.syncfusion.com/kb/article/8344/how-to-bind-series-property-using-mvvm-pattern-in-wpf-chart)
-
-[`How to bind data table in the Chart`](https://support.syncfusion.com/kb/article/5196/how-to-bind-data-table-in-wpf-chart-sfchart)
-
-[`How to create a real time Chart using MVVM in WPF`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
-
-[`How to bind the array property in Chart`](https://support.syncfusion.com/kb/article/4555/how-to-bind-the-array-property-in-wpf-chart-sfchart)
-
-[`How to generate dynamic number of series based on common items source`](https://support.syncfusion.com/kb/article/6858/how-to-generate-dynamic-number-of-series-based-on-common-items-source-in-wpf-chart-sfchart)
-
-[`How to manage the empty values (NaN) in Chart`](https://support.syncfusion.com/kb/article/3088/how-to-manage-the-empty-values-in-wpf-chart-sfchart)
+[`How to bind a list of Tuple in WPF Charts?`](https://support.syncfusion.com/kb/article/10198/how-to-bind-a-list-of-tuple-in-wpf-charts)
+[`How to bind the underlying DataTable model to the DataMarker Template in WPF Charts?`](https://support.syncfusion.com/kb/article/10047/how-to-bind-the-underlying-datatable-model-to-the-datamarker-template-in-wpf-charts)
+[`How to bind the SQL Database to WPF Charts?`](https://support.syncfusion.com/kb/article/9945/how-to-bind-the-sql-database-to-wpf-charts)
+[`How to bind the JSON data in WPF Chart?`](https://support.syncfusion.com/kb/article/9418/how-to-bind-the-json-data-in-wpf-chart)
+[`How to bind KeyValuePair collection in WPF Chart?`](https://support.syncfusion.com/kb/article/9234/how-to-bind-keyvaluepair-collection-in-wpf-sfchart)
+[`How to bind the series collection property using MVVM pattern?`](https://support.syncfusion.com/kb/article/8344/how-to-bind-series-property-using-mvvm-pattern-in-wpf-chart)
+[`How to bind data table in the Chart?`](https://support.syncfusion.com/kb/article/5196/how-to-bind-data-table-in-wpf-chart-sfchart)
+[`How to create a real time Chart using MVVM in WPF?`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
+[`How to bind the array property in Chart?`](https://support.syncfusion.com/kb/article/4555/how-to-bind-the-array-property-in-wpf-chart-sfchart)
+[`How to generate dynamic number of series based on common items source?`](https://support.syncfusion.com/kb/article/6858/how-to-generate-dynamic-number-of-series-based-on-common-items-source-in-wpf-chart-sfchart)
+[`How to manage the empty values (NaN) in Chart?`](https://support.syncfusion.com/kb/article/3088/how-to-manage-the-empty-values-in-wpf-chart-sfchart)
diff --git a/wpf/Charts/Exporting.md b/wpf/Charts/Exporting.md
index 57a8e16da4..c2ac10ba9b 100644
--- a/wpf/Charts/Exporting.md
+++ b/wpf/Charts/Exporting.md
@@ -54,19 +54,15 @@ This helps to export the chart to any stream as in below code example.
 private void SaveImageEncoder_Click(object sender, RoutedEventArgs e)
 {
     SaveFileDialog sfd = new SaveFileDialog();
-    
-	sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*";
+
+    sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|TIFF(*.tif,*.tiff)|*.tif|All files (*.*)|*.*";
 
     if (sfd.ShowDialog() == true)
     {
-	
         using (Stream fs = sfd.OpenFile())
         {
-		
             SampleChart.Save(fs, new PngBitmapEncoder());
-			
         }
-		
     }
 }
 
@@ -89,13 +85,11 @@ static IntPtr ApplicationMessageFilter(IntPtr hwnd, int message, IntPtr wParam,
     return IntPtr.Zero;
 }
 
-
 HwndSourceParameters sourceParameters = new HwndSourceParameters();
 
 sourceParameters.HwndSourceHook = ApplicationMessageFilter;
 
 HwndSource source = new HwndSource(sourceParameters);
-
 source.RootVisual = chart;
 
 //Save chart
@@ -107,8 +101,6 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to export chart as Image`](https://help.syncfusion.com/wpf/charts/exporting)
-
-[`How to print the chart`](https://help.syncfusion.com/wpf/charts/printing)
-
-[`How to read image byte while rendering chart`](https://www.syncfusion.com/kb/2584/how-to-read-image-byte-while-rendering-chart)
+[`How to export chart as Image?`](https://help.syncfusion.com/wpf/charts/exporting)
+[`How to print the chart?`](https://help.syncfusion.com/wpf/charts/printing)
+[`How to read image byte while rendering chart?`](https://www.syncfusion.com/kb/2584/how-to-read-image-byte-while-rendering-chart)
diff --git a/wpf/Charts/FastChart/Fast-BitmapSeries.md b/wpf/Charts/FastChart/Fast-BitmapSeries.md
index f365f83fd8..6ddb74cc1c 100644
--- a/wpf/Charts/FastChart/Fast-BitmapSeries.md
+++ b/wpf/Charts/FastChart/Fast-BitmapSeries.md
@@ -21,11 +21,12 @@ The following code example shows how to use the fast line bitmap series:
 
 {% highlight xaml %}
 
-<chart:FastLineBitmapSeries x:Name="FastLineSeries" ItemsSource="{Binding Data}"
-
-XBindingPath="Date" Interior="#7F7F7F" 
-
-YBindingPath="Value" />
+<chart:FastLineBitmapSeries 
+    x:Name="FastLineSeries" 
+    ItemsSource="{Binding Data}"
+    XBindingPath="Date"
+    Interior="#7F7F7F"
+    YBindingPath="Value"/>
 
 {% endhighlight %}
 
@@ -33,15 +34,10 @@ YBindingPath="Value" />
 
 FastLineBitmapSeries series = new FastLineBitmapSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -60,13 +56,12 @@ N> As it was rendered using bitmap, there might be some jagged lines at edges. T
 
 {% highlight xaml %}
 
-<chart:FastLineBitmapSeries x:Name="FastLineSeries" 
-
-XBindingPath="Date" Interior="#7F7F7F" 
-
-StrokeDashArray="5,5"
-
-YBindingPath="Value" EnableAntiAliasing="True"/>
+<chart:FastLineBitmapSeries 
+    x:Name="FastLineSeries" 
+    XBindingPath="Date" Interior="#7F7F7F" 
+    StrokeDashArray="5,5"
+    YBindingPath="Value" 
+    EnableAntiAliasing="True"/>
 
 {% endhighlight %}
 
@@ -74,19 +69,12 @@ YBindingPath="Value" EnableAntiAliasing="True"/>
 
 FastLineBitmapSeries series = new FastLineBitmapSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     EnableAntiAliasing =true,
-
     StrokeDashArray =new DoubleCollection() { 5,5},
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -106,11 +94,11 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastColumnBitmapSeries Interior="#7F7F7F"
-
-ItemsSource="{Binding List}" 
-
-XBindingPath="Date" YBindingPath="Price" />
+<chart:FastColumnBitmapSeries                
+    Interior="#7F7F7F"
+    ItemsSource="{Binding List}" 
+    XBindingPath="Date"                
+    YBindingPath="Price"/>
 
 {% endhighlight %}
 
@@ -118,15 +106,10 @@ XBindingPath="Date" YBindingPath="Price" />
 
 FastColumnBitmapSeries series = new FastColumnBitmapSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -145,11 +128,12 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastBarBitmapSeries x:Name="FastBarBitmapSeries" ItemsSource="{Binding List}" 
-
-XBindingPath="Date" YBindingPath="Price" 
-
-Interior="#7F7F7F"/>
+<chart:FastBarBitmapSeries 
+    x:Name="FastBarBitmapSeries" 
+    ItemsSource="{Binding List}" 
+    XBindingPath="Date" 
+    YBindingPath="Price" 
+    Interior="#7F7F7F"/>
 
 {% endhighlight %}
 
@@ -157,15 +141,10 @@ Interior="#7F7F7F"/>
 
 FastBarBitmapSeries series = new FastBarBitmapSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -185,15 +164,15 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastCandleBitmapSeries ItemsSource="{Binding TestingModel}" 
-
-XBindingPath="X" High="Y" 
-
-Low="Y1" Open="Y2" Close="Y3" 
-
-BullFillColor="#BCBCBC" 
-
-BearFillColor="#4A4A4A"  />
+<chart:FastCandleBitmapSeries 
+    ItemsSource="{Binding TestingModel}" 
+    XBindingPath="X" 
+    High="Y" 
+    Low="Y1" 
+    Open="Y2" 
+    Close="Y3" 
+    BullFillColor="#BCBCBC" 
+    BearFillColor="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -201,19 +180,12 @@ BearFillColor="#4A4A4A"  />
 
 FastCandleBitmapSeries series = new FastCandleBitmapSeries()
 {
-
     ItemsSource = new ViewModel().TestingModel,
-
     XBindingPath = "X",
-
     High="Y", Low="Y1",
-
     Open="Y2", Close="Y3",
-
     BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)),
-
     BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series);
@@ -233,11 +205,13 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastHiLoBitmapSeries StrokeThickness="5" ItemsSource="{Binding List}"          
-
-Interior="#7F7F7F" XBindingPath="Date" High="Stock"     
-
-Low="Price"/>
+<chart:FastHiLoBitmapSeries 
+    StrokeThickness="5" 
+    ItemsSource="{Binding List}" 
+    Interior="#7F7F7F" 
+    XBindingPath="Date" 
+    High="Stock" 
+    Low="Price"/>
 
 {% endhighlight %}
 
@@ -245,17 +219,11 @@ Low="Price"/>
 
 FastHiLoBitmapSeries series = new FastHiLoBitmapSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Date",
-
     High = "Stock",Low = "Price",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F)),
-
     StrokeThickness = 5
-
 };
 
 chart.Series.Add(series);
@@ -274,13 +242,15 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastHiLoOpenCloseBitmapSeries ItemsSource="{Binding TestingModel}" 
-
-XBindingPath="X" High="Y" Low="Y1" Open="Y2"        
-
-Close="Y3"   BullFillColor="#7F7F7F"      
-
-BearFillColor="#4A4A4A"/>
+<chart:FastHiLoOpenCloseBitmapSeries 
+    ItemsSource="{Binding TestingModel}"
+    XBindingPath="X" 
+    High="Y" 
+    Low="Y1" 
+    Open="Y2"        
+    Close="Y3"  
+    BullFillColor="#7F7F7F"
+    BearFillColor="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -288,20 +258,14 @@ BearFillColor="#4A4A4A"/>
 
 FastHiLoOpenCloseBitmapSeries series = new FastHiLoOpenCloseBitmapSeries()
 {
-
     ItemsSource = new ViewModel().TestingModel,
-
     XBindingPath = "X",
-
-    High="Y", Low="Y1",
-
-    Open="Y2", Close="Y3",
-
+    High="Y", 
+    Low="Y1",
+    Open="Y2",
+    Close="Y3",
     BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)),
-
-    BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
-};
+    BearFillColor = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))};
 
 chart.Series.Add(series);
 
@@ -319,15 +283,14 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastScatterBitmapSeries Interior="#7F7F7F"   
-
-ItemsSource="{Binding Data}"                         
-
-x:Name="FastScatterSeries"  XBindingPath="Date" 
-
-YBindingPath="Value" ScatterHeight="4"  
-
-ScatterWidth="4"/>
+<chart:FastScatterBitmapSeries
+    Interior="#7F7F7F"
+    ItemsSource="{Binding Data}"
+    x:Name="FastScatterSeries"
+    XBindingPath="Date"
+    YBindingPath="Value"
+    ScatterHeight="4"
+    ScatterWidth="4"/>
 
 {% endhighlight %}
 
@@ -335,19 +298,12 @@ ScatterWidth="4"/>
 
 FastScatterBitmapSeries series = new FastScatterBitmapSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     ScatterHeight = 4,
-
     ScatterWidth = 4,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series);
@@ -367,11 +323,11 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastStepLineBitmapSeries ItemsSource="{Binding Data}"
-
-XBindingPath="Date"                                 
-
-YBindingPath="Value" Interior="#4A4A4A" />
+<chart:FastStepLineBitmapSeries
+    ItemsSource="{Binding Data}"
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -379,15 +335,10 @@ YBindingPath="Value" Interior="#4A4A4A" />
 
 FastStepLineBitmapSeries series = new FastStepLineBitmapSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -404,11 +355,13 @@ The anti aliasing mode can be enabled using [`EnableAntiAliasing`](https://help.
 
 {% highlight xaml %}
 
-<chart:FastStepLineBitmapSeries EnableAntiAliasing="True" ItemsSource="{Binding Data}"
-
-x:Name="FastStepLineSeries" XBindingPath="Date" 
-
-YBindingPath="Value" Interior="#4A4A4A"/>
+<chart:FastStepLineBitmapSeries
+    EnableAntiAliasing="True"
+    ItemsSource="{Binding Data}"
+    x:Name="FastStepLineSeries"
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -416,17 +369,11 @@ YBindingPath="Value" Interior="#4A4A4A"/>
 
 FastStepLineBitmapSeries series = new FastStepLineBitmapSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     EnableAntiAliasing = true ,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -446,34 +393,29 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FastRangeAreaBitmapSeries ItemsSource = "{Binding Data}"
 
-                             XBindingPath="Date" 
-					 
-                             High="HighTemperature" 
-					 
-                             Low="LowTemperature"        
-					                                      
-                             Interior="#7F7F7F" />
+<chart:FastRangeAreaBitmapSeries
+    ItemsSource="{Binding Data}"
+    XBindingPath="Date"
+    High="HighTemperature"
+    Low="LowTemperature"
+    Interior="#7F7F7F"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
+
 FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries();
 
 fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data;
-
 fastRangeAreaBitmapSeries.XBindingPath = "Date";
-
 fastRangeAreaBitmapSeries.High = "HighTemperature";
-
 fastRangeAreaBitmapSeries.Low = "LowTemperature";
-
 fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75));
 
+chart.Series.Add(fastRangeAreaBitmapSeries)
 
-chart.Series.Add(fastRangeAreaBitmapSeries);
 
 {% endhighlight %}
 
@@ -487,17 +429,14 @@ The anti-aliasing mode can be enabled using  [`EnableAntiAliasing`](https://help
 
 {% highlight xaml %}
 
-<chart:FastRangeAreaBitmapSeries ItemsSource = "{Binding Data}"
-
-                                 XBindingPath="Date" 
-
-                                 High="HighTemperature" 
-
-                                 Low="LowTemperature" 
-
-                                 EnableAntiAliasing="True" 
 
-                                 Interior="#7F7F7F" />
+<chart:FastRangeAreaBitmapSeries
+    ItemsSource="{Binding Data}"
+    XBindingPath="Date"
+    High="HighTemperature"
+    Low="LowTemperature"
+    EnableAntiAliasing="True"
+    Interior="#7F7F7F"/>
 
 {% endhighlight %}
 
@@ -506,18 +445,12 @@ The anti-aliasing mode can be enabled using  [`EnableAntiAliasing`](https://help
 FastRangeAreaBitmapSeries fastRangeAreaBitmapSeries = new FastRangeAreaBitmapSeries();
 
 fastRangeAreaBitmapSeries.ItemsSource = new ViewModel().Data;
-
 fastRangeAreaBitmapSeries.XBindingPath = "Date";
-
 fastRangeAreaBitmapSeries.High = "HighTemperature";
-
 fastRangeAreaBitmapSeries.Low = "LowTemperature";
-
 fastRangeAreaBitmapSeries.EnableAntiAliasing = true;
-
 fastRangeAreaBitmapSeries.Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x75));
 
-
 chart.Series.Add(fastRangeAreaBitmapSeries);
 
 {% endhighlight %}
diff --git a/wpf/Charts/FastChart/Fast-Series.md b/wpf/Charts/FastChart/Fast-Series.md
index 4df7396840..599955f566 100644
--- a/wpf/Charts/FastChart/Fast-Series.md
+++ b/wpf/Charts/FastChart/Fast-Series.md
@@ -19,11 +19,12 @@ The [`FastLineSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha
 
 {% highlight xaml %}
 
-<chart:FastLineSeries x:Name="FastLineSeries" ItemsSource="{Binding Data}"
-
-XBindingPath="Date" Interior="#7F7F7F"
-
-YBindingPath="Value"/>
+<chart:FastLineSeries 
+    x:Name="FastLineSeries" 
+    ItemsSource="{Binding Data}"
+    XBindingPath="Date" 
+    Interior="#7F7F7F"
+    YBindingPath="Value"/>
 
 {% endhighlight %}
 
@@ -31,15 +32,10 @@ YBindingPath="Value"/>
 
 FastLineSeries series = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -66,13 +62,12 @@ The following line properties are available for FastLineSeries:
 
 {% highlight xaml %}
 
-<chart:FastStackingColumnBitmapSeries StrokeThickness="5"
-
-ItemsSource="{Binding MedalDetails}”       
-
-XBindingPath="CountryName" YBindingPath="GoldMedals"  
-
-Interior="#4A4A4A" />
+<chart:FastStackingColumnBitmapSeries 
+    StrokeThickness="5"
+    ItemsSource="{Binding MedalDetails}"    
+    XBindingPath="CountryName" 
+    YBindingPath="GoldMedals"  
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -80,15 +75,10 @@ Interior="#4A4A4A" />
 
 FastStackingColumnBitmapSeries series = new FastStackingColumnBitmapSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "GoldMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
diff --git a/wpf/Charts/Getting-Started.md b/wpf/Charts/Getting-Started.md
index b35e69dfc8..688a62cbad 100644
--- a/wpf/Charts/Getting-Started.md
+++ b/wpf/Charts/Getting-Started.md
@@ -67,11 +67,9 @@ Then initialize an empty chart with two axes as shown below,
 SfChart chart = new SfChart();
 
 CategoryAxis primaryAxis = new CategoryAxis();
-
 chart.PrimaryAxis = primaryAxis; 
-   
-NumericalAxis secondaryAxis = new NumericalAxis();
 
+NumericalAxis secondaryAxis = new NumericalAxis();
 chart.SecondaryAxis = secondaryAxis;
 
 {% endhighlight %}
@@ -81,11 +79,9 @@ chart.SecondaryAxis = secondaryAxis;
 Dim chart As New SfChart()
 
 Dim primaryAxis As New CategoryAxis () 
-
 chart.PrimaryAxis = primaryAxis 
 
 Dim secondaryAxis As New NumericalAxis ()  
-
 chart.SecondaryAxis = secondaryAxis
 
 {% endhighlight %}
@@ -109,7 +105,6 @@ Now, let us define a simple data model that represents a data point in [WPF Char
 public class Person   
 {   
     public string Name { get; set; }
-
     public double Height { get; set; }
 }
 
@@ -120,7 +115,6 @@ public class Person
 Public Class Person
 
     Public Property Name As String
-
     Public Property Height As Double
 
 End Class
@@ -138,19 +132,19 @@ Next, create a view model class and initialize a list of `Person` objects as fol
 
 public class ViewModel  
 {
-      public List<Person> Data { get; set; }      
-
-      public ViewModel()       
-      {
-            Data = new List<Person>()
-            {
-                new Person { Name = "David", Height = 180 },
-                new Person { Name = "Michael", Height = 170 },
-                new Person { Name = "Steve", Height = 160 },
-                new Person { Name = "Joel", Height = 182 }
-            }; 
-       }
- }
+    public List<Person> Data { get; set; }      
+
+    public ViewModel()       
+    {
+        Data = new List<Person>()
+        {
+            new Person { Name = "David", Height = 180 },
+            new Person { Name = "Michael", Height = 170 },
+            new Person { Name = "Steve", Height = 160 },
+            new Person { Name = "Joel", Height = 182 }
+        }; 
+    }
+}
 
 {% endhighlight %} 
 
@@ -197,10 +191,8 @@ N> Add namespace of `ViewModel` class to your XAML window if you prefer to set `
     <Window.DataContext>
         <local:ViewModel/>
     </Window.DataContext>
-
 </Window>
 
-
 {% endhighlight %}
 
 {% highlight C# %} 
@@ -228,23 +220,17 @@ N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-   
-  <syncfusion:SfChart.PrimaryAxis>
-    
-      <syncfusion:CategoryAxis Header="Name" />             
-   
-  </syncfusion:SfChart.PrimaryAxis>
+    <syncfusion:SfChart.PrimaryAxis>
+        <syncfusion:CategoryAxis Header="Name" />
+    </syncfusion:SfChart.PrimaryAxis>
 
-  <syncfusion:SfChart.SecondaryAxis>
-  
-      <syncfusion:NumericalAxis Header="Height(in cm)" />                        
+    <syncfusion:SfChart.SecondaryAxis>
+        <syncfusion:NumericalAxis Header="Height(in cm)" />
+    </syncfusion:SfChart.SecondaryAxis>
 
-  </syncfusion:SfChart.SecondaryAxis>
-    
-   <syncfusion:ColumnSeries  ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" >
-  </syncfusion:ColumnSeries>
-
- </syncfusion:SfChart> 
+    <syncfusion:ColumnSeries  ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" >
+    </syncfusion:ColumnSeries>
+</syncfusion:SfChart> 
 
 {% endhighlight %}
 
@@ -253,26 +239,17 @@ N> You need to set [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusio
 SfChart chart = new SfChart();
 
 //Adding horizontal axis to the chart 
-
 CategoryAxis primaryAxis = new CategoryAxis();
-
 primaryAxis.Header = "Name";      
-
 chart.PrimaryAxis = primaryAxis;
 
-
 //Adding vertical axis to the chart 
-
 NumericalAxis secondaryAxis = new NumericalAxis();
-
 secondaryAxis.Header = "Height(in cm)";          
-
 chart.SecondaryAxis = secondaryAxis;
 
-
 //Initialize the two series for SfChart
 ColumnSeries series = new ColumnSeries();
-
 series.ItemsSource = (new ViewModel()).Data;
 series.XBindingPath = "Name";            
 series.YBindingPath = "Height";         
@@ -287,19 +264,13 @@ chart.Series.Add(series);
 Dim chart As New SfChart()
 
 'Adding horizontal axis to the chart 
-
 Dim primaryAxis As New CategoryAxis()
-
 primaryAxis.Header = "Name"
 chart.PrimaryAxis = primaryAxis
 
-
 'Adding vertical axis to the chart  
-
 Dim secondaryAxis As New NumericalAxis()
-
 secondaryAxis.Header = "Height(in cm)"
-
 chart.SecondaryAxis = secondaryAxis        
 
 'Initialize the two series for SfChart
@@ -310,7 +281,6 @@ series.XBindingPath = "Name"
 series.YBindingPath = "Height"
         
 'Adding Series to the Chart Series Collection
-
 chart.Series.Add(series)
 
 {% endhighlight %}
@@ -328,10 +298,8 @@ The header of the chart acts as the title to provide quick information to the us
 {% highlight xaml %}
 
 <Grid>
-
    <syncfusion:SfChart Header="Chart"> 
    </syncfusion:SfChart> 
-
 </Grid>
 
 {% endhighlight %}
@@ -362,17 +330,13 @@ You can add data labels to improve the readability of the chart and it can be en
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
 	...
-
   <syncfusion:ColumnSeries > 
      <syncfusion:ColumnSeries.AdornmentsInfo>
           <syncfusion:ChartAdornmentInfo ShowLabel="True"/> 
      </syncfusion:ColumnSeries.AdornmentsInfo> 
   </syncfusion:ColumnSeries>     
-
 	...
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -402,17 +366,11 @@ You can enable legend using the [`SfChart.Legend`](https://help.syncfusion.com/c
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-	...
-
+    ...
     <syncfusion:SfChart.Legend>
-
         <syncfusion:ChartLegend/>
-
     </syncfusion:SfChart.Legend>
-
     ...
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -537,9 +495,8 @@ The following code example gives you the complete code of above configurations.
     <Window.DataContext>
         <local:ViewModel/>
     </Window.DataContext>
-    
-    <Grid>
 
+    <Grid>
         <syncfusion:SfChart Header="Chart" Height="300" Width="500">
             <!--Initialize the horizontal axis for SfChart-->
             <syncfusion:SfChart.PrimaryAxis>
@@ -563,27 +520,23 @@ The following code example gives you the complete code of above configurations.
                     </syncfusion:ChartAdornmentInfo>
                 </syncfusion:ColumnSeries.AdornmentsInfo>
             </syncfusion:ColumnSeries>
-                      
         </syncfusion:SfChart>
-
     </Grid>
 </Window>
- 
+
 {% endhighlight %}
 
 {% highlight C# %} 
 
 using Syncfusion.UI.Xaml.Charts;
-
 namespace ChartDemo
 {
-    
-    public sealed partial class  MainWindow : Window
+    public sealed partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
-            
+
             SfChart chart = new SfChart() { Header = "Chart", Height = 300, Width = 500 };
 
             //Adding horizontal axis to the chart 
@@ -605,10 +558,10 @@ namespace ChartDemo
             //Initializing column series
             ColumnSeries series = new ColumnSeries();
             series.ItemsSource = (new ViewModel()).Data;
-            series.XBindingPath = "Name";            
+            series.XBindingPath = "Name";
             series.YBindingPath = "Height";
             series.ShowTooltip = true;
-            series.Label = "Heights";      
+            series.Label = "Heights";
 
             //Setting adornment to the chart series
             series.AdornmentsInfo = new ChartAdornmentInfo() { ShowLabel = true };
@@ -616,9 +569,8 @@ namespace ChartDemo
             //Adding Series to the Chart Series Collection
             chart.Series.Add(series);
             this.Content = chart;
-                      
         }
-    }   
+    }
 }
 
 {% endhighlight %}
@@ -627,8 +579,9 @@ namespace ChartDemo
 
 Imports Syncfusion.UI.Xaml.Charts
 Partial Public Class MainWindow
-    Inherits Window   
+    Inherits Window
     Public Sub New()
+
         InitializeComponent()
 
         Dim chart As New SfChart()
@@ -663,10 +616,9 @@ Partial Public Class MainWindow
         series.ShowTooltip = True
 
         'Setting adornment to the chart series
-        series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True}       
+        series.AdornmentsInfo = New ChartAdornmentInfo() With {.ShowLabel = True}
 
         'Adding Series to the Chart Series Collection
-
         chart.Series.Add(series)
 
         Me.Content = chart
@@ -688,33 +640,20 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to create chart in VB .NET WPF`](https://support.syncfusion.com/kb/article/9550/how-to-create-chart-control-example-in-vb-net-wpf)
-
-[`How to create a chart control in WPF application using XAML`](https://support.syncfusion.com/kb/article/9513/how-to-create-a-chart-control-in-wpf-application-using-xaml)
-
-[`How to create chart in C# WPF`](https://support.syncfusion.com/kb/article/9466/how-to-create-chart-control-example-in-c-wpf)
-
-[`How to create Chart in F# WPF`](https://support.syncfusion.com/kb/article/9843/how-to-create-chart-in-f-wpf)
-
-[`How to add Context Menu for WPF Chart`](https://support.syncfusion.com/kb/article/9349/how-to-add-contextmenu-for-wpf-chart)
-
-[`How to add WPF SfChart inside the SfDataGrid`](https://support.syncfusion.com/kb/article/9061/how-to-add-wpf-sfchart-inside-the-sfdatagrid)
-
-[`How to add footer content to WPF Chart`](https://support.syncfusion.com/kb/article/9097/how-to-add-footer-content-to-wpf-sfchart)
-
-[`How to access data from Meta Trader to chart using TradePlatform.Net in WPF`](https://support.syncfusion.com/kb/article/7027/how-to-access-data-from-metatrader-to-wpf-chart-sfchart)
-
-[`How to synchronize the selection between the chart and data grid`](https://support.syncfusion.com/kb/article/3753/how-to-synchronize-the-selection-between-wpf-chart-sfchart-and-datagrid)
-
-[`How to generate dynamic number of series based on common items source`](https://support.syncfusion.com/kb/article/6858/how-to-generate-dynamic-number-of-series-based-on-common-items-source-in-wpf-chart-sfchart)
-
-[`How to display the chart area alone in Chart`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart)
-
-[`How to redraw the chart while dragging the series out of the range`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range)
-
-[`How to create a real time Chart using MVVM in WPF`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
-
-[`How to add watermark to chart`](https://support.syncfusion.com/kb/article/4952/how-to-add-watermark-in-wpf-chart-sfchart)
+[`How to create chart in VB .NET WPF?`](https://support.syncfusion.com/kb/article/9550/how-to-create-chart-control-example-in-vb-net-wpf)
+[`How to create a chart control in WPF application using XAML?`](https://support.syncfusion.com/kb/article/9513/how-to-create-a-chart-control-in-wpf-application-using-xaml)
+[`How to create chart in C# WPF?`](https://support.syncfusion.com/kb/article/9466/how-to-create-chart-control-example-in-c-wpf)
+[`How to create Chart in F# WPF?`](https://support.syncfusion.com/kb/article/9843/how-to-create-chart-in-f-wpf)
+[`How to add Context Menu for WPF Chart?`](https://support.syncfusion.com/kb/article/9349/how-to-add-contextmenu-for-wpf-chart)
+[`How to add WPF SfChart inside the SfDataGrid?`](https://support.syncfusion.com/kb/article/9061/how-to-add-wpf-sfchart-inside-the-sfdatagrid)
+[`How to add footer content to WPF Chart?`](https://support.syncfusion.com/kb/article/9097/how-to-add-footer-content-to-wpf-sfchart)
+[`How to access data from Meta Trader to chart using TradePlatform.Net in WPF?`](https://support.syncfusion.com/kb/article/7027/how-to-access-data-from-metatrader-to-wpf-chart-sfchart)
+[`How to synchronize the selection between the chart and data grid?`](https://support.syncfusion.com/kb/article/3753/how-to-synchronize-the-selection-between-wpf-chart-sfchart-and-datagrid)
+[`How to generate dynamic number of series based on common items source?`](https://support.syncfusion.com/kb/article/6858/how-to-generate-dynamic-number-of-series-based-on-common-items-source-in-wpf-chart-sfchart)
+[`How to display the chart area alone in Chart?`](https://support.syncfusion.com/kb/article/5116/how-to-display-the-chart-area-alone-in-wpf-chart-sfchart)
+[`How to redraw the chart while dragging the series out of the range?`](https://support.syncfusion.com/kb/article/5173/how-to-redraw-wpf-chart-sfchart-while-dragging-the-series-out-of-the-range)
+[`How to create a real time Chart using MVVM in WPF?`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
+[`How to add watermark to chart?`](https://support.syncfusion.com/kb/article/4952/how-to-add-watermark-in-wpf-chart-sfchart)
 
 ## Theme
 
diff --git a/wpf/Charts/Header.md b/wpf/Charts/Header.md
index f4728a9847..cab388eaf4 100644
--- a/wpf/Charts/Header.md
+++ b/wpf/Charts/Header.md
@@ -22,7 +22,6 @@ documentation: ug
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.Header = "Usage of Metals";
 
 {% endhighlight %}
@@ -43,7 +42,6 @@ Also you can add more customization for the header as below:
 <chart:SfChart.Header>
 
 <Border BorderThickness="0.5" BorderBrush="Black" Margin="10" CornerRadius="5">
-
 <TextBlock FontSize="14" Text="Chart Area Header" Margin="5">
 
 <TextBlock.Effect>
@@ -68,39 +66,26 @@ SfChart chart = new SfChart();
 
 Border border = new Border()
 {
-
-BorderThickness = new Thickness(0.5),
-
-BorderBrush = new SolidColorBrush(Colors.Black),
-
-Margin = new Thickness(10),
-
-CornerRadius = new CornerRadius(5)
-
+    BorderThickness = new Thickness(0.5),
+    BorderBrush = new SolidColorBrush(Colors.Black),
+    Margin = new Thickness(10),
+    CornerRadius = new CornerRadius(5)
 };
 
 TextBlock textBlock = new TextBlock()
-{
-
-Text = "Chart Area Header",
-
-Margin = new Thickness(5),
-
-FontSize = 14
-
+{                
+    Text = "Chart Area Header",
+    Margin = new Thickness(5),
+    FontSize = 14
 };
 
 textBlock.Effect = new DropShadowEffect()
 {
-
-Color = Colors.Black,
-
-Opacity = 0.5
-
+    Color = Colors.Black,
+    Opacity = 0.5
 };
 
 border.Child = textBlock;
-
 chart.Header = border;
 
 {% endhighlight %}
diff --git a/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md b/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md
index 6fed543200..8050945802 100644
--- a/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md
+++ b/wpf/Charts/How-To/Add-custom-labels-to-track-ball-behavior.md
@@ -43,7 +43,7 @@ public class CustomTrackBallBehavior : ChartTrackBallBehavior
         Rect rect = this.ChartArea.SecondaryAxis.ArrangeRect;
 
         //Custom label.
-        AddLabel(label, LabelVerticalAlignment, LabelHorizontalAlignment, CustomLabelTemplate, pointInfo1.X, rect.Top);
+        AddLabel(label, LabelVerticalAlignment,LabelHorizontalAlignment, CustomLabelTemplate, pointInfo1.X, rect.Top);
     }
 }
 
diff --git a/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md b/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md
index 3789145b1a..208bb14633 100644
--- a/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md
+++ b/wpf/Charts/How-To/Export-Chart-to-Image-Windows-8-1.md
@@ -20,10 +20,7 @@ The export chart to image feature in the SfChart control enables the user to exp
 * PNG
 * BMP
 
-
-
 ### Method Table
-
 <table>
 <tr>
 <th>
@@ -54,25 +51,16 @@ chart.Save("sfchart.jpg", KnownFolders.PicturesLibrary);
 {% highlight c# %}
 var memoryStream = new InMemoryRandomAccessStream();
 
-            chart.Save(memoryStream, BitmapEncoder.BmpEncoderId);
-
-
-
-            StorageFolder storageFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
-
-
-
-            var file = await storageFolder.CreateFileAsync("chartwithstream.jpg", CreationCollisionOption.GenerateUniqueName);
-
-
-
-            var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
+chart.Save(memoryStream, BitmapEncoder.BmpEncoderId);
 
-            {
+StorageFolder storageFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
 
-                chart.Save(stream, BitmapEncoder.BmpEncoderId);
+var file = await storageFolder.CreateFileAsync("chartwithstream.jpg", CreationCollisionOption.GenerateUniqueName);
 
-            }    
+var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
+{
+    chart.Save(stream, BitmapEncoder.BmpEncoderId);
+}   
 
 {% endhighlight  %}
 
diff --git a/wpf/Charts/How-To/Print-the-SfChart.md b/wpf/Charts/How-To/Print-the-SfChart.md
index 73e3c436b6..ea44e98a70 100644
--- a/wpf/Charts/How-To/Print-the-SfChart.md
+++ b/wpf/Charts/How-To/Print-the-SfChart.md
@@ -10,7 +10,6 @@ documentation: ug
 # Print the SfChart in WPF
 
 To print the SfChart, call the Print method.
-
 The following code sample can be used to print the SfChart:
 
 {% highlight c# %}
diff --git a/wpf/Charts/How-To/Serialize-the-SfChart.md b/wpf/Charts/How-To/Serialize-the-SfChart.md
index 01f4909f24..1749e20647 100644
--- a/wpf/Charts/How-To/Serialize-the-SfChart.md
+++ b/wpf/Charts/How-To/Serialize-the-SfChart.md
@@ -12,7 +12,6 @@ documentation: ug
 SfChart provides the support for serializing and deserializing control. This section explains on how to serialize and deserialize SfChart.
 
 ## Methods:
-
 <table>
 <tr>
 <th>
@@ -43,50 +42,38 @@ Deserialize the XML file from the given file path and returns the SfChart contro
 Deserialize(Stream stream)</td><td>
 Deserialize the XML file from the given stream and returns the SfChart control object.</td></tr>
 </table>
-{% tabs %}
 
-XAML
+{% tabs %}
 
 {% highlight xaml %}
 
 <chart:SfChart x:Name=chart>
-
-	<chart:ColumnSeries ItemsSource="{Binding CategoricalDatas}" XBindingPath="Category" YBindingPath="Value" Palette="RedChrome"/>
-
+    <chart:ColumnSeries 
+        ItemsSource="{Binding CategoricalDatas}" 
+        XBindingPath="Category" 
+        YBindingPath="Value" 
+        Palette="RedChrome"/>
 </chart:SfChart>
 
 <StackPanel>
-
-	<Button x:Name="Serialize" Content="Serialize" Height="50" Width="100" Margin="10" Click="Serialize_Click"/>
-
-	<Button x:Name="Deserialize" Content="Deserialize" Height="50" Width="100" Margin="10" Click="Deserialize_Click"/>
-
+    <Button x:Name="Serialize" Content="Serialize" Height="50" Width="100" Margin="10" Click="Serialize_Click"/>
+    <Button x:Name="Deserialize" Content="Deserialize" Height="50" Width="100" Margin="10" Click="Deserialize_Click"/>
 </StackPanel>
 
 {% endhighlight %}
 
-C#
-
 {% highlight c# %}
 
 private void Serialize_Click(object sender, RoutedEventArgs e)
-
 {
-
-string filePath = @"E:/Documents/chart.xml";
-
-chart.Serialize(filePath); 
-
+    string filePath = @"E:/Documents/chart.xml";
+    chart.Serialize(filePath);
 }
 
 private void Deserialize_Click(object sender, RoutedEventArgs e)
-
 {
-
-string filePath = @"E:/Documents/chart.xml";
-
-var deserializedChart = (SfChart)chart.Deserialize();
-
+    string filePath = @"E:/Documents/chart.xml";
+    var deserializedChart = (SfChart)chart.Deserialize();
 }
 
 {% endhighlight %}
diff --git a/wpf/Charts/How-To/Transform-axis-value-to-pixel-value-and-vice-versa.md b/wpf/Charts/How-To/Transform-axis-value-to-pixel-value-and-vice-versa.md
index ffcf9eb40f..e70a62d60b 100644
--- a/wpf/Charts/How-To/Transform-axis-value-to-pixel-value-and-vice-versa.md
+++ b/wpf/Charts/How-To/Transform-axis-value-to-pixel-value-and-vice-versa.md
@@ -18,42 +18,20 @@ SfChart offers two utility methods for converting your data points into pixel va
 {% highlight c# %}
 
 private void LineChart_MouseMove(object sender, MouseEventArgs e)
-
-        {
-
-            Point mousePoint = new Point
-
-            {
-
-                X = e.GetPosition(LineChart).X - LineChart.SeriesClipRect.Left - LineChart.Margin.Left,
-
-                Y = e.GetPosition(LineChart).Y - LineChart.SeriesClipRect.Top - LineChart.Margin.Top 
-
-            };
-
-
-
-           // Converts mouse co-ordinate points into a value related to ChartAxis.
-
-
-
-            double xValue = this.LineChart.PointToValue(this.LineChart.PrimaryAxis, mousePoint);
-
-            double yValue = this.LineChart.PointToValue(this.LineChart.SecondaryAxis, mousePoint);
-
-
-
-
-
-            // Converts the data point value of the chart to Chart coordinate.
-
-            double chartPointX = this.LineChart.ValueToPoint(this.LineChart.PrimaryAxis, xValue);
-
-            double chartPointY = this.LineChart.ValueToPoint(this.LineChart.SecondaryAxis, yValue);
-
-
-
-        }
-
+{
+    Point mousePoint = new Point                
+    {
+        X = e.GetPosition(LineChart).X - LineChart.SeriesClipRect.Left - LineChart.Margin.Left,
+        Y = e.GetPosition(LineChart).Y - LineChart.SeriesClipRect.Top - LineChart.Margin.Top
+    };
+
+    // Converts mouse co-ordinate points into a value related to ChartAxis.                
+    double xValue = this.LineChart.PointToValue(this.LineChart.PrimaryAxis, mousePoint);
+    double yValue = this.LineChart.PointToValue(this.LineChart.SecondaryAxis, mousePoint);
+
+    // Converts the data point value of the chart to Chart coordinate.
+    double chartPointX = this.LineChart.ValueToPoint(this.LineChart.PrimaryAxis, xValue);
+    double chartPointY = this.LineChart.ValueToPoint(this.LineChart.SecondaryAxis, yValue);
+}
 
 {% endhighlight  %}
diff --git a/wpf/Charts/Interactive-Features/Crosshair.md b/wpf/Charts/Interactive-Features/Crosshair.md
index b9dd75f0df..1711c3b105 100644
--- a/wpf/Charts/Interactive-Features/Crosshair.md
+++ b/wpf/Charts/Interactive-Features/Crosshair.md
@@ -20,9 +20,7 @@ You can create an instance [`ChartCrossHairBehavior`](https://help.syncfusion.co
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior />
-
+    <syncfusion:ChartCrossHairBehavior/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -44,15 +42,11 @@ To view the axis labels then set the [`ShowTrackBallInfo`](https://help.syncfusi
 {% highlight xml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis  ShowTrackBallInfo="True"/>
-
+    <syncfusion:CategoryAxis ShowTrackBallInfo="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis  ShowTrackBallInfo="True"/>
-
+    <syncfusion:NumericalAxis ShowTrackBallInfo="True"/>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -65,16 +59,12 @@ chart.Behaviors.Add(behavior);
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     ShowTrackBallInfo = true
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     ShowTrackBallInfo = true
-
 };
 
 {% endhighlight %}
@@ -102,27 +92,18 @@ The following code snippet demonstrates the line style for horizontal line in cr
 
 {% highlight xaml %}
 
-<syncfusion:SfChart x:Name="chart">
-
-    <syncfusion:SfChart.Resources>
-
-        <Style TargetType="Line" x:Key="lineStyle">
-
-            <Setter Property="Stroke" Value="Green"></Setter>
-
-            <Setter Property="StrokeThickness" Value="1"></Setter>
+ <syncfusion:SfChart x:Name="chart">
+     <syncfusion:SfChart.Resources>
+         <Style TargetType="Line" x:Key="lineStyle">
+             <Setter Property="Stroke" Value="Green"></Setter>
+             <Setter Property="StrokeThickness" Value="1"></Setter>
+         </Style>
+     </syncfusion:SfChart.Resources>
 
-        </Style>
-                
-    </syncfusion:SfChart.Resources>
-
-    <syncfusion:SfChart.Behaviors>
-
-        <syncfusion:ChartCrossHairBehavior HorizontalLineStyle="{StaticResource lineStyle}"/>
-
-    </syncfusion:SfChart.Behaviors>
-
-</syncfusion:SfChart>
+     <syncfusion:SfChart.Behaviors>
+         <syncfusion:ChartCrossHairBehavior HorizontalLineStyle="{StaticResource lineStyle}"/>
+     </syncfusion:SfChart.Behaviors>
+ </syncfusion:SfChart>
 
 {% endhighlight %}
 
@@ -130,9 +111,7 @@ The following code snippet demonstrates the line style for horizontal line in cr
 
 ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior()
 {
-
     HorizontalLineStyle = chart.Resources["lineStyle"] as Style
-
 };
 
 chart.Behaviors.Add(crosshair);
@@ -151,27 +130,18 @@ chart.Behaviors.Add(crosshair);
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <Style TargetType="Line" x:Key="lineStyle">
-
             <Setter Property="StrokeDashArray" Value="10,5"/>
-
             <Setter Property="Stroke" Value="Red"/>
-
-             <Setter Property="StrokeThickness" Value="1"/>
-
+            <Setter Property="StrokeThickness" Value="1"/>
         </Style>
-                
-    </syncfusion:SfChart.Resources>
 
-     <syncfusion:SfChart.Behaviors>
-
-                <syncfusion:ChartCrossHairBehavior VerticalLineStyle="{StaticResource lineStyle}"/>
+    </syncfusion:SfChart.Resources>
 
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartCrossHairBehavior VerticalLineStyle="{StaticResource lineStyle}"/>
     </syncfusion:SfChart.Behaviors>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -180,9 +150,7 @@ chart.Behaviors.Add(crosshair);
 
 ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior()
 {
-
     VerticalLineStyle = chart.Resources["lineStyle"] as Style
-
 };
 
 chart.Behaviors.Add(crosshair);
@@ -220,11 +188,7 @@ The following image demonstrates the horizontal axis label positioned center to
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Far ">
-
-</syncfusion:ChartCrossHairBehavior>
-
+    <syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Far"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -233,9 +197,7 @@ The following image demonstrates the horizontal axis label positioned center to
 
 ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
 {
-
     HorizontalAxisLabelAlignment = ChartAlignment.Far
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -254,11 +216,7 @@ chart.Behaviors.Add(behavior);
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Near ">
-
-</syncfusion:ChartCrossHairBehavior>
-
+    <syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Near"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -267,9 +225,7 @@ chart.Behaviors.Add(behavior);
 
 ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
 {
-
     HorizontalAxisLabelAlignment = ChartAlignment.Near
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -299,11 +255,7 @@ The following image demonstrates the horizontal axis label positioned center to
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Near">
-
-</syncfusion:ChartCrossHairBehavior>
-
+    <syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Near"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -312,9 +264,7 @@ The following image demonstrates the horizontal axis label positioned center to
 
 ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
 {
-
     VerticalAxisLabelAlignment = ChartAlignment.Near
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -332,11 +282,7 @@ chart.Behaviors.Add(behavior);
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Far"  >
-
-</syncfusion:ChartCrossHairBehavior>
-
+    <syncfusion:ChartCrossHairBehavior VerticalAxisLabelAlignment="Far"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -345,9 +291,7 @@ chart.Behaviors.Add(behavior);
 
 ChartCrossHairBehavior behavior = new ChartCrossHairBehavior()
 {
-
     VerticalAxisLabelAlignment = ChartAlignment.Far
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -367,63 +311,43 @@ The default appearance of the crosshair axis labels can be customized by using t
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-    
     <chart:CategoryAxis ShowTrackBallInfo="True">
-        
         <chart:CategoryAxis.CrosshairLabelTemplate>
-                
             <DataTemplate>
-                            
-                 <Border Background="Orange" 
-                                   
-                         CornerRadius="4" 
-                                    
-                          BorderThickness="1" BorderBrush="Black">
-
-                 <TextBlock Margin="2" Text="{Binding ValueX}"/>
-                            
+                <Border
+                    Background="Orange"
+                    CornerRadius="4"
+                    BorderThickness="1"
+                    BorderBrush="Black">
+                    <TextBlock
+                        Margin="2"
+                        Text="{Binding ValueX}"/>
                 </Border>
-                
             </DataTemplate>
-             
         </chart:CategoryAxis.CrosshairLabelTemplate>
-                
     </chart:CategoryAxis>
-
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-                
-       <chart:NumericalAxis ShowTrackBallInfo="True">
-                    
-            <chart:NumericalAxis.CrosshairLabelTemplate>
-                        
-                <DataTemplate>
-                            
-                    <Border Background="Orange" 
-                                   
-                            CornerRadius="4" 
-                            
-                             BorderThickness="1" 
-                             
-                             BorderBrush="Black">
-
-                    <TextBlock  Margin="2" Text="{Binding ValueY}"/>
-                   
-                    </Border>
-                        
-                </DataTemplate>
-            
-            </chart:NumericalAxis.CrosshairLabelTemplate>
-       
-       </chart:NumericalAxis>
-
+    <chart:NumericalAxis ShowTrackBallInfo="True">
+        <chart:NumericalAxis.CrosshairLabelTemplate>
+            <DataTemplate>
+                <Border
+                    Background="Orange"
+                    CornerRadius="4"
+                    BorderThickness="1"
+                    BorderBrush="Black">
+                    <TextBlock
+                        Margin="2"
+                        Text="{Binding ValueY}"/>
+                </Border>
+            </DataTemplate>
+        </chart:NumericalAxis.CrosshairLabelTemplate>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 <chart:SfChart.Behaviors>
-       
-    <chart:ChartCrossHairBehavior />
-    
+    <chart:ChartCrossHairBehavior/>
 </chart:SfChart.Behaviors>
 
 {% endhighlight %}
diff --git a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md
index 7e00bca875..8430c1722d 100644
--- a/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md
+++ b/wpf/Charts/Interactive-Features/Resizable-Scrollbar.md
@@ -20,9 +20,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis EnableScrollBar="True" />
-
+    <syncfusion:CategoryAxis EnableScrollBar="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -31,9 +29,7 @@ The resizable scrollbar is a type of scrollbar that can be resized within the tr
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableScrollBar = true
-
 };
 
 {% endhighlight %}
@@ -51,9 +47,7 @@ SfChart provides support to suspend the value updates for every thumb values. Th
 {% highlight xml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis EnableScrollBar="True" DeferredScrolling="True"/>
-
+    <syncfusion:CategoryAxis EnableScrollBar="True" DeferredScrolling="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -62,11 +56,8 @@ SfChart provides support to suspend the value updates for every thumb values. Th
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableScrollBar = true,
-
     DeferredScrolling = true,
-
 };
 
 {% endhighlight %}
@@ -82,9 +73,7 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis EnableScrollBar="True" EnableScrollBarResizing="False"/>
-
+    <syncfusion:CategoryAxis EnableScrollBar="True" DeferredScrolling="False"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -93,11 +82,8 @@ SfChart allows you to resize the scrollbar using [`EnableScrollBarResizing`](htt
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableScrollBar = true,
-
     EnableScrollBarResizing = false,
-
 };
 
 {% endhighlight %}
@@ -116,9 +102,7 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis EnableScrollBar="True" EnableTouchMode="True"/>
-
+    <syncfusion:CategoryAxis EnableScrollBar="True" EnableTouchMode="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -127,11 +111,8 @@ Scrollbar provides a touch mode style by enabling [`EnableTouchMode`](https://he
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableScrollBar = true,
-
     EnableTouchMode = true
-
 };
 
 {% endhighlight %}
@@ -152,9 +133,7 @@ The following code example demonstrates the thumb labels in scrollbar.
 {% highlight xml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis EnableScrollBar="True" ThumbLabelVisibility="Visible" EnableTouchMode="True"/>
-
+    <syncfusion:CategoryAxis EnableScrollBar="True" ThumbLabelVisibility="Visible" EnableTouchMode="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -163,13 +142,9 @@ The following code example demonstrates the thumb labels in scrollbar.
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableScrollBar = true,
-
     EnableTouchMode = true,
-
     ThumbLabelVisibility = Visibility.Visible
-
 };
 
 {% endhighlight %}
@@ -188,37 +163,28 @@ chart.PrimaryAxis = new CategoryAxis()
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="labelTemplate">
-
             <Grid>
-
-                <Border BorderBrush="Black" Background="Pink" 
-                                
-                        BorderThickness="2">
-
-                    <TextBlock Text="{Binding}" FontSize="15"/>
-
+                <Border
+                    Background="Pink"
+                    BorderBrush="Black"
+                    BorderThickness="2">
+                    <TextBlock
+                        Text="{Binding}"
+                        FontSize="15" />
                 </Border>
-
             </Grid>
-
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.PrimaryAxis>
-
-        <syncfusion:CategoryAxis EnableTouchMode="True" EnableScrollBar="True"
-                                         
-                                 ThumbLabelVisibility="Visible"
-                                         
-                                 ThumbLabelTemplate="{StaticResource labelTemplate}"/>
-
+        <syncfusion:CategoryAxis
+            EnableTouchMode="True"
+            EnableScrollBar="True"
+            ThumbLabelVisibility="Visible"
+            ThumbLabelTemplate="{StaticResource labelTemplate}" />
     </syncfusion:SfChart.PrimaryAxis>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -227,15 +193,10 @@ chart.PrimaryAxis = new CategoryAxis()
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     EnableTouchMode = true,
-
     EnableScrollBar = true,
-
     ThumbLabelVisibility = Visibility.Visible,
-
     ThumbLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
diff --git a/wpf/Charts/Interactive-Features/Selection.md b/wpf/Charts/Interactive-Features/Selection.md
index 58c69f6fdc..fc911f3701 100644
--- a/wpf/Charts/Interactive-Features/Selection.md
+++ b/wpf/Charts/Interactive-Features/Selection.md
@@ -20,11 +20,8 @@ You can create an instance [`ChartSelectionBehavior`](https://help.syncfusion.co
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior >
-
-</syncfusion:ChartSelectionBehavior>
-
+    <syncfusion:ChartSelectionBehavior>
+    </syncfusion:ChartSelectionBehavior>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -49,46 +46,39 @@ Segment Selection allows you to highlight a segment in a chart series. To enable
 
 {% highlight xaml %}
 
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior   EnableSegmentSelection="True" >
-
-</syncfusion:ChartSelectionBehavior>
+<syncfusion:ColumnSeries
+    Label="2011"
+    SegmentSelectionBrush="Green"
+    Interior="#777777"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
+<syncfusion:SfChart.Behaviors>
+    <syncfusion:ChartSelectionBehavior
+        EnableSegmentSelection="True">
+    </syncfusion:ChartSelectionBehavior>
 </syncfusion:SfChart.Behaviors>
 
-<syncfusion:ColumnSeries Label="2011" SegmentSelectionBrush="Green" Interior="#777777"
-
-ItemsSource="{Binding Demands}" XBindingPath="Demand" YBindingPath="Year2011"/>
-
 {% endhighlight %}
 
 {% highlight c# %}
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     EnableSegmentSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
-    YBindingPath = "Year2010",
-
+    YBindingPath = "Year2011",
     Label ="2011",
-
     SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series);
@@ -109,19 +99,20 @@ The following code example demonstrates the spline series segment selection by c
 
 {% highlight xml %}
 
-<syncfusion:SplineSeries SegmentSelectionBrush="Red"
-
-ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-XBindingPath="Demand"
-
-YBindingPath="Year2010">
-
-<syncfusion:SplineSeries.AdornmentsInfo>
-
-<syncfusion:ChartAdornmentInfo ShowMarker="True" Symbol="Ellipse" HighlightOnSelection="True"></syncfusion:ChartAdornmentInfo>
-
-</syncfusion:SplineSeries.AdornmentsInfo>
+<syncfusion:SplineSeries
+    SegmentSelectionBrush="Red"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
+
+    <syncfusion:SplineSeries.AdornmentsInfo>
+        <syncfusion:ChartAdornmentInfo
+            ShowMarker="True"
+            Symbol="Ellipse"
+            HighlightOnSelection="True">
+        </syncfusion:ChartAdornmentInfo>
+    </syncfusion:SplineSeries.AdornmentsInfo>
 
 </syncfusion:SplineSeries>
 
@@ -131,41 +122,28 @@ YBindingPath="Year2010">
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     EnableSegmentSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
 
 SplineSeries series = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     SegmentSelectionBrush = new SolidColorBrush(Colors.Red),
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
 {
-
     ShowMarker = true,
-
     HighlightOnSelection = true,
-
     Symbol = ChartSymbol.Ellipse
-
 };
 
 series.AdornmentsInfo = adornmentInfo;
-
 chart.Series.Add(series);
 
 {% endhighlight %}
@@ -184,27 +162,27 @@ The following code example demonstrates highlighting a series.
 
 {% highlight xml %}
 
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior EnableSegmentSelection="False" EnableSeriesSelection="True"/>
-
-</syncfusion:SfChart.Behaviors>   
-
-<syncfusion:ScatterSeries Label="2010"  SeriesSelectionBrush="Green"
-
-ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-XBindingPath="Demand"
-
-YBindingPath="Year2010">
-
+<syncfusion:ScatterSeries
+    Label="2010"
+    SeriesSelectionBrush="Green"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
 </syncfusion:ScatterSeries>
 
-<syncfusion:ScatterSeries Label="2011" SeriesSelectionBrush="Green" Interior="#777777"
-
-ItemsSource="{Binding Demands}" XBindingPath="Demand" 
+<syncfusion:ScatterSeries
+    Label="2011"
+    SeriesSelectionBrush="Green"
+    ItemsSource="{Binding Demands}"
+    Interior="#777777"
+    XBindingPath="Demand"
+    YBindingPath="Year2011">
+</syncfusion:ScatterSeries>
 
-YBindingPath="Year2011"/>    
+<syncfusion:SfChart.Behaviors>
+    <syncfusion:ChartSelectionBehavior EnableSegmentSelection="False" EnableSeriesSelection="True"/>
+</syncfusion:SfChart.Behaviors>   
 
 {% endhighlight %}
 
@@ -212,51 +190,33 @@ YBindingPath="Year2011"/>
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     EnableSegmentSelection = true,
-
     EnableSeriesSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
 
 ScatterSeries series1 = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     Label = "2010",
-
     SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 ScatterSeries series2 = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     Label = "2011",
-
     SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -281,23 +241,23 @@ The following code example demonstrates the segment selection with adornments
 
 {% highlight xaml %}
 
-<syncfusion:ColumnSeries Interior="#4A4A4A"
-
-ItemsSource="{Binding Demands}" XBindingPath="Demand"
-
-SegmentSelectionBrush="Green"
-
-YBindingPath="Year2010">
-
-<syncfusion:ColumnSeries.AdornmentsInfo>
-
-<syncfusion:ChartAdornmentInfo UseSeriesPalette="True" ShowConnectorLine="True"
-
-ConnectorHeight="30" ShowLabel="True" HighlightOnSelection="True">
-
-</syncfusion:ChartAdornmentInfo>
-
-</syncfusion:ColumnSeries.AdornmentsInfo>
+<syncfusion:ColumnSeries
+    Interior="#4A4A4A"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year20110"
+    SegmentSelectionBrush="Green">
+
+    <syncfusion:ColumnSeries.AdornmentsInfo>
+        <syncfusion:ChartAdornmentInfo
+            UseSeriesPalette="True"                        
+            ShowConnectorLine="True"            
+            ConnectorHeight="30"
+            ShowLabel="True"
+            HighlightOnSelection="True">
+        </syncfusion:ChartAdornmentInfo>
+    </syncfusion:ColumnSeries.AdornmentsInfo>
+</syncfusion:ColumnSeries>
 
 {% endhighlight %}
 
@@ -305,41 +265,27 @@ ConnectorHeight="30" ShowLabel="True" HighlightOnSelection="True">
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     EnableSegmentSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     SegmentSelectionBrush = new SolidColorBrush(Colors.Green),
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
 {
-
     ShowLabel = true,
-
     ShowConnectorLine = true,
-
+    ConnectorHeight = 30,
     HighlightOnSelection = true,
-
-    UseSeriesPalette = true,
-
-    ConnectorHeight = 30
-
+    UseSeriesPalette = true
 };
 
 series.AdornmentsInfo = adornmentInfo;
@@ -361,53 +307,39 @@ The following code example demonstrates the series selection with adornments.
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior EnableSegmentSelection="False" 
-
-EnableSeriesSelection="True"/>
-
+    <syncfusion:ChartSelectionBehavior  EnableSegmentSelection="False" EnableSeriesSelection="True"/>
 </syncfusion:SfChart.Behaviors>
 
-<syncfusion:SplineSeries ItemsSource="{Binding Demands}" SeriesSelectionBrush="Green"
-
-XBindingPath="Demand" 
-
-YBindingPath="Year2010">
-
-<syncfusion:SplineSeries.AdornmentsInfo>
-
-<syncfusion:ChartAdornmentInfo Symbol="Ellipse"
-
-ShowMarker="True"
-
-HighlightOnSelection="True">                                            
-
-</syncfusion:ChartAdornmentInfo>
-
-</syncfusion:SplineSeries.AdornmentsInfo>
-
+<syncfusion:SplineSeries
+    ItemsSource="{Binding Demands}"
+    SeriesSelectionBrush="Green"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
+
+    <syncfusion:SplineSeries.AdornmentsInfo>
+        <syncfusion:ChartAdornmentInfo
+            Symbol="Ellipse"
+            ShowMarker="True"
+            HighlightOnSelection="True">
+        </syncfusion:ChartAdornmentInfo>
+    </syncfusion:SplineSeries.AdornmentsInfo>
 </syncfusion:SplineSeries>
 
-<syncfusion:SplineSeries Label="2010" Interior="#4A4A4A" 
-
-ItemsSource="{Binding Demands}" SeriesSelectionBrush="Green"
-
-XBindingPath="Demand"
-
-YBindingPath="Year2011">
-
-<syncfusion:SplineSeries.AdornmentsInfo>
-
-<syncfusion:ChartAdornmentInfo Symbol="Ellipse"
-
-ShowMarker="True"
-
-HighlightOnSelection="True">
-
-</syncfusion:ChartAdornmentInfo>
-
-</syncfusion:SplineSeries.AdornmentsInfo>
-
+<syncfusion:SplineSeries
+    Label="2010"
+    ItemsSource="{Binding Demands}"
+    SeriesSelectionBrush="Green"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2011">
+
+    <syncfusion:SplineSeries.AdornmentsInfo>
+        <syncfusion:ChartAdornmentInfo
+            Symbol="Ellipse"
+            ShowMarker="True"
+            HighlightOnSelection="True">
+        </syncfusion:ChartAdornmentInfo>
+    </syncfusion:SplineSeries.AdornmentsInfo>
 </syncfusion:SplineSeries>
 
 {% endhighlight %}
@@ -416,69 +348,47 @@ HighlightOnSelection="True">
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     EnableSegmentSelection = false,
-
     EnableSeriesSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
 
 SplineSeries series1 = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     SeriesSelectionBrush = new SolidColorBrush(Colors.Green)
-
 };
 
 ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
 {
-
     ShowMarker = true,
-
     Symbol = ChartSymbol.Ellipse
-
 };
 
 series1.AdornmentsInfo = adornmentInfo;
 
 SplineSeries series2 = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     SeriesSelectionBrush = new SolidColorBrush(Colors.Green),
-
-    Interior = new SolidColorBrush(Color.FromRgb(0x4A,0x4A,0x4A))
-
+    Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
 };
 
 ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo()
 {
-
     ShowMarker = true,
-
     Symbol = ChartSymbol.Ellipse,
-
     HighlightOnSelection = true
-
 };
 
 series2.AdornmentsInfo = adornmentInfo1;
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -511,11 +421,8 @@ The following code snippet demonstrates the selection mode using [`MouseMove`](h
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseMove,
-
     EnableSeriesSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
@@ -535,11 +442,7 @@ The following code snippet demonstrates multiple segment selection.
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior SelectionStyle="Multiple" EnableSegmentSelection="True">
-
-</syncfusion:ChartSelectionBehavior>
-
+    <syncfusion:ChartSelectionBehavior SelectionStyle="Multiple" EnableSegmentSelection="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -548,11 +451,8 @@ The following code snippet demonstrates multiple segment selection.
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     SelectionStyle = SelectionStyle.Multiple,
-
     EnableSegmentSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
@@ -575,11 +475,7 @@ The following code snippet demonstrates hand cursor in segment selection.
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartSelectionBehavior SelectionCursor="Hand"  EnableSegmentSelection="True">
-
-</syncfusion:ChartSelectionBehavior>
-
+    <syncfusion:ChartSelectionBehavior SelectionCursor="Hand" EnableSegmentSelection="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -588,11 +484,8 @@ The following code snippet demonstrates hand cursor in segment selection.
 
 ChartSelectionBehavior selection = new ChartSelectionBehavior()
 {
-
     SelectionCursor = Cursors.Hand,
-
     EnableSegmentSelection = true
-
 };
 
 chart.Behaviors.Add(selection);
@@ -640,7 +533,6 @@ The [`SelectionChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.C
 
 ## See also
 
-[`How to change the series selection when clicking the legend items in WPF Chart`](https://www.syncfusion.com/kb/10461/how-to-change-the-series-selection-when-clicking-the-legend-items-in-wpf-chart)
-
-[`How to deselect the chart segment by using code behind`](https://www.syncfusion.com/kb/5473/how-to-deselect-the-chart-segment-by-using-code-behind)
+[`How to change the series selection when clicking the legend items in WPF Chart?`](https://www.syncfusion.com/kb/10461/how-to-change-the-series-selection-when-clicking-the-legend-items-in-wpf-chart)
+[`How to deselect the chart segment by using code behind?`](https://www.syncfusion.com/kb/5473/how-to-deselect-the-chart-segment-by-using-code-behind)
 
diff --git a/wpf/Charts/Interactive-Features/Tooltip.md b/wpf/Charts/Interactive-Features/Tooltip.md
index 2b9c8d81a5..c3d5e95499 100644
--- a/wpf/Charts/Interactive-Features/Tooltip.md
+++ b/wpf/Charts/Interactive-Features/Tooltip.md
@@ -22,16 +22,17 @@ The tooltip will be visible if you enable [`ShowTooltip`](https://help.syncfusio
 
 {% highlight xaml %}
 
-<syncfusion:ColumnSeries  ShowTooltip="True"                                                  
-ItemsSource="{Binding Demands}" 
-
-XBindingPath="Demand"  YBindingPath="Year2010"/>
-
-<syncfusion:ColumnSeries ItemsSource="{Binding Demands}" 
-
-ShowTooltip="True"                           
-
-XBindingPath="Demand"  YBindingPath="Year2011"/>           
+<syncfusion:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"/>
+
+<syncfusion:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>         
 
 {% endhighlight %}
 
@@ -39,32 +40,21 @@ XBindingPath="Demand"  YBindingPath="Year2011"/>
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true
-
 };
 
 ColumnSeries series2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     ShowTooltip = true
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -95,9 +85,7 @@ The following properties are used to customize and configure tooltip which is av
 {% highlight xml %}
 
 <chart:SfChart.Behaviors>
-
-<chart:ChartTooltipBehavior/>                                                  
-
+    <chart:ChartTooltipBehavior/>                                                  
 </chart:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -107,7 +95,6 @@ The following properties are used to customize and configure tooltip which is av
 SfChart chart = new SfChart();
 
 ChartTooltipBehavior behavior = new ChartTooltipBehavior();
-
 chart.Behaviors.Add(behavior);
 
 {% endhighlight %}
@@ -127,9 +114,7 @@ The following code example explains positioning the tooltip at `Pointer` positio
 {% highlight xml %}
 
 <chart:SfChart.Behaviors>
-
-<chart:ChartTooltipBehavior x:Name="chartTooltipBehavior" Position="Pointer"/>                                               
-
+    <chart:ChartTooltipBehavior x:Name="chartTooltipBehavior" Position="Pointer"/>
 </chart:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -140,6 +125,7 @@ SfChart chart = new SfChart();
 ...
 ChartTooltipBehavior chartTooltipBehavior = new ChartTooltipBehavior();
 chartTooltipBehavior.Position = TooltipPosition.Pointer;
+
 chart.Behaviors.Add(chartTooltipBehavior);
 
 {% endhighlight %}
@@ -160,13 +146,13 @@ The following code example explains applying the style for tooltip.
 
 <chart:SfChart.Resources>
     <Style TargetType="Path" x:Key="style">
-       <Setter Property="Stroke" Value="Black"/>
-       <Setter Property="Fill" Value="Gray"/>
+        <Setter Property="Stroke" Value="Black"/>
+        <Setter Property="Fill" Value="Gray"/>
     </Style>
 </chart:SfChart.Resources>
 ...
 <chart:SfChart.Behaviors>
-    <chart:ChartTooltipBehavior Style = {StaticResource style}/>
+    <chart:ChartTooltipBehavior Style = "{StaticResource style}"/>
 </chart:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -174,12 +160,16 @@ The following code example explains applying the style for tooltip.
 {% highlight c# %}
 
 SfChart chart = new SfChart();
+
 Style style = new Style(typeof(Path));
 style.Setters.Add(new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.Black)));
 style.Setters.Add(new Setter(Path.FillProperty, new SolidColorBrush(Colors.Gray)));
+
 ...
+
 ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior();
 tooltipBehavior.Style = style;
+
 chart.Behaviors.Add(tooltipBehavior);
 ...
 
@@ -201,13 +191,13 @@ The following code example explains applying the style for a tooltip label.
 
 <chart:SfChart.Resources>
     <Style TargetType="TextBlock" x:Key="labelStyle">
-       <Setter Property="FontSize" Value="14"/>
-       <Setter Property="Foreground" Value="Red"/>
+        <Setter Property="FontSize" Value="14"/>
+        <Setter Property="Foreground" Value="Red"/>
     </Style>
 </chart:SfChart.Resources>
 ...
 <chart:SfChart.Behaviors>
-   <chart:ChartTooltipBehavior LabelStyle = {StaticResource labelStyle}/>
+    <chart:ChartTooltipBehavior LabelStyle = "{StaticResource labelStyle}"/>
 </chart:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -215,12 +205,14 @@ The following code example explains applying the style for a tooltip label.
 {% highlight c# %}
 
 SfChart chart = new SfChart();
+
 Style labelStyle = new Style(typeof(TextBlock));
 labelStyle.Setters.Add(new Setter(TextBlock.FontSizeProperty, 14d));
 labelStyle.Setters.Add(new Setter(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Red)));
 ...
 ChartTooltipBehavior tooltipBehavior = new ChartTooltipBehavior();
 tooltipBehavior.LabelStyle = labelStyle;
+
 chart.Behaviors.Add(tooltipBehavior);
 ...
 
@@ -244,17 +236,19 @@ The following code example explains the positioning of tooltip to the left of th
 
 {% highlight xaml %}
 
-<Chart:ColumnSeries ShowTooltip="True" ItemsSource="{Binding Demands}"  
-
-Chart:ChartTooltip.HorizontalAlignment="Left"
-
-XBindingPath="Demand"  YBindingPath="Year2010" />
+<Chart:ColumnSeries
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    ShowTooltip="True"
+    Chart:ChartTooltip.HorizontalAlignment="Left"/>
 
-<Chart:ColumnSeries ItemsSource="{Binding Demands}" 
-
-Chart:ChartTooltip.HorizontalAlignment="Left" ShowTooltip="True"
-
-XBindingPath="Demand"  YBindingPath="Year2011"/>
+<Chart:ColumnSeries
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"
+    ShowTooltip="True"
+    Chart:ChartTooltip.HorizontalAlignment="Left"/>
 
 {% endhighlight %}
 
@@ -262,36 +256,25 @@ XBindingPath="Demand"  YBindingPath="Year2011"/>
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true
-    
 };
 
 ChartTooltip.SetHorizontalAlignment(series1, HorizontalAlignment.Left);
 
 ColumnSeries series2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     ShowTooltip = true
-
 };
 
 ChartTooltip.SetHorizontalAlignment(series2, HorizontalAlignment.Left);
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -310,17 +293,19 @@ The following code example explains the positioning of tooltip to the bottom of
 
 {% highlight xaml %}
 
-<Chart:ColumnSeries ShowTooltip="True" ItemsSource="{Binding Demands}"  
-
-Chart:ChartTooltip.VerticalAlignment="Bottom"
-
-XBindingPath="Demand" YBindingPath="Year2010" />
+<Chart:ColumnSeries
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    ShowTooltip="True"
+    Chart:ChartTooltip.VerticalAlignment="Bottom"/>
 
-<Chart:ColumnSeries ItemsSource="{Binding Demands}"
-
-Chart:ChartTooltip.VerticalAlignment="Bottom"
-
-ShowTooltip="True" XBindingPath="Demand"  YBindingPath="Year2011"/>
+<Chart:ColumnSeries
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"
+    ShowTooltip="True"
+    Chart:ChartTooltip.VerticalAlignment="Bottom"/>
 
 {% endhighlight %}
 
@@ -328,36 +313,25 @@ ShowTooltip="True" XBindingPath="Demand"  YBindingPath="Year2011"/>
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true
-    
 };
 
 ChartTooltip.SetVerticalAlignment(series1, VerticalAlignment.Bottom);
 
 ColumnSeries series2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     ShowTooltip = true
-
 };
 
 ChartTooltip.SetVerticalAlignment(series2, VerticalAlignment.Bottom);
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -374,21 +348,23 @@ You can also set the distance for the margin to be positioned from the cursor us
 
 {% highlight xaml %}
 
-<Chart:ColumnSeries Label="2010" ShowTooltip="True"
-
-ItemsSource="{Binding Demands}"   Interior="#777777"
-
-Chart:ChartTooltip.TooltipMargin="25"
-
-XBindingPath="Demand" YBindingPath="Year2010" />
-
-<Chart:ColumnSeries Label="2011"  ItemsSource="{Binding Demands}"
-
-Interior="#4A4A4A"
-
-Chart:ChartTooltip.TooltipMargin="25"
-
-ShowTooltip="True" XBindingPath="Demand"  YBindingPath="Year2011"/>
+<Chart:ColumnSeries
+    Label="2010"
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    Interior="#777777"
+    Chart:ChartTooltip.TooltipMargin="25"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"/>
+
+<Chart:ColumnSeries
+    Label="2011"
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    Chart:ChartTooltip.TooltipMargin="25"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -396,44 +372,29 @@ ShowTooltip="True" XBindingPath="Demand"  YBindingPath="Year2011"/>
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 ChartTooltip.SetTooltipMargin(series1, new Thickness(25));
 
 ColumnSeries series2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
-
     Label = "2011"
-
 };
 
 ChartTooltip.SetTooltipMargin(series2, new Thickness(25));
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -452,23 +413,21 @@ The tooltip can be positioned at a particular distance from the cursor horizonta
 
 {% highlight xaml %}
 
-<Chart:ColumnSeries ShowTooltip="True"
-
-ItemsSource="{Binding Demands}" 
-
-Chart:ChartTooltip.HorizontalOffset="40"
-
-Chart:ChartTooltip.VerticalOffset="40"
-
-XBindingPath="Demand" YBindingPath="Year2010" />
-
-<Chart:ColumnSeries ItemsSource="{Binding Demands}"
-
-Chart:ChartTooltip.HorizontalOffset="40"
-
-Chart:ChartTooltip.VerticalOffset="40" ShowTooltip="True"
-
-XBindingPath="Demand"  YBindingPath="Year2011"/>
+<Chart:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    Chart:ChartTooltip.HorizontalOffset="40"
+    Chart:ChartTooltip.VerticalOffset="40"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"/>
+
+<Chart:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    Chart:ChartTooltip.HorizontalOffset="40"
+    Chart:ChartTooltip.VerticalOffset="40"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -476,48 +435,31 @@ XBindingPath="Demand"  YBindingPath="Year2011"/>
 
 ColumnSeries series1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 ChartTooltip.SetHorizontalOffset(series1, 40);
-
 ChartTooltip.SetVerticalOffset(series1, 40);
 
 ColumnSeries series2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
-
     Label = "2011"
-
 };
 
 ChartTooltip.SetHorizontalOffset(series2, 40);
-
 ChartTooltip.SetVerticalOffset(series2, 40);
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -536,14 +478,13 @@ The following code example demonstrates the duration of the tooltip set as 5 sec
 
 {% highlight xml %}
 
-<Chart:ColumnSeries ShowTooltip="True"  
-
-Chart:ChartTooltip.ShowDuration="5000"                                          
-
-ItemsSource="{Binding Demands}" Interior="#777777"                                     
-
-XBindingPath="Demand"  YBindingPath="Year2010">                                   
-
+<Chart:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    Interior="#777777"
+    Chart:ChartTooltip.ShowDuration="5000"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
 </Chart:ColumnSeries>
 
 {% endhighlight %}
@@ -552,19 +493,12 @@ XBindingPath="Demand"  YBindingPath="Year2010">
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 ChartTooltip.SetShowDuration(series, 5000);
@@ -587,13 +521,14 @@ The following code example demonstrates the tooltip will be delayed for 1 second
 
 {% highlight xml %}
 
-<Chart:ColumnSeries Label="2010" ShowTooltip="True"  
-
-Chart:ChartTooltip.InitialShowDelay="1000"                                          
-
-ItemsSource="{Binding Demands}" Interior="#777777"                                     
-
-XBindingPath="Demand"  YBindingPath="Year2010" />                                   
+<Chart:ColumnSeries 
+    Label="2010" 
+    ShowTooltip="True"  
+    Chart:ChartTooltip.InitialShowDelay="1000"                                          
+    ItemsSource="{Binding Demands}" 
+    Interior="#777777"                                     
+    XBindingPath="Demand"  
+    YBindingPath="Year2010"/>                               
 
 {% endhighlight %}
 
@@ -601,19 +536,12 @@ XBindingPath="Demand"  YBindingPath="Year2010" />
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 ChartTooltip.SetInitialShowDelay(series, 1000);
@@ -632,15 +560,14 @@ You can also provide animation effects for tooltip by setting the [`EnableAnimat
 
 {% highlight xml %}
 
-<Chart:ColumnSeries Label="2010" ShowTooltip="True"  
-
-Chart:ChartTooltip.EnableAnimation="True"                                          
-
-ItemsSource="{Binding Demands}" Interior="#777777"                                     
-
-XBindingPath="Demand"  YBindingPath="Year2010">                                   
-
-</Chart:ColumnSeries>
+<Chart:ColumnSeries 
+    Label="2010" 
+    ShowTooltip="True"  
+    Chart:ChartTooltip.EnableAnimation="True"                                          
+    ItemsSource="{Binding Demands}" 
+    Interior="#777777"                                     
+    XBindingPath="Demand"  
+    YBindingPath="Year2010"/>
 
 {% endhighlight %}
 
@@ -648,19 +575,12 @@ XBindingPath="Demand"  YBindingPath="Year2010">
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     ShowTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 ChartTooltip.SetEnableAnimation(series, true);
@@ -681,45 +601,91 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch
 
 <chart:SfChart.Resources>
     <Style TargetType="Path" x:Key="style">
-        <Setter Property="Stroke" Value="Black"/>
-        <Setter Property="Fill" Value="LightGreen"/>
-        <Setter Property="StrokeThickness" Value="2"/>
+        <Setter Property="Stroke" Value="Black" />
+        <Setter Property="Fill" Value="LightGreen" />
+        <Setter Property="StrokeThickness" Value="2" />
     </Style>
 </chart:SfChart.Resources>
+
 ...
 
-<chart:ColumnSeries ShowTooltip="True" ItemsSource="{Binding Demands}"
-    XBindingPath="Demand" YBindingPath="Year2010" >
+<chart:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
+
     <chart:ColumnSeries.TooltipTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
-                <TextBlock Text="{Binding Item.Demand}"
-                    Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                <TextBlock Text=" : " Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                <TextBlock Text="{Binding Item.Year2010}"
-                    Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                <TextBlock
+                    Text="{Binding Item.Demand}"
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"/>
+                <TextBlock
+                    Text=" : "
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"/>
+                <TextBlock
+                    Text="{Binding Item.Year2010}"
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+					HorizontalAlignment="Center"
+                    VerticalAlignment="Center"/>
             </StackPanel>
         </DataTemplate>
     </chart:ColumnSeries.TooltipTemplate>
+
 </chart:ColumnSeries>
 
-<chart:ColumnSeries  ItemsSource="{Binding Demands}"
-    ShowTooltip="True" XBindingPath="Demand"  YBindingPath="Year2011">
+<chart:ColumnSeries
+    ShowTooltip="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011">
+
     <chart:ColumnSeries.TooltipTemplate>
         <DataTemplate>
             <StackPanel Orientation="Horizontal">
-                <TextBlock Text="{Binding Item.Demand}"
-                    Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                <TextBlock Text=" : " Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                <TextBlock Text="{Binding Item.Year2011}"
-                    Foreground="Black" FontWeight="Medium" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                <TextBlock
+                    Text="{Binding Item.Demand}"
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center" />
+                <TextBlock
+                    Text=" : "
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center" />
+                <TextBlock
+                    Text="{Binding Item.Year2011}"
+                    Foreground="Black"
+                    FontWeight="Medium"
+                    FontSize="12"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center" />
             </StackPanel>
         </DataTemplate>
     </chart:ColumnSeries.TooltipTemplate>
+
 </chart:ColumnSeries>
+
 ...
+
 <chart:SfChart.Behaviors>
-        <chart:ChartTooltipBehavior Style="{StaticResource style}" />
+    <chart:ChartTooltipBehavior
+        Style="{StaticResource style}" />
 </chart:SfChart.Behaviors>
 ...
 
@@ -729,52 +695,52 @@ The [`TooltipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ch
 
 ...
 
-    DataTemplate tooltip = new DataTemplate();
+DataTemplate tooltip = new DataTemplate();
 
-    FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel));
-    stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
+FrameworkElementFactory stackpanel = new FrameworkElementFactory(typeof(StackPanel));
+stackpanel.SetValue(StackPanel.OrientationProperty, Orientation.Horizontal);
 
-    FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock));
-    textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand"));
-    textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
-    textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
-    textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
-    textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
+FrameworkElementFactory textblock = new FrameworkElementFactory(typeof(TextBlock));
+textblock.SetBinding(TextBlock.TextProperty, new Binding("Item.Demand"));
+textblock.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
+textblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
+textblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
+textblock.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
 
-    stackpanel.AppendChild(textblock);
+stackpanel.AppendChild(textblock);
 
-    FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock));
-    textblock1.SetValue(TextBlock.TextProperty, " : ");
-    textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
-    textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
-    textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
-    textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
+FrameworkElementFactory textblock1 = new FrameworkElementFactory(typeof(TextBlock));
+textblock1.SetValue(TextBlock.TextProperty, " : ");
+textblock1.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
+textblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
+textblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
+textblock1.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
 
-    stackpanel.AppendChild(textblock1);
+stackpanel.AppendChild(textblock1);
 
-    FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock));
-    textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010"));
-    textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
-    textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
-    textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
-    textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
+FrameworkElementFactory textblock2 = new FrameworkElementFactory(typeof(TextBlock));
+textblock2.SetBinding(TextBlock.TextProperty, new Binding("Item.Year2010"));
+textblock2.SetValue(TextBlock.FontWeightProperty, FontWeights.Bold);
+textblock2.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
+textblock2.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
+textblock2.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.Black));
 
-    stackpanel.AppendChild(textblock2);
-    tooltip.VisualTree = stackpanel;
+stackpanel.AppendChild(textblock2);
+tooltip.VisualTree = stackpanel;
 
-    ColumnSeries series1 = new ColumnSeries()
-    {
+ColumnSeries series1 = new ColumnSeries()
+{
 
-        ItemsSource = Demands,
-        XBindingPath = "Demand",
-        YBindingPath = "Year2010",
-        Label = "2010",
-        ShowTooltip = true,
-        TooltipTemplate = tooltip
+    ItemsSource = new ViewModel().Demands,
+    XBindingPath = "Demand",
+    YBindingPath = "Year2010",
+    Label = "2010",
+    ShowTooltip = true,
+    TooltipTemplate = tooltip
 
-    };
+};
 
-    chart.Series.Add(series1);
+chart.Series.Add(series1);
 ...
         
 {% endhighlight %}
@@ -787,12 +753,8 @@ N> The `ChartTooltipBehavior` is commonly used for all series to customize the t
 
 ## See also
 
-[`How to display the tooltip when the mouse is in any region of the FastLineBitmapSeries in WPF Chart `](https://www.syncfusion.com/kb/10921/how-to-display-the-tooltip-when-the-mouse-is-in-any-region-of-the-fastlinebitmapseries-in)
-
- [`How to customize the tooltip in chart `](https://www.syncfusion.com/kb/10723/how-to-customize-the-tooltip-in-chart)
-
-[`How to set the duration for chart tooltip`](https://www.syncfusion.com/kb/5474/how-to-set-the-duration-for-chart-tooltip)
-
-[`How to make the tooltip to display x and y values together or any other value from the underlying model`](https://www.syncfusion.com/kb/5231/how-to-make-the-tooltip-to-display-x-and-y-values-together-or-any-other-value-from-the)
-
-[`How to view the tooltip when segment is underneath the axis line`](https://www.syncfusion.com/kb/4722/how-to-view-the-tooltip-when-segment-is-underneath-the-axis-line)
+[`How to display the tooltip when the mouse is in any region of the FastLineBitmapSeries in WPF Chart?`](https://www.syncfusion.com/kb/10921/how-to-display-the-tooltip-when-the-mouse-is-in-any-region-of-the-fastlinebitmapseries-in)
+[`How to customize the tooltip in chart?`](https://www.syncfusion.com/kb/10723/how-to-customize-the-tooltip-in-chart)
+[`How to set the duration for chart tooltip?`](https://www.syncfusion.com/kb/5474/how-to-set-the-duration-for-chart-tooltip)
+[`How to make the tooltip to display x and y values together or any other value from the underlying model?`](https://www.syncfusion.com/kb/5231/how-to-make-the-tooltip-to-display-x-and-y-values-together-or-any-other-value-from-the)
+[`How to view the tooltip when segment is underneath the axis line?`](https://www.syncfusion.com/kb/4722/how-to-view-the-tooltip-when-segment-is-underneath-the-axis-line)
diff --git a/wpf/Charts/Interactive-Features/Trackball.md b/wpf/Charts/Interactive-Features/Trackball.md
index 19295ce384..a2b9822ba8 100644
--- a/wpf/Charts/Interactive-Features/Trackball.md
+++ b/wpf/Charts/Interactive-Features/Trackball.md
@@ -20,11 +20,8 @@ You can create an instance [`ChartTrackBallBehavior`](https://help.syncfusion.co
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior>                                                  
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior>                                                  
+    </syncfusion:ChartTrackBallBehavior>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -48,9 +45,7 @@ To view the TrackBall in the particular Axis, you have to enable the ShowTrackBa
 {% highlight xml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis  ShowTrackBallInfo="True" />
-
+    <syncfusion:CategoryAxis ShowTrackBallInfo="True"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -63,9 +58,7 @@ chart.Behaviors.Add(behavior);
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     ShowTrackBallInfo = true
-
 };
 
 {% endhighlight %}
@@ -98,9 +91,7 @@ The following code snippet explains how to collapse the visibility of trackball
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior ShowLine="False" />
-
+    <syncfusion:ChartTrackBallBehavior ShowLine="False"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -109,9 +100,7 @@ The following code snippet explains how to collapse the visibility of trackball
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     ShowLine = false
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -134,27 +123,17 @@ The following code snippet explains the customization of trackball line.
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <Style TargetType="Line" x:Key="lineStyle">
-
             <Setter Property="StrokeDashArray" Value="5,1,2"/>
-
             <Setter Property="Stroke" Value="Red"/>
-
             <Setter Property="StrokeThickness" Value="1.2"/>
-
         </Style>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Behaviors>
-
         <syncfusion:ChartTrackBallBehavior LineStyle="{StaticResource lineStyle}"/>
-
     </syncfusion:SfChart.Behaviors>
-            
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -163,9 +142,7 @@ The following code snippet explains the customization of trackball line.
 
 ChartTrackBallBehavior trackball = new ChartTrackBallBehavior()
 {
-
     LineStyle = chart.Resources["lineStyle"] as Style
-
 };
 
 chart.Behaviors.Add(trackball);
@@ -186,23 +163,15 @@ By default, the trackball symbol is displayed as ellipse to change the default s
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <Style TargetType="syncfusion:ChartTrackBallControl" x:Key="trackballStyle">
-
             <Setter Property="Background" Value="red"></Setter>
-
         </Style>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Behaviors>
-
         <syncfusion:ChartTrackBallBehavior ChartTrackBallStyle="{StaticResource trackballStyle}"/>
-
     </syncfusion:SfChart.Behaviors>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -213,9 +182,7 @@ SfChart chart = new SfChart();
 
 ChartTrackBallBehavior trackball = new ChartTrackBallBehavior()
 {
-
     ChartTrackBallStyle = chart.Resources["trackballStyle"] as Style
-
 };
 
 chart.Behaviors.Add(trackball);
@@ -251,13 +218,9 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi
 
 {% highlight xaml %}
 
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Far">
-
-</syncfusion:ChartTrackBallBehavior>
-
-</syncfusion:SfChart.Behaviors>
+ <syncfusion:SfChart.Behaviors>
+     <syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Far"/>
+ </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
 
@@ -265,9 +228,7 @@ Center-Axis label is aligned to the center of the trackball. By default, the axi
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     AxisLabelAlignment = ChartAlignment.Far
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -286,11 +247,7 @@ chart.Behaviors.Add(behavior);
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Near"  >       
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior AxisLabelAlignment="Near"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -299,9 +256,7 @@ chart.Behaviors.Add(behavior);
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     AxisLabelAlignment = ChartAlignment.Near
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -321,36 +276,27 @@ You can change the default appearance of the axis label in trackball using [`Tra
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
+<syncfusion:SfChart x:Name="chart">
+    
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="labelTemplate">
-
-            <Border CornerRadius="4" BorderThickness="1" BorderBrush="Black"
-                            
-                    Background="BlueViolet" Margin="8">
-
-                    <TextBlock Foreground="White" Text="{Binding ValueX}"/>
-
+            <Border 
+                CornerRadius="4" 
+                BorderThickness="1" 
+                BorderBrush="Black"                            
+                Background="BlueViolet" 
+                Margin="8">
+                <TextBlock Foreground="White" Text="{Binding ValueX}"/>
             </Border>
-
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Behaviors>
-
-            <syncfusion:ChartTrackBallBehavior />
-
+        <syncfusion:ChartTrackBallBehavior/>
     </syncfusion:SfChart.Behaviors>
 
     <syncfusion:SfChart.PrimaryAxis>
-
-            <syncfusion:CategoryAxis ShowTrackBallInfo="True" 
-                                         
-                                     LabelTemplate="{StaticResource labelTemplate}"/>
-
+        <syncfusion:CategoryAxis ShowTrackBallInfo="True" LabelTemplate="{StaticResource labelTemplate}"/>
     </syncfusion:SfChart.PrimaryAxis>
 
 </syncfusion:SfChart>
@@ -363,11 +309,8 @@ SfChart chart = new SfChart();
 
 chart.PrimaryAxis = new NumericalAxis()
 {
-
     ShowTrackBallInfo = true,
-
     TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
@@ -389,7 +332,7 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 
 {% highlight xaml %}
 
- <syncfusion:SfChart >
+ <syncfusion:SfChart>
             <syncfusion:SplineSeries Interior="#4a4a4a"/>    
             <syncfusion:SplineSeries Interior="#7f7f7f" ShowTrackballInfo="False"/>
             <syncfusion:SplineSeries Interior="#bcbcbc"/>
@@ -399,22 +342,27 @@ The [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 
 {% highlight c# %}
 
-  SplineSeries series1 = new SplineSeries()
-  {
-      Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a))
-  };
-  chart.Series.Add(series1);
-  SplineSeries series2 = new SplineSeries()
-  {
-      Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)),
-      ShowTrackballInfo = false
-  };
-  chart.Series.Add(series2);
-  SplineSeries series3 = new SplineSeries()
-  {
-      Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc))
-  };
-  chart.Series.Add(series3);
+SplineSeries series1 = new SplineSeries()
+{
+    Interior = new SolidColorBrush(Color.FromArgb(0, 0x4a, 0x4a, 0x4a))
+};
+
+chart.Series.Add(series1);
+
+SplineSeries series2 = new SplineSeries()
+{
+    Interior = new SolidColorBrush(Color.FromArgb(0, 0x7f, 0x7f, 0x7f)),
+    ShowTrackballInfo = false
+};
+
+chart.Series.Add(series2);
+
+SplineSeries series3 = new SplineSeries()
+{
+    Interior = new SolidColorBrush(Color.FromArgb(0, 0xbc, 0xbc, 0xbc))
+};
+
+chart.Series.Add(series3);
 
 {% endhighlight %}
 
@@ -435,13 +383,7 @@ The following code snippet explains how to align the series label to the center
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior LabelHorizontalAlignment="Center" 
-
-LabelVerticalAlignment="Center">
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior LabelHorizontalAlignment="Center" LabelVerticalAlignment="Center"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -450,11 +392,8 @@ LabelVerticalAlignment="Center">
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     LabelHorizontalAlignment = ChartAlignment.Center,
-
     LabelVerticalAlignment = ChartAlignment.Center
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -477,11 +416,7 @@ When there is a multiple series, by default, the trackball series label will be
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior LabelDisplayMode="FloatAllPoints" >
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior LabelDisplayMode="FloatAllPoints"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -490,9 +425,7 @@ When there is a multiple series, by default, the trackball series label will be
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     LabelDisplayMode = TrackballLabelDisplayMode.FloatAllPoints
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -511,11 +444,7 @@ chart.Behaviors.Add(behavior);
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior LabelDisplayMode="NearestPoint" >
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior LabelDisplayMode="NearestPoint"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -524,9 +453,7 @@ chart.Behaviors.Add(behavior);
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     LabelDisplayMode = TrackballLabelDisplayMode.NearestPoint
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -546,11 +473,7 @@ chart.Behaviors.Add(behavior);
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior LabelDisplayMode="GroupAllPoints" >
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior LabelDisplayMode="GroupAllPoints"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -559,9 +482,7 @@ chart.Behaviors.Add(behavior);
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
     LabelDisplayMode = TrackballLabelDisplayMode.GroupAllPoints
-
 };
 
 chart.Behaviors.Add(behavior);
@@ -587,30 +508,22 @@ In trackball label, the data point value of the technical indicator also can be
 
 {% highlight xaml %}
 
- <chart:SfChart.Behaviors>
-
-                <chart:ChartTrackBallBehavior />
-
- </chart:SfChart.Behaviors>  
+<chart:SfChart.Behaviors>
+    <chart:ChartTrackBallBehavior/>
+</chart:SfChart.Behaviors>
 
 <chart:SfChart.TechnicalIndicators>
-
-                <chart:AverageTrueRangeIndicator ShowTrackballInfo="True" >
-
-                </chart:AverageTrueRangeIndicator>
-
- </chart:SfChart.TechnicalIndicators>
+    <chart:AverageTrueRangeIndicator ShowTrackballInfo="True"/>
+</chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior();
-
 chart.Behaviors.Add(behavior);
 
 AverageTrueRangeIndicator average = new AverageTrueRangeIndicator();
-
 average.ShowTrackballInfo = true;
 
 chart.TechnicalIndicators.Add(average);
@@ -631,43 +544,32 @@ N> By default, [`ShowTrackballInfo`](https://help.syncfusion.com/cr/wpf/Syncfusi
 
 {% highlight xaml %}
 
-  <syncfusion:SfChart x:Name="chart">
-
-        <syncfusion:SfChart.Resources>
-
-            <DataTemplate x:Key="labelTemplate">
-
-                <Border CornerRadius="5" BorderThickness="1" 
-                            
-                        BorderBrush="Black" Background="BlueViolet" Margin="8">
-
-                    <TextBlock Foreground="White" Text="{Binding ValueY}"/>
-
-                </Border>
-
-            </DataTemplate>
-
-         </syncfusion:SfChart.Resources>
-
-        <syncfusion:SfChart.Behaviors>
-
-                <syncfusion:ChartTrackBallBehavior />
-
-        </syncfusion:SfChart.Behaviors>
-
-        <syncfusion:ColumnSeries Label="2010"  Interior="#4A4A4A"     
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <DataTemplate x:Key="labelTemplate">
+            <Border CornerRadius="5" 
+                    BorderThickness="1"
+                    BorderBrush="Black" 
+                    Background="BlueViolet" 
+                    Margin="8">
+                <TextBlock Foreground="White" Text="{Binding ValueY}"/>
+            </Border>
+        </DataTemplate>
+    </syncfusion:SfChart.Resources>
 
-                                 ItemsSource="{Binding Demands}" 
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartTrackBallBehavior/>
+    </syncfusion:SfChart.Behaviors>
 
-                                 XBindingPath="Demand" 
-                                     
-                                 YBindingPath="Year2010"
-                                 
-                                 TrackBallLabelTemplate="{StaticResource labelTemplate}"/>
-          
+    <syncfusion:ColumnSeries 
+        Label="2010"  
+        Interior="#4A4A4A"     
+        ItemsSource="{Binding Demands}" 
+        XBindingPath="Demand"  
+        YBindingPath="Year2010"  
+        TrackBallLabelTemplate="{StaticResource labelTemplate}"/>
 </syncfusion:SfChart>
 
-
 {% endhighlight %}
 
 {% highlight c# %}
@@ -680,17 +582,11 @@ chart.Behaviors.Add(trackball);
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     TrackBallLabelTemplate = chart.Resources["labelTemplate"] as DataTemplate,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series);
@@ -711,11 +607,8 @@ Palette or interior color of the Series is applied to the series label by settin
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartTrackBallBehavior UseSeriesPalette="True" >
-
-</syncfusion:ChartTrackBallBehavior>
-
+    <syncfusion:ChartTrackBallBehavior UseSeriesPalette="True">
+    </syncfusion:ChartTrackBallBehavior>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -724,9 +617,7 @@ Palette or interior color of the Series is applied to the series label by settin
 
 ChartTrackBallBehavior behavior = new ChartTrackBallBehavior()
 {
-
-     UseSeriesPalette = true
-
+    UseSeriesPalette = true
 };
 
 chart.Behaviors.Add(behavior);
@@ -783,8 +674,6 @@ The [`ChartPointInfo`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Cha
 
 ## See also
 
-[`How to disable a trackball for a specific series`](https://www.syncfusion.com/kb/11291/how-to-disable-a-trackball-for-a-specific-series)
-
-[`How to customize the trackball appearance in WPF Chart`](https://www.syncfusion.com/kb/11020/how-to-customize-the-trackball-appearance-in-wpf-chart)
-
-[`How to apply label formatting to the trackball labels`](https://www.syncfusion.com/kb/5362/how-to-apply-label-formatting-to-the-trackball-labels)
+[`How to disable a trackball for a specific series?`](https://www.syncfusion.com/kb/11291/how-to-disable-a-trackball-for-a-specific-series)
+[`How to customize the trackball appearance in WPF Chart?`](https://www.syncfusion.com/kb/11020/how-to-customize-the-trackball-appearance-in-wpf-chart)
+[`How to apply label formatting to the trackball labels?`](https://www.syncfusion.com/kb/5362/how-to-apply-label-formatting-to-the-trackball-labels)
diff --git a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md
index 117527df62..8db4469268 100644
--- a/wpf/Charts/Interactive-Features/Visual-Data-Editing.md
+++ b/wpf/Charts/Interactive-Features/Visual-Data-Editing.md
@@ -21,14 +21,13 @@ Segment Dragging defines the dragging a particular point or segment based on the
 
 {% highlight xml %}
 
-<syncfusion:LineSeries Label="2010" EnableSegmentDragging="True"
-
-XBindingPath="Demand"   Interior="#777777"
-
-ItemsSource="{Binding Demands}"                                   
-
-YBindingPath="Year2010">
-
+<syncfusion:LineSeries
+    Label="2010"
+    EnableSegmentDragging="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777">
 </syncfusion:LineSeries>
 
 {% endhighlight %}
@@ -37,22 +36,15 @@ YBindingPath="Year2010">
 
 LineSeries series = new LineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSegmentDragging = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
-chart.Series.Add(series)
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -67,14 +59,14 @@ chart.Series.Add(series)
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries Label="2010" EnableDragTooltip="True" EnableSegmentDragging="True"
-
-XBindingPath="Demand"   Interior="#777777"
-
-ItemsSource="{Binding Demands}"                                   
-
-YBindingPath="Year2010">
-
+<syncfusion:ColumnSeries
+    Label="2011"
+    EnableDragTooltip="True"
+    EnableSegmentDragging="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777">
 </syncfusion:ColumnSeries>
 
 {% endhighlight %}
@@ -83,24 +75,16 @@ YBindingPath="Year2010">
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSegmentDragging = true,
-
     EnableDragTooltip = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
-chart.Series.Add(series)
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -116,37 +100,30 @@ This series supports dragging in both the x and y co-ordinates. The dragging co-
 
 {% highlight xml %}
 
-<syncfusion:ScatterSeries ItemsSource="{Binding Data}" XBindingPath="Index" 
-
-                          YBindingPath="Value"  Interior="#777777"
-
-                          EnableSegmentDragging="True" DragDirection="XY" >
-
- </syncfusion:ScatterSeries>
+<syncfusion:ScatterSeries
+    ItemsSource="{Binding Data}"
+    XBindingPath="Index"
+    YBindingPath="Value"
+    Interior="#777777"
+    EnableSegmentDragging="True"
+    DragDirection="XY">
+</syncfusion:ScatterSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ScatterSeries series = new ScatterSeries()
-            
 {
-                
-ItemsSource = new ViewModel().Data,
-                
-XBindingPath = "Index",
-                
-YBindingPath = "Value",
-                
-Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-                
-EnableSegmentDragging = true,
-
-DragDirection = DragType.XY
-            
+    ItemsSource = new ViewModel().Data,
+    XBindingPath = "Index",
+    YBindingPath = "Value",
+    Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
+    EnableSegmentDragging = true,
+    DragDirection = DragType.XY
 };
 
-chart.Series.Add(series)
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -166,11 +143,15 @@ The following code snippet explains the series dragging feature in LineSeries.
 
 {% highlight xaml %}
 
-<syncfusion:LineSeries Label="2010" EnableDragTooltip="True" EnableSeriesDragging="True"
-
-XBindingPath="Demand"   Interior="#777777" ItemsSource="{Binding Demands}"
-
-YBindingPath="Year2010"/>
+<syncfusion:LineSeries
+    Label="2010"
+    EnableDragTooltip="True"
+    EnableSeriesDragging="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777">
+</syncfusion:LineSeries>
 
 {% endhighlight %}
 
@@ -178,21 +159,13 @@ YBindingPath="Year2010"/>
 
 LineSeries series = new LineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSeriesDragging = true,
-
-    EnableDragTooltip = true ,
-
+    EnableDragTooltip = true,
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 chart.Series.Add(series);
@@ -214,14 +187,15 @@ While the series or segment is dragged by default you can view the tooltip showi
 
 {% highlight xml %}
 
-<syncfusion:LineSeries Label="2010"  EnableSegmentDragging="True" EnableDragTooltip="False"
-
-XBindingPath="Demand"   Interior="#777777"
-
-Focusable="False"
-
-ItemsSource="{Binding Demands}"                                   
-
+<syncfusion:LineSeries
+    Label="2010"
+    EnableSegmentDragging="True"
+    EnableDragTooltip="False"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777"
+    Focusable="False">
 </syncfusion:LineSeries>
 
 {% endhighlight %}
@@ -230,23 +204,14 @@ ItemsSource="{Binding Demands}"
 
 LineSeries series = new LineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSeriesDragging = true,
-
-    EnableDragTooltip = true ,
-
+    EnableDragTooltip = false,
     Focusable = false,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     Label = "2010"
-
 };
 
 chart.Series.Add(series);
@@ -268,45 +233,35 @@ chart.Series.Add(series);
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="tooltipTemplate">
-
-            <Border CornerRadius="4" BorderBrush="Black"
-                            
-                    BorderThickness="1" Background="CadetBlue" 
-                    
-                    Margin="0,0,0,15">
-
-                <TextBlock  FontSize="12" Text="{Binding NewValue}" 
-                                    
-                            Width="35" Foreground="White" Margin="2">
-                
-                </TextBlock>
-
+            <Border
+                CornerRadius="4"
+                BorderBrush="Black"
+                BorderThickness="1"
+                Background="CadetBlue"
+                Margin="0,0,0,15">        
+                <TextBlock
+                    Text="{Binding NewValue}"
+                    FontSize="12"
+                    Width="35"
+                    Foreground="White"
+                    Margin="2"/>
             </Border>
-
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
-    <syncfusion:LineSeries Label="2010" EnableSegmentDragging="True" 
-                                   
-                           Interior="#777777"
-                                   
-                           Focusable="False" 
-
-                           XBindingPath="Demand" 
-                                   
-                           ItemsSource="{Binding Demands}"          
-                                   
-                           YBindingPath="Year2010"
-                                   
-                           DragTooltipTemplate="{StaticResource tooltipTemplate }">
-
+    <syncfusion:LineSeries
+        Label="2010"
+        EnableSegmentDragging="True"
+        EnableDragTooltip="False"
+        Focusable="False"
+        ItemsSource="{Binding Demands}"
+        XBindingPath="Demand"
+        YBindingPath="Year2010"
+        Interior="#777777"
+        DragTooltipTemplate="{StaticResource tooltipTemplate}">
     </syncfusion:LineSeries>
-            
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -315,21 +270,13 @@ chart.Series.Add(series);
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     Focusable = false,
-
     EnableSegmentDragging = true,
-
     DragTooltipTemplate = chart.Resources["tooltipTemplate"] as DataTemplate,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series);
@@ -361,13 +308,12 @@ The following are the API’s in `ChartDragTooltipStyle`.
 {% highlight xml %}
 
 <syncfusion:LineSeries.DragTooltipStyle>
-                    
-<syncfusion:ChartDragTooltipStyle FontFamily="Calibri" FontSize="14" 
-                                                     
-                                  FontStyle="Italic" Background="DarkGray" 
-                                                      
-                                  Foreground="Black" />
-
+    <syncfusion:ChartDragTooltipStyle
+        FontFamily="Calibri"
+        FontSize="14"
+        FontStyle="Italic"
+        Background="DarkGray"
+        Foreground="Black"/>
 </syncfusion:LineSeries.DragTooltipStyle>
 
 {% endhighlight %}
@@ -375,19 +321,12 @@ The following are the API’s in `ChartDragTooltipStyle`.
 {% highlight c# %}
 
 series.DragTooltipStyle = new ChartDragTooltipStyle()
-            
 {
-                
     FontFamily = new FontFamily("Calibri"),
-                
-    FontSize = 14,
-                
-    FontStyle = FontStyles.Italic,
-                
+    FontSize   = 14,
+    FontStyle  = FontStyles.Italic,
     Background = new SolidColorBrush(Colors.DarkGray),
-                
     Foreground = new SolidColorBrush(Colors.Black)
-            
 };
 
 {% endhighlight %}
@@ -404,14 +343,15 @@ To round off the dragged values, you have to set the [`SnapToPoint`](https://hel
 
 {% highlight xml %}
 
-<syncfusion:SplineSeries   EnableSegmentDragging="True"
-
-SnapToPoint="Round" RoundToDecimal="2" YBindingPath = "Year2010"
-
-UpdateSource="True" XBindingPath="Demand"   Interior="#777777"
-
-ItemsSource="{Binding Demands}"                                   
-
+<syncfusion:SplineSeries
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777"
+    EnableSegmentDragging="True"
+    UpdateSource="True"
+    SnapToPoint="Round"
+    RoundToDecimal="2">
 </syncfusion:SplineSeries>
 
 {% endhighlight %}
@@ -420,23 +360,14 @@ ItemsSource="{Binding Demands}"
 
 SplineSeries series = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSegmentDragging = true,
-
-    UpdateSource = true ,
-
+    UpdateSource = true,
     RoundToDecimal = 2,
-
     SnapToPoint = SnapToPoint.Round,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series);
@@ -453,14 +384,13 @@ When dragging the series or segment at run time, to update the underlying data b
 
 {% highlight xml %}
 
-<syncfusion:SplineSeries   EnableSegmentDragging="True" UpdateSource="True"
-
-XBindingPath="Demand"   Interior="#777777"
-
-ItemsSource="{Binding Demands}"                                   
-
-YBindingPath="Year2010">
-
+<syncfusion:SplineSeries
+    EnableSegmentDragging="True"
+    UpdateSource="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010"
+    Interior="#777777">
 </syncfusion:SplineSeries>
 
 {% endhighlight %}
@@ -469,19 +399,12 @@ YBindingPath="Year2010">
 
 SplineSeries series = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSegmentDragging = true,
-
-    UpdateSource = true ,
-
+    UpdateSource = true,
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series);
@@ -498,20 +421,13 @@ While you are dragging you can set the KeyModifiers to cancel the drag by settin
 
 {% highlight xml %}
 
-<syncfusion:SplineSeries  
-
-EnableSegmentDragging="True" 
-
-DragCancelKeyModifiers="Alt"  
-
-UpdateSource="True"
-
-XBindingPath="Demand"                                   
-
-ItemsSource="{Binding Demands}"                                   
-
-YBindingPath="Year2010">
-
+<syncfusion:SplineSeries
+    EnableSegmentDragging="True"
+    DragCancelKeyModifiers="Alt"
+    UpdateSource="True"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2010">
 </syncfusion:SplineSeries>
 
 {% endhighlight %}
@@ -520,21 +436,13 @@ YBindingPath="Year2010">
 
 SplineSeries series = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2010",
-
     EnableSegmentDragging = true,
-
     DragCancelKeyModifiers = ModifierKeys.Alt,
-
     UpdateSource = true ,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77))
-
 };
 
 chart.Series.Add(series);
diff --git a/wpf/Charts/Interactive-Features/zoompan.md b/wpf/Charts/Interactive-Features/zoompan.md
index f0331ca68a..101824a233 100644
--- a/wpf/Charts/Interactive-Features/zoompan.md
+++ b/wpf/Charts/Interactive-Features/zoompan.md
@@ -21,13 +21,9 @@ You can create an instance ChartZoomPanBehavior and add it to the Behaviors coll
 
 {% highlight xml %}
 
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior >                                             
-
-</syncfusion:ChartZoomPanBehavior>
-
-</syncfusion:SfChart.Behaviors>
+ <syncfusion:SfChart.Behaviors>
+     <syncfusion:ChartZoomPanBehavior/>
+ </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
 
@@ -55,13 +51,10 @@ The following code example demonstrates the zooming the chart axis by setting zo
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis 
-
-ShowGridLines="False"
-
-ZoomFactor="0.3" ZoomPosition="0.1" />
-
+    <syncfusion:CategoryAxis 
+        ShowGridLines="False"
+        ZoomFactor="0.3"
+        ZoomPosition="0.1"/>
 </syncfusion:SfChart.PrimaryAxis>
 
 {% endhighlight %}
@@ -70,13 +63,9 @@ ZoomFactor="0.3" ZoomPosition="0.1" />
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     ShowGridLines = false,
-
     ZoomFactor = 0.1,
-
     ZoomPosition = 0.3
-
 };
 
 {% endhighlight %}
@@ -94,11 +83,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" >                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -107,9 +92,7 @@ Zooming can be performed by mouse wheel action by setting [`EnableMouseWheelZoom
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableMouseWheelZooming = true
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -126,13 +109,9 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo
 
 {% highlight xml %}
 
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnablePinchZooming="True" >                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
-</syncfusion:SfChart.Behaviors>
+ <syncfusion:SfChart.Behaviors>
+     <syncfusion:ChartZoomPanBehavior EnablePinchZooming="True"/>
+ </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
 
@@ -140,9 +119,7 @@ If you want to zoom using fingers by touch, then you have to set [`EnablePinchZo
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnablePinchZooming = true
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -160,11 +137,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior ZoomRelativeToCursor="True" >                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior ZoomRelativeToCursor="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -173,9 +146,7 @@ To enable the zooming relative to cursor position you can set [`ZoomRelativeToCu
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     ZoomRelativeToCursor = true
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -195,11 +166,7 @@ The following code snippet demonstrated selection zooming.
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" >                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -208,9 +175,7 @@ The following code snippet demonstrated selection zooming.
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableSelectionZooming = true
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -237,13 +202,12 @@ The following code example demonstrates the customization of selection rectangle
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" 
-
-Fill="LightBlue" Stroke="Blue" StrokeThickness="2" >                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior 
+        EnableSelectionZooming="True" 
+        Fill="LightBlue" 
+        Stroke="Blue" 
+        StrokeThickness="2">
+    </syncfusion:ChartZoomPanBehavior>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -252,15 +216,10 @@ Fill="LightBlue" Stroke="Blue" StrokeThickness="2" >
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableSelectionZooming = true,
-
     Fill = new SolidColorBrush(Colors.LightBlue),
-
     Stroke = new SolidColorBrush(Colors.Blue),
-
     StrokeThickness = 2
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -283,11 +242,7 @@ Zooming along [`X`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="X">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="X"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -319,11 +274,7 @@ Zooming along Y axis
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="Y">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" ZoomMode="Y"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -332,11 +283,8 @@ Zooming along Y axis
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableSelectionZooming = true,
-
     ZoomMode = ZoomMode.Y
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -356,11 +304,7 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" MaximumZoomLevel="100">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableSelectionZooming="True" MaximumZoomLevel="100"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -369,11 +313,8 @@ You can also limit the zooming by setting [`MaximumZoomLevel`](https://help.sync
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableSelectionZooming = true,
-
     MaximumZoomLevel = 100
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -391,11 +332,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out
 {% highlight xaml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -404,9 +341,7 @@ Zooming Toolbar encompassed with buttons for performing actions like Zoom In/Out
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableZoomingToolBar = true
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -429,11 +364,7 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help.
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" HorizontalPosition="Left" VerticalPosition="Bottom">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" HorizontalPosition="Left" VerticalPosition="Bottom"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -442,13 +373,9 @@ Zooming Toolbar can be positioned using the [`HorizontalPosition`](https://help.
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableZoomingToolBar = true,
-
     HorizontalPosition = HorizontalAlignment.Left,
-
     VerticalPosition = VerticalAlignment.Bottom
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -475,15 +402,14 @@ Zooming Toolbar can be customized using the following APIs:
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" ToolBarItemHeight="20" 
-
-ToolBarItemWidth="20" ToolBarBackground="AliceBlue" 
-
-ToolBarItems="All" ToolBarItemMargin="2">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior 
+        EnableZoomingToolBar="True" 
+        ToolBarItemHeight="20" 
+        ToolBarItemWidth="20" 
+        ToolBarBackground="AliceBlue" 
+        ToolBarItems="All" 
+        ToolBarItemMargin="2">
+    </syncfusion:ChartZoomPanBehavior>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -492,19 +418,12 @@ ToolBarItems="All" ToolBarItemMargin="2">
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableZoomingToolBar = true,
-
     ToolBarBackground = new SolidColorBrush(Colors.AliceBlue),
-
     ToolBarItemHeight = 20,
-
     ToolBarItemWidth = 20,
-
     ToolBarItemMargin = new Thickness(2),
-
     ToolBarItems = ZoomToolBarItems.All
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -527,13 +446,7 @@ Zooming toolbar orientation is horizontal by default.You can change the orientat
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" 
-
-ToolBarOrientation="Vertical">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior EnableZoomingToolBar="True" ToolBarOrientation="Vertical"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -542,11 +455,8 @@ ToolBarOrientation="Vertical">
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableZoomingToolBar = true,
-
     ToolBarOrientation = Orientation.Vertical
-
 };
 
 chart.Behaviors.Add(zooming);
@@ -565,12 +475,9 @@ Panning feature allows moving the visible area of the chart when it is zoomed in
 {% tabs %}
 
 {% highlight xml %}
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" EnablePanning="True">                                              
-
-</syncfusion:ChartZoomPanBehavior>
 
+<syncfusion:SfChart.Behaviors>
+    <syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True" EnablePanning="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -579,11 +486,8 @@ Panning feature allows moving the visible area of the chart when it is zoomed in
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
     EnableMouseWheelZooming = true,
-
-    EnablePanning = true
-     
+    EnablePanning = true    
 };
 
 chart.Behaviors.Add(zooming);
@@ -606,11 +510,7 @@ SfChart provides support to reset to the default view when you double tap the ch
 {% highlight xml %}
 
 <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior  ResetOnDoubleTap="True">                                              
-
-</syncfusion:ChartZoomPanBehavior>
-
+    <syncfusion:ChartZoomPanBehavior  ResetOnDoubleTap="True"/>
 </syncfusion:SfChart.Behaviors>
 
 {% endhighlight %}
@@ -619,9 +519,7 @@ SfChart provides support to reset to the default view when you double tap the ch
 
 ChartZoomPanBehavior zooming = new ChartZoomPanBehavior()
 {
-
-    ResetOnDoubleTap = true
-     
+    ResetOnDoubleTap = true    
 };
 
 chart.Behaviors.Add(zooming);
@@ -704,10 +602,7 @@ The [`ResetZooming`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chart
 
 ## See also
 
-[`How to improve performance while zooming by using scrollbar`](https://www.syncfusion.com/kb/5489/how-to-improve-performance-while-zooming-by-using-scrollbar)
-
-[`How to set default zoom/pan position for charts`](https://www.syncfusion.com/kb/2904/how-to-set-default-zoom-pan-position-for-charts)
-
-[`How to display the visible range of labels while zooming`](https://www.syncfusion.com/kb/2712/how-to-display-the-visible-range-of-labels-while-zooming )
-
-[`How to reset zooming `](https://www.syncfusion.com/kb/2562/how-to-reset-zooming)
+[`How to improve performance while zooming by using scrollbar?`](https://www.syncfusion.com/kb/5489/how-to-improve-performance-while-zooming-by-using-scrollbar)
+[`How to set default zoom/pan position for charts?`](https://www.syncfusion.com/kb/2904/how-to-set-default-zoom-pan-position-for-charts)
+[`How to display the visible range of labels while zooming?`](https://www.syncfusion.com/kb/2712/how-to-display-the-visible-range-of-labels-while-zooming )
+[`How to reset zooming?`](https://www.syncfusion.com/kb/2562/how-to-reset-zooming)
diff --git a/wpf/Charts/Legend.md b/wpf/Charts/Legend.md
index fedb26bc55..26cd32881a 100644
--- a/wpf/Charts/Legend.md
+++ b/wpf/Charts/Legend.md
@@ -18,9 +18,7 @@ You can define the legend using the following code example.
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-       <chart:ChartLegend />                                 
-
+    <chart:ChartLegend/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -28,7 +26,6 @@ You can define the legend using the following code example.
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.Legend = new ChartLegend();
 
 {% endhighlight %}
@@ -53,17 +50,16 @@ This can be customized using the [`LegendIcon`](https://help.syncfusion.com/cr/w
 
 {% highlight xaml %}
 
-<chart:SfChart.Legend>
-
-      <chart:ChartLegend/>
-
-</chart:ChartLegend>
+ <chart:SfChart.Legend>
+     <chart:ChartLegend/>
+ </chart:SfChart.Legend>
 
-<chart:SplineSeries XBindingPath="Year" Label="Gold"
-	                  
-                    ItemsSource="{Binding List}" YBindingPath="India"
-                     
-					LegendIcon="Diamond" />
+ <chart:SplineSeries 
+     XBindingPath="Year" 
+     Label="Gold"                    
+     ItemsSource="{Binding List}" 
+     YBindingPath="India"					
+     LegendIcon="Diamond"/>
 
 
 {% endhighlight %}
@@ -74,17 +70,11 @@ chart.Legend = new ChartLegend();
 
 SplineSeries splineSeries = new SplineSeries()
 {
-
     Label = "Gold",
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     LegendIcon = ChartLegendIcon.Diamond
-
 };
 
 chart.Series.Add(splineSeries);
@@ -113,26 +103,20 @@ The following code example illustrates the customization of legend icon.
 
 
 <chart:SfChart.Legend>
-
-    <chart:ChartLegend  IconHeight="10" IconWidth="10" 
-
-                        Margin="0,0,0,5"
-
-                        HorizontalAlignment="Center"
-
-                        VerticalAlignment="Center"                                    
-
-                        DockPosition="Top"
-
-                        BorderBrush="Black" BorderThickness="1"
-
-                        IconVisibility="Visible" CornerRadius="5" 
-
-                        ItemMargin="10">                   
-
+    <chart:ChartLegend  
+        IconHeight="10" 
+        IconWidth="10" 
+        Margin="0,0,0,5"
+        HorizontalAlignment="Center"
+        VerticalAlignment="Center"  
+        DockPosition="Top"
+        BorderBrush="Black" 
+        BorderThickness="1"
+        IconVisibility="Visible" 
+        CornerRadius="5"
+        ItemMargin="10">
     </chart:ChartLegend>
-
-</chart:SfChart.Legend>       
+</chart:SfChart.Legend>      
 
 
 {% endhighlight %}
@@ -141,29 +125,17 @@ The following code example illustrates the customization of legend icon.
 
 chart.Legend = new ChartLegend()
 {
-
     IconHeight = 10,
-
     IconWidth = 10,
-
     Margin = new Thickness(0, 0, 0, 5),
-
     HorizontalAlignment = HorizontalAlignment.Center,
-
     VerticalAlignment = VerticalAlignment.Center,
-
     DockPosition = ChartDock.Top,
-
     IconVisibility = Visibility.Visible,
-
     CornerRadius = new CornerRadius(5),
-
     ItemMargin = new Thickness(10),
-
     BorderThickness = new Thickness(1),
-
     BorderBrush = new SolidColorBrush(Colors.Black)
-
 };
 
 {% endhighlight %}
@@ -179,13 +151,8 @@ The visibility of the legend icon can be changed by setting [`IconVisibility`](h
 
 {% highlight xaml %}
 
-
 <chart:SfChart.Legend>
-
-   <chart:ChartLegend  IconHeight="8" IconWidth="8"  
-
-                       IconVisibility="Collapsed" />                                 
-
+    <chart:ChartLegend IconHeight="8" IconWidth="8" IconVisibility="Collapsed"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -194,13 +161,9 @@ The visibility of the legend icon can be changed by setting [`IconVisibility`](h
 
 chart.Legend = new ChartLegend()
 {
-
     IconHeight = 8,
-
     IconWidth = 8,
-
     IconVisibility = Visibility.Collapsed,
-
 };
 
 {% endhighlight %}
@@ -221,33 +184,27 @@ We can add custom icon for the legend using [`LegendIconTemplate`](https://help.
 <syncfusion:SfChart x:Name="chart">
 
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="iconTemplate">
-
-            <Ellipse Height="15" Width="15" Fill="White" 
-			                   
-                     Stroke="#4a4a4a" StrokeThickness="2"/>
-
+            <Ellipse 
+                Height="15" 
+                Width="15" 
+                Fill="White" 			                  
+                Stroke="#4a4a4a" 
+                StrokeThickness="2"/>
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Legend>
-
         <syncfusion:ChartLegend/>
+    </syncfusion:SfChart.Legend>
 
-     </syncfusion:SfChart.Legend>
-
-    <syncfusion:SplineSeries XBindingPath="Year"  Label="Gold" 
-  
-	                         ItemsSource="{Binding List}" 
-                                     
-                             YBindingPath="India" 
-                                     
-                             LegendIconTemplate="{StaticResource iconTemplate}">
-
+    <syncfusion:SplineSeries XBindingPath="Year"  
+        Label="Gold" 
+        ItemsSource="{Binding List}"                                      
+        YBindingPath="India"                                      
+        LegendIconTemplate="{StaticResource iconTemplate}">
     </syncfusion:SplineSeries>
-        
+
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -256,15 +213,10 @@ We can add custom icon for the legend using [`LegendIconTemplate`](https://help.
 
 SplineSeries series = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     LegendIconTemplate = chart.Resources["iconTemplate"] as DataTemplate
-
 };
 
 chart.Series.Add(series);
@@ -285,16 +237,14 @@ This allows us to specify the label for each series which is to be displayed in
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-    <chart:ChartLegend>
-
-    </chart:ChartLegend>
-
+    <chart:ChartLegend/>
 </chart:SfChart.Legend>
 
-<chart:SplineSeries XBindingPath="Year" Label="Spline"
-   
-	                  ItemsSource="{Binding List}" YBindingPath="India"/>
+<chart:SplineSeries 
+    XBindingPath="Year" 
+    Label="Spline" 	                  
+    ItemsSource="{Binding List}" 
+    YBindingPath="India"/>
 
 {% endhighlight %}
 
@@ -304,15 +254,10 @@ chart.Legend = new ChartLegend();
 
 SplineSeries splineSeries = new SplineSeries()
 {
-
     Label = "Spline",
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
 };
 
 chart.Series.Add(splineSeries);
@@ -335,9 +280,7 @@ We can enable it by using the [`CheckBoxVisibility`](https://help.syncfusion.com
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-        <chart:ChartLegend CheckBoxVisibility="Visible" />
-
+    <chart:ChartLegend CheckBoxVisibility="Visible"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -346,9 +289,7 @@ We can enable it by using the [`CheckBoxVisibility`](https://help.syncfusion.com
 
 chart.Legend = new ChartLegend()
 {
-
     CheckBoxVisibility = Visibility.Visible
-
 };
 
 {% endhighlight %}
@@ -374,9 +315,7 @@ We can enable the [`ToggleSeriesVisibility`](https://help.syncfusion.com/cr/wpf/
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-        <chart:ChartLegend ToggleSeriesVisibility="True" />
-
+    <chart:ChartLegend ToggleSeriesVisibility="True"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -385,9 +324,7 @@ We can enable the [`ToggleSeriesVisibility`](https://help.syncfusion.com/cr/wpf/
 
 chart.Legend = new ChartLegend()
 {
-
     ToggleSeriesVisibility = true
-
 };
 
 {% endhighlight %}
@@ -417,9 +354,7 @@ By default, it will be displayed outside and positioned at top (using [`DockPosi
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-     <chart:ChartLegend LegendPosition="Inside" />                                 
-
+    <chart:ChartLegend LegendPosition="Inside"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -428,9 +363,7 @@ By default, it will be displayed outside and positioned at top (using [`DockPosi
 
 chart.Legend = new ChartLegend()
 {
-
     LegendPosition = LegendPosition.Inside
-
 };
 
 {% endhighlight %}
@@ -452,9 +385,7 @@ To display the legend at the bottom, you can set the [`DockPosition`](https://he
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-    <chart:ChartLegend  DockPosition="Bottom"/>
-
+    <chart:ChartLegend DockPosition="Bottom"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -463,9 +394,7 @@ To display the legend at the bottom, you can set the [`DockPosition`](https://he
 
 chart.Legend = new ChartLegend()
 {
-
     DockPosition = ChartDock.Bottom
-
 };
 
 {% endhighlight %}
@@ -486,9 +415,9 @@ Offset specifies x or y distance from origin.
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-      <chart:ChartLegend  DockPosition="Floating" OffsetX="30" OffsetY="10"/>
-
+    <chart:ChartLegend  
+    DockPosition="Floating" 
+    OffsetX="30" OffsetY="10"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -497,13 +426,9 @@ Offset specifies x or y distance from origin.
 
 chart.Legend = new ChartLegend()
 {
-
     DockPosition = ChartDock.Floating,
-
     OffsetX = 30,
-
     OffsetY = 10
-
 };
 
 {% endhighlight %}
@@ -525,19 +450,15 @@ You can define the [`Header`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.X
 
 
 <chart:SfChart.Legend>
-
-      <chart:ChartLegend>
-
-          <chart:ChartLegend.Header>
-
-               <TextBlock Text="Medals" VerticalAlignment="Center"  
-
-                           HorizontalAlignment="Center" Margin="15"/>
-
-            </chart:ChartLegend.Header>
-
-     </chart:ChartLegend>
-
+    <chart:ChartLegend>
+        <chart:ChartLegend.Header>
+            <TextBlock 
+                Text="Medals" 
+                VerticalAlignment="Center" 
+                HorizontalAlignment="Center" 
+                Margin="15"/>
+        </chart:ChartLegend.Header>
+    </chart:ChartLegend>
 </chart:SfChart.Legend>
 
 
@@ -549,19 +470,13 @@ ChartLegend legend = new ChartLegend();
 
 TextBlock textBlock = new TextBlock()
 {
-
     Text = "Medals",
-
     HorizontalAlignment = HorizontalAlignment.Center,
-
     VerticalAlignment = VerticalAlignment.Center,
-
     Margin = new Thickness(15)
-
 };
 
 legend.Header = textBlock;
-
 chart.Legend = legend;
 
 {% endhighlight %}
@@ -582,35 +497,27 @@ The following code example shows how to create multiple legends in a single char
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-   <chart:ChartLegendCollection>
-
-       <chart:ChartLegend chart:SfChart.Column="0"/>
-
-       <chart:ChartLegend chart:SfChart.Column="1" />
-
+    <chart:ChartLegendCollection>
+        <chart:ChartLegend chart:SfChart.Column="0"/>
+        <chart:ChartLegend chart:SfChart.Column="1"/>
     </chart:ChartLegendCollection>
-
 </chart:SfChart.Legend>
 
-<chart:ColumnSeries Interior="#4a4a4a" Label="Legend1"
-
-                    ItemsSource="{Binding SneakersDetail}" XBindingPath="Brand" 
-					
-					          YBindingPath="ItemsCount1" />
-
-<chart:SplineSeries Label="Legend2" ItemsSource="{Binding SneakersDetail}"  
-
-                    XBindingPath="Brand" YBindingPath="ItemsCount" >
-
+<chart:ColumnSeries 
+    Interior="#4a4a4a" 
+    Label="Legend1"                    
+    ItemsSource="{Binding SneakersDetail}" 
+    XBindingPath="Brand"  
+    YBindingPath="ItemsCount1"/>
+
+<chart:SplineSeries 
+    Label="Legend2" 
+    ItemsSource="{Binding SneakersDetail}"                    
+    XBindingPath="Brand"
+    YBindingPath="ItemsCount">
     <chart:SplineSeries.XAxis>
-
-          <chart:CategoryAxis chart:SfChart.Column="1">
-
-          </chart:CategoryAxis>
-
-     </chart:SplineSeries.XAxis>
-
+        <chart:CategoryAxis chart:SfChart.Column="1"/>
+    </chart:SplineSeries.XAxis>
 </chart:SplineSeries>
 
 
@@ -621,15 +528,12 @@ The following code example shows how to create multiple legends in a single char
 ChartLegendCollection legendCollection = new ChartLegendCollection();
 
 ChartLegend legend1 = new ChartLegend();
-
 SfChart.SetColumn(legend1, 0);
 
 ChartLegend legend2 = new ChartLegend();
-
 SfChart.SetColumn(legend2, 1);
 
 legendCollection.Add(legend1);
-
 legendCollection.Add(legend2);
 
 chart.Legend = legendCollection;
@@ -637,38 +541,25 @@ chart.Legend = legendCollection;
 ColumnSeries columnSeries = new ColumnSeries()
 {
     Label = "Legend1",
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount1",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
-
 };
 
 CategoryAxis axis = new CategoryAxis();
-
 SfChart.SetColumn(axis, 1);
 
 SplineSeries splineSeries = new SplineSeries()
 {
-
     Label = "Legend1",
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount",
-
     XAxis = axis
-
 };
 
 chart.Series.Add(columnSeries);
-
 chart.Series.Add(splineSeries);
 
 {% endhighlight %}
@@ -689,14 +580,13 @@ The following code snippets explains how the legends displaying for accumulation
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-   <chart:ChartLegend />                                 
-
+    <chart:ChartLegend/>
 </chart:SfChart.Legend>
 
-<chart:PieSeries  XBindingPath="Category" 
-	
-	             ItemsSource="{Binding Tax}" YBindingPath="Percentage"/>
+<chart:PieSeries  
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}" 
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -706,13 +596,9 @@ chart.Legend = new ChartLegend();
 
 PieSeries pieSeries = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage"
-
 };
 
 chart.Series.Add(pieSeries);
@@ -736,28 +622,23 @@ property as shown in below example.
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-    <chart:ChartLegend>                  
-
-    </chart:ChartLegend>
-
+    <chart:ChartLegend/>
 </chart:SfChart.Legend>
 
-<chart:SplineSeries XBindingPath="Year" Label="Gold" 
-
-                    VisibilityOnLegend="Collapsed"
-
-                    ItemsSource="{Binding List}" YBindingPath="India">
-
+<chart:SplineSeries 
+    XBindingPath="Year" 
+    Label="Gold"                    
+    VisibilityOnLegend="Collapsed"
+    ItemsSource="{Binding List}" 
+    YBindingPath="India">
 </chart:SplineSeries>
 
-<chart:ColumnSeries XBindingPath="Year"
-
-                    VisibilityOnLegend="Visible"
-
-                    Label="Silver" YBindingPath="America"
-
-                    ItemsSource="{Binding List}" />   
+<chart:ColumnSeries 
+    XBindingPath="Year"                   
+    VisibilityOnLegend="Visible"
+    Label="Silver" 
+    YBindingPath="America"                   
+    ItemsSource="{Binding List}"/>
 
 
 {% endhighlight %}
@@ -768,36 +649,23 @@ chart.Legend = new ChartLegend();
 
 SplineSeries splineSeries = new SplineSeries()
 {
-
     Label = "Gold",
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     VisibilityOnLegend = Visibility.Collapsed
-
 };
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     Label = "Silver",
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "America",
-
     VisibilityOnLegend = Visibility.Visible
-
 };
 
 chart.Series.Add(splineSeries);
-
 chart.Series.Add(columnSeries);
 
 {% endhighlight %}
@@ -816,9 +684,7 @@ Orientation of the Legend can be vertical or horizontal. By default the [`Orient
 {% highlight xaml %}
 
 <chart:SfChart.Legend>
-
-   <chart:ChartLegend  Orientation="Vertical"/>
-
+   <chart:ChartLegend Orientation="Vertical"/>
 </chart:SfChart.Legend>
 
 {% endhighlight %}
@@ -827,9 +693,7 @@ Orientation of the Legend can be vertical or horizontal. By default the [`Orient
 
 chart.Legend = new ChartLegend()
 {
-
     Orientation = ChartOrientation.Vertical
-
 };
 
 {% endhighlight %}
@@ -849,48 +713,36 @@ You can customize each legend item using `ItemTemplate` property in ChartLegend
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
-     <syncfusion:SfChart.Resources>
-
-            <local:ImageConverter x:Key="imageConverter"/>
-
-            <DataTemplate x:Key="itemTemplate">
-
-                <Grid Margin="10,0,10,0" >
-
-                    <Grid.RowDefinitions>
-
-                        <RowDefinition/>
-
-                        <RowDefinition/>
-
-                    </Grid.RowDefinitions>
-
-                    <Image  Width="30" Height="15"
-                                        
-                            Source="{Binding Converter={StaticResource imageConverter}}"/>
-
-                    <TextBlock HorizontalAlignment="Center" FontSize="12"
-                                           
-                               Grid.Row="1" Foreground="Black" 
-                                           
-                               FontWeight="SemiBold" Text="{Binding Label}">
-
-                    </TextBlock>
-
-                </Grid>
-
-             </DataTemplate>
-
+<syncfusion:SfChart x:Name="chart">
+    <syncfusion:SfChart.Resources>
+        <local:ImageConverter x:Key="imageConverter"/>
+        <DataTemplate x:Key="itemTemplate">
+            <Grid Margin="10,0,10,0">
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+
+                <Image  
+                    Width="30" 
+                    Height="15" 
+                    Source="{Binding Converter={StaticResource imageConverter}}"/>
+
+                <TextBlock 
+                    HorizontalAlignment="Center" 
+                    FontSize="12"                               
+                    Grid.Row="1" 
+                    Foreground="Black"                                            
+                    FontWeight="SemiBold" 
+                    Text="{Binding Label}">
+                </TextBlock>
+            </Grid>
+        </DataTemplate>
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Legend>
-
-                <syncfusion:ChartLegend ItemTemplate="{StaticResource itemTemplate}"/>
-
+        <syncfusion:ChartLegend ItemTemplate="{StaticResource itemTemplate}"/>
     </syncfusion:SfChart.Legend>
-
 </syncfusion:SfChart>
 
 {% endhighlight %}
@@ -901,39 +753,25 @@ SfChart chart = new SfChart();
 
 chart.Legend = new ChartLegend()
 {
+    ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate
+}; 
 
-   ItemTemplate = chart.Resources["itemTemplate"] as DataTemplate
-
-};
-
-public class ImageConverter:IValueConverter
-
+public class ImageConverter : IValueConverter
 {
-
- public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
-  {
-
-   LegendItem item = value as LegendItem;
-
-   if (item.Label == "Gold")
-
-     return new BitmapImage(new Uri(("gold_symb.png"),UriKind.RelativeOrAbsolute));
-
-   else
-
-    return new BitmapImage(new Uri(("silver_symb.png"), UriKind.RelativeOrAbsolute));
-
-  }
-
-  public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
-
-  {
-
-    return value;
-
-  }
-
+    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+    {
+        LegendItem item = value as LegendItem;
+
+        if (item.Label == "Gold")
+            return new BitmapImage(new Uri(("gold_symb.png"), UriKind.RelativeOrAbsolute));
+        else
+            return new BitmapImage(new Uri(("silver_symb.png"), UriKind.RelativeOrAbsolute));
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+    {
+        return value;
+    }
 }
 
 
@@ -953,24 +791,16 @@ When there is more number of legends, the legend exceeds the chart will be cropp
 {% highlight xaml %}
 
 <syncfusion:SfChart x:Name="chart">
-
     <syncfusion:SfChart.Resources>
-
         <ItemsPanelTemplate x:Key="itemPanelTemplate">
-
-             <WrapPanel/>
-
+            <WrapPanel/>
         </ItemsPanelTemplate>
-                
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.Legend>
-
-            <syncfusion:ChartLegend ItemsPanel="{StaticResource itemPanelTemplate}"/>
-
+        <syncfusion:ChartLegend ItemsPanel="{StaticResource itemPanelTemplate}"/>
     </syncfusion:SfChart.Legend>
-
- </syncfusion:SfChart>
+</syncfusion:SfChart>
 
 {% endhighlight %}
 
@@ -980,9 +810,7 @@ SfChart chart = new SfChart();
 
 chart.Legend = new ChartLegend()
 {
-
     ItemsPanel = chart.Resources["itemPanelTemplate"] as ItemsPanelTemplate
-
 };
 
 {% endhighlight %}
@@ -998,19 +826,16 @@ The legend item is not showing because the chart view is running in the backgrou
 {% highlight c# %}
 
 ChartWindow chartWindow = new ChartWindow();
-
 chartWindow.DataContext = measurementChart;
-
 chartWindow.Content = new AutoChart();
-
 chartWindow.Content = new SfChart()
 {    
-	. . .
+s    . . .
 }
 
 Action action = chartWindow.Show;
 
-Application.Current.Dispatcher.BeginInvoke(action, Array.Empty<object>()); 
+Application.Current.Dispatcher.BeginInvoke(action, Array.Empty<object>());
 
 {% endhighlight %}
 
@@ -1018,24 +843,14 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to customize the legend Icon based on series appearance in WPF Chart`](https://support.syncfusion.com/kb/article/10172/how-to-customize-the-legend-icon-based-on-series-appearance-in-wpf-chart)
-
-[`How to achieve the draggable legend in WPF Chart`](https://support.syncfusion.com/kb/article/9860/how-to-achieve-the-draggable-legend-in-wpf-chart-sfchart)
-
-[`How to wrap the text in the WPF Chart legend`](https://support.syncfusion.com/kb/article/9626/how-to-wrap-the-text-in-the-wpf-chart-legend)
-
-[`How to control the visibility of all series with a single legend item in WPF Chart`](https://support.syncfusion.com/kb/article/9625/how-to-control-the-visibility-of-all-series-with-a-single-legend-item-in-wpf-charts)
-
-[`How to create custom legend items in WPF Chart`](https://support.syncfusion.com/kb/article/9200/how-to-create-custom-legend-items-in-wpf-chart)
-
-[`How to get a notification when the legend items are clicked in WPF Chart`](https://support.syncfusion.com/kb/article/8940/how-to-get-a-notification-when-the-legend-items-are-clicked-in-wpf-chart)
-
-[`How to add multiple legend items in scroll viewer`](https://support.syncfusion.com/kb/article/4571/how-to-add-multiple-legend-items-in-scroll-viewer-of-wpf-chart-sfchart)
-
-[`How to format the legend text`](https://support.syncfusion.com/kb/article/4475/how-to-format-the-legend-text-in-wpf-chart-sfchart)
-
-[`How to set or modify the label of the each legend`](https://support.syncfusion.com/kb/article/4477/how-to-change-the-label-of-each-legend-in-wpf-chart-sfchart)
-
-[`How to customize the legends position`](https://support.syncfusion.com/kb/article/4478/how-to-customize-the-legends-position-of-wpf-chart-sfchart)
-
-[`How to customize the icons of the legends in Chart`](https://support.syncfusion.com/kb/article/3937/how-to-customize-the-icons-of-legends-in-wpf-chart-sfchart)
+[`How to customize the legend Icon based on series appearance in WPF Chart?`](https://support.syncfusion.com/kb/article/10172/how-to-customize-the-legend-icon-based-on-series-appearance-in-wpf-chart)
+[`How to achieve the draggable legend in WPF Chart?`](https://support.syncfusion.com/kb/article/9860/how-to-achieve-the-draggable-legend-in-wpf-chart-sfchart)
+[`How to wrap the text in the WPF Chart legend?`](https://support.syncfusion.com/kb/article/9626/how-to-wrap-the-text-in-the-wpf-chart-legend)
+[`How to control the visibility of all series with a single legend item in WPF Chart?`](https://support.syncfusion.com/kb/article/9625/how-to-control-the-visibility-of-all-series-with-a-single-legend-item-in-wpf-charts)
+[`How to create custom legend items in WPF Chart?`](https://support.syncfusion.com/kb/article/9200/how-to-create-custom-legend-items-in-wpf-chart)
+[`How to get a notification when the legend items are clicked in WPF Chart?`](https://support.syncfusion.com/kb/article/8940/how-to-get-a-notification-when-the-legend-items-are-clicked-in-wpf-chart)
+[`How to add multiple legend items in scroll viewer?`](https://support.syncfusion.com/kb/article/4571/how-to-add-multiple-legend-items-in-scroll-viewer-of-wpf-chart-sfchart)
+[`How to format the legend text?`](https://support.syncfusion.com/kb/article/4475/how-to-format-the-legend-text-in-wpf-chart-sfchart)
+[`How to set or modify the label of the each legend?`](https://support.syncfusion.com/kb/article/4477/how-to-change-the-label-of-each-legend-in-wpf-chart-sfchart)
+[`How to customize the legends position?`](https://support.syncfusion.com/kb/article/4478/how-to-customize-the-legends-position-of-wpf-chart-sfchart)
+[`How to customize the icons of the legends in Chart?`](https://support.syncfusion.com/kb/article/3937/how-to-customize-the-icons-of-legends-in-wpf-chart-sfchart)
\ No newline at end of file
diff --git a/wpf/Charts/Migrating-from-Chart-to-SfChart.md b/wpf/Charts/Migrating-from-Chart-to-SfChart.md
index d8a55c395f..8f56c7446f 100644
--- a/wpf/Charts/Migrating-from-Chart-to-SfChart.md
+++ b/wpf/Charts/Migrating-from-Chart-to-SfChart.md
@@ -51,9 +51,11 @@ Following code example illustrates the initialization of Chart with ChartArea,
 {% highlight xaml %}
 
 <syncfusion:Chart>
-
-<syncfusion:ChartArea BorderBrush="Green"  BorderThickness="5" Background="Gray" SideBySideSeriesPlacement="True"  />
-
+    <syncfusion:ChartArea 
+        BorderBrush="Green"  
+        BorderThickness="5" 
+        Background="Gray" 
+        SideBySideSeriesPlacement="True"/>
 </syncfusion:Chart>
 
 {% endhighlight %}
@@ -65,14 +67,11 @@ Chart chart = new Chart();
 ChartArea area = new ChartArea();
 
 area.Background = Brushes.Gray;
-
 area.BorderBrush = Brushes.Red;
-
 area.BorderThickness = new Thickness(5);
-
 area.SideBySideSeriesPlacement = true;
 
-chart.Areas.Add(area);.
+chart.Areas.Add(area);
 
 {% endhighlight %}
 
@@ -81,7 +80,14 @@ Following code example illustrates the initialization of SfChart that is equival
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart Header="ChartArea" AreaBackground="Red" AreaBorderBrush="Gray" AreaBorderThickness="5" SideBySideSeriesPlacement="True"  />
+<syncfusion:SfChart 
+    Header="ChartArea" 
+    AreaBackground="Red" 
+    AreaBorderBrush="Gray" 
+    AreaBorderThickness="5" 
+    SideBySideSeriesPlacement="True">
+</syncfusion:SfChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -89,11 +95,8 @@ Following code example illustrates the initialization of SfChart that is equival
 SfChart chart = new SfChart();
 
 chart.AreaBackground = Brushes.Gray;
-
 chart.AreaBorderBrush = Brushes.Red;
-
 chart.AreaBorderThickness = new Thickness(5);
-
 chart.SideBySideSeriesPlacement = true;
 
 {% endhighlight %}
@@ -203,14 +206,16 @@ The following code example illustrates the usage of Legend in Chart and SfChart.
 {% highlight xaml %}
 
 <syncfusion:ChartArea>
-
-  <syncfusion:ChartArea.Legend>
-
- <syncfusion:ChartLegend syncfusion:Chart.Dock="Floating" Orientation="Vertical"  OffsetX="200" OffsetY="200" ItemTemplate="{StaticResourcelegend}" CheckBoxVisibility="Collapsed"/>
-
-  </syncfusion:ChartArea.Legend>
-
+    <syncfusion:ChartArea.Legend>
+        <syncfusion:ChartLegend 
+            syncfusion:Chart.Dock="Floating" 
+            Orientation="Vertical"  
+            OffsetX="200" OffsetY="200" 
+            ItemTemplate="{StaticResourcelegend}" 
+            CheckBoxVisibility="Collapsed"/>
+    </syncfusion:ChartArea.Legend>
 </syncfusion:ChartArea>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -219,20 +224,17 @@ The following code example illustrates the usage of Legend in Chart and SfChart.
 ChartArea area = new ChartArea();
 
 ChartLegend legend = new ChartLegend();
-
 Chart.SetDock(legend, ChartDock.Floating);
 
 legend.Orientation = Orientation.Vertical;
-
 legend.OffsetX = 200d;
-
 legend.OffsetY = 200d;
-
 legend.CheckBoxVisibility = Visibility.Visible;
 
 area.Legend = legend;
 
 chart.Areas.Add(area)
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -242,14 +244,19 @@ chart.Areas.Add(area)
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-<syncfusion:SfChart.Legend>
-
-<syncfusion:ChartLegend  ItemTemplate="{StaticResource legend}"CheckBoxVisibility="Visible" LegendPosition="Outside"  Orientation="Vertical"OffsetY="200" OffsetX="200"   DockPosition="Floating"/>
-
-</syncfusion:SfChart.Legend>
-
+    <syncfusion:SfChart.Legend>
+        <syncfusion:ChartLegend  
+            ItemTemplate="{StaticResource legend}"
+            CheckBoxVisibility="Visible" 
+            LegendPosition="Outside"  
+            Orientation="Vertical"
+            OffsetY="200" 
+            OffsetX="200"   
+            DockPosition="Floating">
+        </syncfusion:ChartLegend>
+    </syncfusion:SfChart.Legend>
 </syncfusion:SfChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -259,22 +266,15 @@ SfChart chart = new SfChart();
 ChartLegend legend = new ChartLegend();
 
 legend.ItemTemplate = grid.Resources["legend"] as DataTemplate;
-
 legend.CheckBoxVisibility = Visibility.Visible;
-
 legend.OffsetX = 200d;
-
 legend.OffsetY = 200d;
-
 legend.Orientation = ChartOrientation.Vertical;
-
 legend.DockPosition = ChartDock.Top; 
-
 legend.LegendPosition = LegendPosition.Outside;
 
-
-
 chart.Legend = legend;
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -356,20 +356,18 @@ The class design for Axis is different for both ChartArea and SfChart. In ChartA
 {% highlight xaml %}
 
 <syncfusion:ChartArea.PrimaryAxis>
-
-<syncfusion:ChartAxis  ValueType="DateTime"  />
-
+    <syncfusion:ChartAxis ValueType="DateTime"/>
 </syncfusion:ChartArea.PrimaryAxis>
+
 {% endhighlight %} 
 In SfChart, Axis can be an instance of NumericalAxis, DateTimeAxis, CategoryAxis, LogarithmicAxis, TimeSpanAxis or DateTimeCategoryAxis. Class name represents the type of data it can plot. For example, NumericalAxis can plot numeric values and DateTimeAxis can plot DateTime values. Following code example illustrates this,
 
 {% highlight xaml %}
 
 <syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:DateTimeAxis Header="X-Axis"/>
-
+    <syncfusion:DateTimeAxis Header="X-Axis"/>
 </syncfusion:SfChart.PrimaryAxis>
+
 {% endhighlight %}
 The following table compares the APIs,
 
@@ -537,41 +535,35 @@ Gets or sets the zoom position value.</td></tr>
 {% highlight xaml %}
 
 <chart:ChartArea>
-
-<chart:Chart.PrimaryAxis>
-
-<chart:ChartAxis  ValueType="DateTime"  IntersectAction="Hide" 
-
-IsAutoSetRange="False" DateTimeRange="2010/01/01,2011/01/01" 
-
-SmallTickSize="6" SmallTicksPerInterval="5" 
-
-TickLinesPosition="Outside" TickSize="10" 
-
-LabelsSource="{Binding power}" ContentPath="Content" 
-
-PositionPath="Position" 
-
-LabelsPostfix="{StaticResource postLabel}" 
-
-LabelsPrefix="{StaticResource preLabel}" 
-
-DesiredIntervalsCount="5"  
-
-LabelDateTimeFormat="MM:dd:yy" RangePadding="Normal"  
-
-LabelPosition="Outside" Header="X-Axis" 
-
-EdgeLabelsDrawingMode="Center"   IsInversed="False" 
-
-LabelRotateAngle="0" AxisVisibility="Visible" 
-
-EnableAutoIntervalOnZooming="False"  ZoomFactor="1" 
-
-ZoomPosition="1" chart:ChartArea.ShowGridLines="True" />
-
-</chart:Chart.PrimaryAxis>
-
+    <chart:ChartArea.PrimaryAxis>
+        <chart:ChartAxis
+            ValueType="DateTime"
+            IntersectAction="Hide"
+            IsAutoSetRange="False"
+            DateTimeRange="2010/01/01,2011/01/01"
+            SmallTickSize="6"
+            SmallTicksPerInterval="5"
+            TickLinesPosition="Outside"
+            TickSize="10"
+            LabelsSource="{Binding power}"
+            ContentPath="Content"
+            PositionPath="Position"
+            LabelsPostfix="{StaticResource postLabel}"
+            LabelsPrefix="{StaticResource preLabel}"
+            DesiredIntervalsCount="5"
+            LabelDateTimeFormat="MM:dd:yy"
+            RangePadding="Normal"
+            LabelPosition="Outside"
+            Header="X-Axis"
+            EdgeLabelsDrawingMode="Center"
+            IsInversed="False"
+            LabelRotateAngle="0"
+            AxisVisibility="Visible"
+            EnableAutoIntervalOnZooming="False"
+            ZoomFactor="1"
+            ZoomPosition="1"
+            chart:ChartArea.ShowGridLines="True"/>
+        </chart:Chart.PrimaryAxis>
 </chart:ChartArea>
 
 {% endhighlight %}
@@ -583,58 +575,38 @@ ChartArea area = new ChartArea();
 ChartAxis primaryAxis = new ChartAxis();
 
 primaryAxis.ValueType = ChartValueType.DateTime;
-
-primaryAxis.LabelDateTimeFormat = "MM:dd:yy";
-
-primaryAxis.LabelPosition = LabelPositions.Outside;
-
-primaryAxis.AxisVisibility = Visibility.Visible;
-
-primaryAxis.Header = "X-Axis";
-
-primaryAxis.RangePadding = ChartRangePaddingType.Normal;
-
-primaryAxis.TickLinesPosition = AxisPositions.Outside;
-
-primaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center;
-
-primaryAxis.IsInversed = false;
-
+primaryAxis.IntersectAction = ChartLabelIntersectAction.Hide;
 primaryAxis.IsAutoSetRange = false;
 
-primaryAxis.DateTimeRange = new DateTimeRange(new DateTime(2010, 01, 01), new DateTime(2011, 01, 01));
-
-primaryAxis.DateTimeInterval = new TimeSpan(24, 0, 0);
-
-primaryAxis.DesiredIntervalsCount = 5;
-
-primaryAxis.TickLinesPosition = AxisPositions.Outside;
-
-primaryAxis.TickSize = 10d;
+primaryAxis.DateTimeRange = new DateTimeRange(
+   new DateTime(2010, 01, 01),
+   new DateTime(2011, 01, 01)
+);
 
 primaryAxis.SmallTickSize = 6d;
-
 primaryAxis.SmallTicksPerInterval = 5;
-
-primaryAxis.IntersectAction = ChartLabelIntersectAction.Hide;
-
-ChartArea.SetShowGridLines(primaryAxis, true);
+primaryAxis.TickLinesPosition = AxisPositions.Outside;
+primaryAxis.TickSize = 10d;
 
 primaryAxis.LabelsSource = viewmodel.power;
-
 primaryAxis.ContentPath = "Content";
-
 primaryAxis.PositionPath = "Position";
 
-primaryAxis.ShowGridline= true;
+primaryAxis.DesiredIntervalsCount = 5;
+primaryAxis.LabelDateTimeFormat = "MM:dd:yy";
+primaryAxis.RangePadding = ChartRangePaddingType.Normal;
+primaryAxis.LabelPosition = LabelPositions.Outside;
+primaryAxis.Header = "X-Axis";
+primaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center;
+primaryAxis.IsInversed = false;
 
-primaryAxis.OpposedPosition = true;
+primaryAxis.AxisVisibility = Visibility.Visible;
 
 primaryAxis.ZoomFactor = 1d;
-
 primaryAxis.ZoomPosition = 0d;
 
-
+ChartArea.SetShowGridLines(primaryAxis, true);
+primaryAxis.ShowGridline = true;
 
 area.PrimaryAxis = primaryAxis;
 
@@ -647,115 +619,82 @@ area.PrimaryAxis = primaryAxis;
 {% highlight xaml %}
 
 <sfchart:SfChart>
-
-<sfchart:SfChart.PrimaryAxis>
-
-<sfchart:DateTimeAxis Header="X-Axis" OpposedPosition="True" 
-
-RangePadding="Auto" 
-
-DesiredIntervalsCount="5"  IsInversed="False" 
-
-LabelFormat="MM/dd/yy" RangePadding="Auto" 
-
-Interval="1"  Minimum="2010/01/01" Maximum="2011/01/10" 
-
-IntervalType="Years" LabelsPosition="Outside" 
-
-LabelsIntersectAction="Hide"  TickLinesPosition="Outside" 
-
-Visibility="Visible" EnableScrollBar="False" 
-
-EdgeLabelsDrawingMode="Center" 
-
-EnableAutoIntervalOnZooming="True"  
-
-ShowTrackBallInfo="True" PlotOffset="20" 
-
-LabelsSource="{Binding power}" ShowGridline="True" 
-
-ContentPath="Content" PositionPath="Postion" 
-
-PostfixLabelTemplate="{StaticResource postLabel}" 
-
-PrefixLabelTemplate="{StaticResource preLabel}" 
-
-SmallTickLinesPosition="Outside" SmallTicksPerInterval="5" 
-
-TickLineSize="6" ZoomFactor="1" ZoomPosition="0"/>
-
-<sfchart:SfChart.PrimaryAxis/>
-
+   <sfchart:SfChart.PrimaryAxis>
+      <sfchart:DateTimeAxis 
+            Header="X-Axis" 
+            OpposedPosition="True" 
+            RangePadding="Auto" 
+            DesiredIntervalsCount="5"  
+            IsInversed="False" 
+            LabelFormat="MM/dd/yy" 
+            RangePadding="Auto" 
+            Interval="1"  
+            Minimum="2010/01/01"
+            Maximum="2011/01/10" 
+            IntervalType="Years" 
+            LabelsPosition="Outside" 
+            LabelsIntersectAction="Hide"  
+            TickLinesPosition="Outside" 
+            Visibility="Visible" 
+            EnableScrollBar="False" 
+            EdgeLabelsDrawingMode="Center" 
+            EnableAutoIntervalOnZooming="True"  
+            ShowTrackBallInfo="True" 
+            PlotOffset="20" 
+            LabelsSource="{Binding power}" 
+            ShowGridLines="True" 
+            ContentPath="Content" 
+            PositionPath="Postion" 
+            PostfixLabelTemplate="{StaticResource postLabel}" 
+            PrefixLabelTemplate="{StaticResource preLabel}" 
+            SmallTickLinesPosition="Outside" 
+            SmallTicksPerInterval="5" 
+            TickLineSize="6" ZoomFactor="1" 
+            ZoomPosition="0"/>
+   </sfchart:SfChart.PrimaryAxis>
 </sfchart:SfChart>
 
 {% endhighlight %}
 
 {% highlight C# %}
+
 SfChart chart = new SfChart();
 
 DateTimeAxis primaryAxis = new DateTimeAxis();
 
 primaryAxis.Interval = 1;
-
 primaryAxis.LabelFormat = "MM/dd/yy";
-
 primaryAxis.IntervalType = DateTimeIntervalType.Years;
-
 primaryAxis.IsInversed = false;
-
 primaryAxis.LabelsPosition = AxisElementPosition.Outside;
-
 primaryAxis.LabelsIntersectAction = AxisLabelsIntersectAction.Hide;
-
 primaryAxis.TickLinesPosition = AxisElementPosition.Outside;
-
 primaryAxis.Visibility = Visibility.Visible;
-
 primaryAxis.EnableScrollBar = false;
-
 primaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center;
-
 primaryAxis.RangePadding = DateTimeRangePadding.Auto;
-
-primaryAxis.PlotOffset = 10d;
-
-primaryAxis.Header = "X-Axis";
-
+primaryAxis.PlotOffset = 10d;            
+primaryAxis.Header = "X-Axis";          
 primaryAxis.ShowTrackBallInfo = true;
-
 primaryAxis.DesiredIntervalsCount = 5;
-
 primaryAxis.OpposedPosition = true;
-
 primaryAxis.SmallTickLineSize = 6d;
-
 primaryAxis.SmallTickLinesPosition = AxisElementPosition.Outside;
-
 primaryAxis.SmallTicksPerInterval = 5;
-
 primaryAxis.TickLineSize = 10d;
-
 primaryAxis.TickLinesPosition = AxisElementPosition.Outside;
-
 primaryAxis.LabelsSource = viewmodel.power;
-
 primaryAxis.ContentPath = "Content";
-
 primaryAxis.PositionPath = "Position";
-
-primaryAxis.ShowGridline= true;
-
+primaryAxis.ShowGridLines = true;
 primaryAxis.OpposedPosition = true;
-
 primaryAxis.Minimum = new DateTime(2011, 1, 1);
-
 primaryAxis.Maximum = new DateTime(2012, 1, 1);
-
 primaryAxis.ZoomFactor = 1d;
-
 primaryAxis.ZoomPosition = 0d;
 
 chart.PrimaryAxis = primaryAxis;
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -767,17 +706,11 @@ Following code example illustrates how to customize gridlines.
 {% highlight xaml %}
 
 <chart:ChartArea.GridLineStroke>
-
-<Pen Brush="#c6c6c6" >
-
-<Pen.DashStyle>
-
-<DashStyle Dashes="1,3"/>
-
-</Pen.DashStyle>
-
-</Pen>
-
+    <Pen Brush="#c6c6c6">
+        <Pen.DashStyle>
+            <DashStyle Dashes="1,3"/>
+        </Pen.DashStyle>
+    </Pen>
 </chart:ChartArea.GridLineStroke>
 
 {% endhighlight %}
@@ -786,13 +719,16 @@ Following code example illustrates how to customize gridlines.
 
 Pen pen = new Pen();
 
-DashStyle style = new DashStyle() { Dashes = new DoubleCollection(3) };
+DashStyle style = new DashStyle() 
+{ 
+    Dashes = new DoubleCollection(3) 
+};
 
 pen.DashStyle = style;
-
 pen.Brush = Brushes.Red;
 
 ChartArea.SetGridLineStroke(primaryAxis, pen);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -802,27 +738,35 @@ ChartArea.SetGridLineStroke(primaryAxis, pen);
 {% highlight xaml %}
 
 <sfchart:NumericalAxis.MajorGridLineStyle>
-
-<Style TargetType="Line">
-
-<Setter Property="StrokeDashArray" Value="1,3"></Setter>
-
-<Setter Property="Stroke" Value="#c6c6c6" />
-
-</Style>
-
+    <Style TargetType="Line">
+        <Setter Property="StrokeDashArray" Value="1,3"/>
+        <Setter Property="Stroke" Value= "#c6c6c6"/>
+    </Style>
 </sfchart:NumericalAxis.MajorGridLineStyle>
+
 {% endhighlight %}
 
 
 {% highlight C# %}
+
 Style lineStyle = new Style(typeof(Line));
 
-lineStyle.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection(3)));
+lineStyle.Setters.Add(
+   new Setter(
+      Line.StrokeDashArrayProperty,
+      new DoubleCollection() { 1, 3 }
+   )
+);
 
-lineStyle.Setters.Add(new Setter(Line.StrokeProperty, Brushes.Red));
+lineStyle.Setters.Add(
+   new Setter(
+      Line.StrokeProperty,
+      Brushes.Red
+   )
+);
 
 primaryAxis.MajorGridLineStyle = lineStyle;
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -835,50 +779,44 @@ Like Axis, ChartSeries architecture is also different for Chart and SfChart. Ins
 {% highlight xaml %}
 
 <syncfusion:ChartArea>
-
-<syncfusion:ChartSeries Type="Line"  ShowToolTip="True" 
-
-Interior="Blue" ShowSmartLabels="True"
-
-LegendIcon="Diamond"
-
-AdornmentIntersectAction="AdjustAroundPoints"
-
-ColorEach="True" Palette="Metro"
-
-StrokePalette="Metro" IsRotated="False"
-
-IsIndexed="True" IsVisibleOnLegend="True"
-
-IsSortData="False" SortBy="X"
-
-SortDirection="Ascending"
-
-ShowDataLabels="True"  EnableEffects="True" 
-
-IsVisible="True"  StrokeThickness="3"
-
-EnableAnimation="True" AnimateOption="Fade"
-
-AnimateOneByOne="True" ShowEmptyPoints="True" 
-
-EmptyPointInterior="Purple" EmptyPointValue="Average"
-
-EmptyPointStyle="Interior" DataSource="{Binding power}"
-
-BindingPathX="Year" BindingPathsY="Sports"
-
-Label="LineSeries" >
-
-<syncfusion:ChartSeries.YAxis>
-
-<syncfusion:ChartAxis IsAutoSetRange="False" Range="20,50"/>
-
-</syncfusion:ChartSeries.YAxis>
-
-</syncfusion:ChartSeries>
-
+   <syncfusion:ChartSeries
+      Type="Line"
+      ShowToolTip="True"
+      Interior="Blue"
+      ShowSmartLabels="True"
+      LegendIcon="Diamond"
+      AdornmentIntersectAction="AdjustAroundPoints"
+      ColorEach="True"
+      Palette="Metro"
+      StrokePalette="Metro"
+      IsRotated="False"
+      IsIndexed="True"
+      IsVisibleOnLegend="True"
+      IsSortData="False"
+      SortBy="X"
+      SortDirection="Ascending"
+      ShowDataLabels="True"
+      EnableEffects="True"
+      IsVisible="True"
+      StrokeThickness="3"
+      EnableAnimation="True"
+      AnimateOption="Fade"
+      AnimateOneByOne="True"
+      ShowEmptyPoints="True"
+      EmptyPointInterior="Purple"
+      EmptyPointValue="Average"
+      EmptyPointStyle="Interior"
+      DataSource="{Binding power}"
+      BindingPathX="Year"
+      BindingPathsY="Sports"
+      Label="LineSeries">
+
+      <syncfusion:ChartSeries.YAxis>
+         <syncfusion:ChartAxis IsAutoSetRange="False" Range="20,50"/>
+      </syncfusion:ChartSeries.YAxis>
+   </syncfusion:ChartSeries>
 </syncfusion:ChartArea>
+
 {% endhighlight %}
 
 
@@ -889,40 +827,25 @@ ChartArea area = new ChartArea();
 ChartSeries lineseries = new ChartSeries();
 
 lineseries.BindingPathX = "Year";
-
-lineseries.Label = "ColumnSeries";
-
+lineseries.Label = "LineSeries";
 lineseries.BindingPathsY = new string[] { "Sports" };
-
 lineseries.DataSource = viewmodel.power;
-
 lineseries.ShowToolTip = true;
-
 lineseries.ShowEmptyPoints = true;
-
 lineseries.EmptyPointValue = EmptyPointValue.Average;
-
 lineseries.EmptyPointStyle = EmptyPointStyle.Interior;
-
 lineseries.EmptyPointInterior = Brushes.Purple;
-
 lineseries.EnableAnimation = true;
-
 lineseries.IsSortData = true;
-
 lineseries.IsRotated = true;
-
 lineseries.IsVisible = true;
-
 lineseries.SortBy = SortingAxis.X;
-
 lineseries.SortDirection = Direction.Ascending;
-
 lineseries.YAxis = new ChartSeries() { IsAutosetRange = false, Range = new DoubleRange(20,50) };
-
 lineseries.ShowSmartLabels = true;
 
 area.Series.Add(lineseries);
+
 {% endhighlight %}
 
 
@@ -933,37 +856,36 @@ area.Series.Add(lineseries);
 
 <syncfusion:SfChart>
 
-<syncfusion:LineSeries ItemsSource="{Binding power}"
-
-XBindingPath="Year" YBindingPath="Sports"
-
-Palette="Metro" AnimationDuration="00:00:03"
-
-SortBy="X" SortDirection="Ascending" 
-
-EnableSegmentDragging="True" LegendIcon="Diamond"
-
-VisibilityOnLegend="Visible"  Label="LineSeries"
-
-IsSeriesVisible="True" IsSortData="True"
-
-IsTransposed="True" EnableAnimation="True"
-
-ShowTooltip="True" StrokeThickness="3"
-
-ShowEmptyPoints="True" EmptyPointValue="Average"
-
-EmptyPointInterior="Purple" EmptyPointStyle="Interior"
-
-<syncfusion:LineSeries.YAxis>
-
-<syncfusion:NumericalAxis  Minimum="20" Maximum="50"/>
-
-</syncfusion:LineSeries.YAxis>
-
-</syncfusion:LineSeries>
+   <syncfusion:LineSeries
+      ItemsSource="{Binding power}"
+      XBindingPath="Year"
+      YBindingPath="Sports"
+      Palette="Metro"
+      AnimationDuration="00:00:03"
+      SortBy="X"
+      SortDirection="Ascending"
+      EnableSegmentDragging="True"
+      LegendIcon="Diamond"
+      VisibilityOnLegend="Visible"
+      Label="LineSeries"
+      IsSeriesVisible="True"
+      IsSortData="True"
+      IsTransposed="True"
+      EnableAnimation="True"
+      ShowTooltip="True"
+      StrokeThickness="3"
+      ShowEmptyPoints="True"
+      EmptyPointValue="Average"
+      EmptyPointInterior="Purple"
+      EmptyPointStyle="Interior">
+
+      <syncfusion:LineSeries.YAxis>
+         <syncfusion:NumericalAxis Minimum="20" Maximum="50"/>
+      </syncfusion:LineSeries.YAxis>
+   </syncfusion:LineSeries>
 
 </syncfusion:SfChart>
+
 {% endhighlight %}
  
 {% highlight C# %}
@@ -973,41 +895,23 @@ SfChart chart = new Sfchart();
 LineSeries lineseries = new LineSeries();
 
 lineseries.ItemsSource = viewmodel.power;
-
 lineseries.XBindingPath = "Year";
-
 lineseries.YBindingPath = "Sports";
-
 lineseries.Label = "LineSeries";
-
 lineseries.Interior = Brushes.Brown;
-
 lineseries.ShowTooltip = true;
-
 lineseries.ShowEmptyPoints = true;
-
 lineseries.EmptyPointInterior = Brushes.Purple;
-
 lineseries.EmptyPointStyle = EmptyPointStyle.Interior;
-
 lineseries.EmptyPointValue = EmptyPointValue.Average;
-
 lineseries.StrokeThickness = 3;
-
 lineseries.EnableAnimation = true;
-
 lineseries.AnimationDuration = new TimeSpan(00, 00, 03);
-
 lineseries.IsSeriesVisible = true;
-
 lineseries.IsSortData = true;
-
 lineseries.IsTransposed = true;
-
 lineseries.SortBy = SortingAxis.X;
-
 lineseries.YAxis = new NumericalAxis() { Minimum = 20, Maximum = 50 };
-
 lineseries.SortDirection = Direction.Ascending;
 
 chart.Series.Add(lineseries);
@@ -1164,55 +1068,40 @@ The Adornments are same as Chart and you can define the Adornments inside the Se
 {% highlight xaml %}
 
 <syncfusion:ChartSeries>
+   <syncfusion:ChartSeries.ChartAdornmentInfo>
+      <syncfusion:ChartAdornmentInfo
+         SegmentLabelContent="YValue"
+         SegmentShowLine="True"
+         Visible="True"
+         Symbol="Ellipse"
+         SymbolInterior="Red"
+         SymbolStroke="Red"
+         SymbolHeight="15"
+         SymbolWidth="15"
+         SegmentLabelRotation="20"
+         AdornmentsPosition="Top"/>
+   </syncfusion:ChartSeries.ChartAdornmentInfo>
+</syncfusion:ChartSeries>
 
-<syncfusion:ChartSeries.ChartAdornmentInfo >
-
-<syncfusion:ChartAdornmentInfo  SegmentLabelContent="YValue"
-
-SegmentShowLine="True"  Visible="True"
+{% endhighlight %}
 
-SymbolInterior="Red"
 
-AdornmentsPosition="Top" Symbol="Ellipse"
+{% highlight C# %}
 
-SegmentLabelRotation="20" 
+ChartSeries lineseries = new ChartSeries();
 
-SymbolStroke="Red" SymbolHeight="15"
-
-SymbolWidth="15" />
-
-<syncfusion:ChartSeries.ChartAdornmentInfo />
-
-</syncfusion:ChartSeries>
-{% endhighlight %}
-
-
-{% highlight C# %}
-
-ChartSeries lineseries = new ChartSeries();
-
-ChartAdornmentInfo adornment = new ChartAdornmentInfo();
+ChartAdornmentInfo adornment = new ChartAdornmentInfo();
 
 adornment.Visible = true;
-
 adornment.Symbol = Symbol.Ellipse;
-
 adornment.SymbolInterior = Brushes.Red;
-
 adornment.SymbolWidth = 15d;
-
 adornment.SymbolHeight = 15d;
-
 adornment.SegmentLabelContent = LabelContent.YValue;
-
 adornment.SegmentShowLine = true;
-
 adornment.SegmentLabelRotation = 30d;
-
 adornment.AdornmentsPosition = AdornmentsPosition.Top;
 
-
-
 lineseries.AdornmentsInfo = adornment;
 
 {% endhighlight %}
@@ -1223,31 +1112,23 @@ lineseries.AdornmentsInfo = adornment;
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:LineSeries >
-
-<syncfusion:LineSeries.ChartAdornmentInfo>
-
-<syncfusion:ChartAdornmentInfo  Symbol="Cross"
-
-UseSeriesPalette="True"
-
-AdornmentsPosition="Top"
-
-ShowConnectorLine="True"
-
-ConnectorHeight="10"
-
-SegmentLabelContent="YValue"   
-
-ShowLabel="True" SymbolStroke="Red"
-
-SymbolHeight="20" SymbolWidth="20"
-
-SymbolInterior="Red"/>
-
-</syncfusion:LineSeries.ChartAdornmentInfo>
+<syncfusion:LineSeries>
+   <syncfusion:LineSeries.ChartAdornmentInfo>
+      <syncfusion:ChartAdornmentInfo
+         Symbol="Cross"
+         UseSeriesPalette="True"
+         AdornmentsPosition="Top"
+         ShowConnectorLine="True"
+         ConnectorHeight="10"
+         SegmentLabelContent="YValue"
+         ShowLabel="True"
+         SymbolStroke="Red"
+         SymbolHeight="20"
+         SymbolWidth="20"
+         SymbolInterior="Red"/>
+   </syncfusion:LineSeries.ChartAdornmentInfo>
+</syncfusion:LineSeries>
 
-</syncfusion:LineSeries >
 {% endhighlight %}
 
 
@@ -1258,30 +1139,19 @@ LineSeries lineseries = new LineSeries();
 ChartAdornmentInfo adornment = new ChartAdornmentInfo();
 
 adornment.ShowLabel = true;
-
-adornment.Symbol = ChartSymbol.Ellipse;
-
+adornment.Symbol = ChartSymbol.Cross;
 adornment.SymbolHeight = 20d;
-
 adornment.SymbolWidth = 20d;
-
 adornment.SymbolInterior = Brushes.Red;
-
-adornment.SegmentLabelContent = LabelContent.YValue;
-
 adornment.SymbolStroke = Brushes.Red;
-
+adornment.SegmentLabelContent = LabelContent.YValue;
 adornment.AdornmentsPosition = AdornmentsPosition.Top;
-
+adornment.ShowConnectorLine = true;
 adornment.ConnectorHeight = 10d;
-
 adornment.UseSeriesPalette = true;
 
-adornment.ShowConnectorLine = true;
-
-
-
 lineseries.AdornmentsInfo = adornment;
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1360,14 +1230,17 @@ The InteractiveCursor is represented as ChartCrosshairBehavior and ChartTrackbal
 {% highlight xaml %}
 
 <syncfusion:ChartArea>
-
-<syncfusion:ChartArea.InteractiveCursors>
-
-<syncfusion:InteractiveCursor VerticalLabelVisibility="Visible"HorizontalLabelVisibility="Visible" IsBindWithMouseMove="True"IsBindWithSegment="False" OffsetX="100" OffsetY="100"/>
-
-</syncfusion:ChartArea.InteractiveCursors>
-
+    <syncfusion:ChartArea.InteractiveCursors>
+        <syncfusion:InteractiveCursor 
+            VerticalLabelVisibility="Visible"
+            HorizontalLabelVisibility="Visible" 
+            IsBindWithMouseMove="True"
+            IsBindWithSegment="False" 
+            OffsetX="100" 
+            OffsetY="100"/>
+    </syncfusion:ChartArea.InteractiveCursors>
 </syncfusion:ChartArea>
+
 {% endhighlight %}
 
 
@@ -1378,18 +1251,14 @@ ChartArea area= new ChartArea();
 InteractiveCursor incCursor = new InteractiveCursor();
 
 incCursor.VerticalLabelVisibility = Visibility.Visible;
-
 incCursor.HorizontalLabelVisibility = Visibility.Visible;
-
 incCursor.IsBindWithMouseMove = true;
-
 incCursor.IsBindWithSegment = false;
-
 incCursor.OffsetX = 100d;
-
 incCursor.OffsetY = 100d;
 
 area.InteractiveCursors.Add(incCursor);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1399,14 +1268,11 @@ area.InteractiveCursors.Add(incCursor);
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-<syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Center"VerticalAxisLabelAlignment="Center" />
-
-<syncfusion:SfChart.Behaviors/>
-
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Center" VerticalAxisLabelAlignment="Center"/>
+    </syncfusion:SfChart.Behaviors>
 </syncfusion:SfChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -1416,10 +1282,10 @@ SfChart chart = new SfChart();
 ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior();
 
 crosshair.VerticalAxisLabelAlignment = ChartAlignment.Center;
-
 crosshair.HorizontalAxisLabelAlignment = ChartAlignment.Center;
 
 chart.Behaviors.Add(crosshair);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1432,7 +1298,13 @@ The Zooming and Panning are achieved using the ChartZoomPanBehavior in SfChart a
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:ChartArea EnableZoomOnScroll="True" ZoomAllAxes="True"chart:ChartZoomingToolkit.ZoomingToolkitVisibility="Visible"EnableMouseDragZooming="True" /> 
+ <syncfusion:ChartArea 
+     EnableZoomOnScroll="True" 
+     ZoomAllAxes="True"
+     chart:ChartZoomingToolkit.ZoomingToolkitVisibility="Visible"
+     EnableMouseDragZooming="True">                
+ </syncfusion:ChartArea>
+
 {% endhighlight %}
 
 
@@ -1440,8 +1312,7 @@ The Zooming and Panning are achieved using the ChartZoomPanBehavior in SfChart a
 
 ChartArea area= new ChartArea();
 
-area.ZoomAllAxes = true;
-
+area.ZoomAllAxes = true
 area.EnableZoomOnScroll = true;
 
 ChartZoomingToolkit.SetZoomingToolkitVisibility(area, Visibility.Visible);
@@ -1455,14 +1326,18 @@ ChartZoomingToolkit.SetZoomingToolkitVisibility(area, Visibility.Visible);
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
- <syncfusion:SfChart.Behaviors>
-
-<syncfusion:ChartZoomPanBehavior ZoomMode="XY" EnablePinchZooming="False"ZoomRelativeToCursor="False" EnableMouseWheelZooming="True"EnableSelectionZooming="False" EnablePanning="True" />
-
-<syncfusion:SfChart.Behaviors/>
-
+    <syncfusion:SfChart.Behaviors>
+        <syncfusion:ChartZoomPanBehavior
+            ZoomMode="XY"
+            EnablePinchZooming="False" 
+            ZoomRelativeToCursor="False"
+            EnableMouseWheelZooming="True" 
+            EnableSelectionZooming="False"
+            EnablePanning="True">
+        </syncfusion:ChartZoomPanBehavior>
+    </syncfusion:SfChart.Behaviors>
 </syncfusion:SfChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -1472,18 +1347,14 @@ SfChart chart = new SfChart();
 ChartZoomPanBehavior zoom = new ChartZoomPanBehavior();
 
 zoom.EnableMouseWheelZooming = true;
-
 zoom.EnablePanning = true;
-
 zoom.EnableSelectionZooming = false;
-
 zoom.ZoomMode = ZoomMode.XY;
-
 zoom.ZoomRelativeToCursor = false;
-
 zoom.EnablePinchZooming = false;
 
 chart.Behaviors.Add(zoom);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1496,11 +1367,22 @@ The following code example demonstrates the usage of StripLines in Chart and SfC
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:ChartAxis.StripLines>
-
-<syncfusion:ChartStripLine x:Name="strip" Start="40" IsSegmented="False"SegmentStartValue="20" SegmentEndValue="40" RepeatEvery="10" RepeatUntil="50"TextRotationAngle="30"  StartFromAxis="False" Width="5" IsPixelWidth="False"Interior="#b4e8f3" >
+<syncfusion:NumericalAxis.StripLines>
+    <syncfusion:ChartStripLine
+        x:Name="strip"
+        Start="40"
+        IsSegmented="False"
+        SegmentStartValue="20"
+        SegmentEndValue="40"
+        RepeatEvery="10"
+        RepeatUntil="50"
+        TextRotationAngle="30"
+        StartFromAxis="False"
+        Width="5"
+        IsPixelWidth="False"
+        Background="#b4e8f3"/>
+</syncfusion:NumericalAxis.StripLines>
 
-<syncfusion:ChartAxis.StripLines/>
 {% endhighlight %}
 
 {% highlight C# %}
@@ -1510,32 +1392,22 @@ ChartArea area= new ChartArea();
 ChartStripLine stripline = new ChartStripLine();
 
 stripline.Offset = 20d;
-
 stripline.Width = 5d;
-
 stripline.StartFromAxis = false;
-
 stripline.IsSegmented = false;
-
 stripline.SegmentStartValue = 20d;
-
 stripline.SegmentEndValue = 40d;
-
 stripline.RepeatEvery = 10d;
-
 stripline.RepeatUntil = 50d;
-
 stripline.TextRotationAngle = 30;
-
 stripline.IsPixelWidth = false;
-
 stripline.Interior = new SolidColorBrush(Colors.Red);
 
-stripline.Text = new FormattedText("StripLine", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Times New Roman"), 20, Brushes.Black);
-
-
+stripline.Text = new FormattedText
+   ("StripLine", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Times New Roman"), 20, Brushes.Black);
 
 area.SecondaryAxis.StripLines.Add(stripline);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1545,10 +1417,21 @@ area.SecondaryAxis.StripLines.Add(stripline);
 {% highlight xaml %}
 
 <syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="40" LabelAngle="30" LabelHorizontalAlignment="Center"LabelVerticalAlignment="Center" RepeatEvery="10" RepeatUntil="50"IsSegmented="False" SegmentStartValue="20" SegmentEndValue="50" IsPixelWidth="True"   Width="5" Label="StripLine" Background="#b4e8f3" />
-
-<syncfusion:NumericalAxis.StripLines/>
+    <syncfusion:ChartStripLine
+        Start="40"
+        Width="5"
+        IsPixelWidth="True"
+        IsSegmented="False"
+        SegmentStartValue="20"
+        SegmentEndValue="50"
+        RepeatEvery="10"
+        RepeatUntil="50"
+        Label="StripLine"
+        LabelAngle="30"
+        LabelHorizontalAlignment="Center"
+        LabelVerticalAlignment="Center"
+        Background="#b4e8f3"/>
+</syncfusion:NumericalAxis.StripLines>
 
 {% endhighlight %}
 
@@ -1557,37 +1440,28 @@ area.SecondaryAxis.StripLines.Add(stripline);
 
 SfChart chart = new SfChart();
 
-ChartStripLine stripline = new ChartStripLine();
-
-stripline.Start = 40d;
-
-stripline.LabelAngle = 30d;
-
-stripline.LabelHorizontalAlignment = HorizontalAlignment.Center;
-
-stripline.LabelVerticalAlignment = VerticalAlignment.Center;
-
-stripline.RepeatEvery = 10d;
-
-stripline.RepeatUntil = 50d;
-
-stripline.IsSegmented = false;
-
-stripline.SegmentStartValue = 20d;
-
-stripline.SegmentEndValue = 50d;
+NumericalAxis axis = new NumericalAxis();
 
-stripline.IsPixelWidth = true;
-
-stripline.Background = new SolidColorBrush(Colors.Red);
-
-stripline.Width = 5d;
-
-stripline.Background = Brushes.LightGray;
+ChartStripLine stripline = new ChartStripLine()
+{
+   Start = 40d,
+   Width = 5d,
+   IsPixelWidth = true,
+   IsSegmented = false,
+   SegmentStartValue = 20d,
+   SegmentEndValue = 50d,
+   RepeatEvery = 10d,
+   RepeatUntil = 50d,
+   Label = "StripLine",
+   LabelAngle = 30d,
+   LabelHorizontalAlignment = HorizontalAlignment.Center,
+   LabelVerticalAlignment = VerticalAlignment.Center,
+   Background = new SolidColorBrush(Color.FromRgb(180, 232, 243))
+};
 
-stripline.Label = "StripLine";
+axis.StripLines.Add(stripline);
 
-chart.SecondaryAxis.StripLines.Add(stripline);
+chart.SecondaryAxis = axis;
 
 {% endhighlight %}
 {% endtabs %}
@@ -1672,23 +1546,20 @@ Following code example illustrates the WatermarkAPI comparison,
 {% highlight xaml %}
 
 <syncfusion:ChartArea>
-
-<syncfusion:ChartArea.Watermark>
-
-<VisualBrush Stretch="None" Opacity="0.5" AlignmentX="Center" AlignmentY="Center">
-
-<VisualBrush.Visual>
-
-<TextBlock  Text="Chart" FontSize="60"Foreground="Gray">
-
-</TextBlock>
-
-</VisualBrush.Visual>
-
- </VisualBrush>
-
-  </syncfusion:ChartArea.Watermark>
-
+    <syncfusion:ChartArea.Watermark>
+        <VisualBrush
+            Stretch="None"
+            Opacity="0.5"
+            AlignmentX="Center"
+            AlignmentY="Center">
+            <VisualBrush.Visual>
+                <TextBlock
+                    Text="Chart"
+                    FontSize="60"
+                    Foreground="Gray"/>
+            </VisualBrush.Visual>
+        </VisualBrush>
+    </syncfusion:ChartArea.Watermark>
 </syncfusion:ChartArea>
 
 {% endhighlight %}
@@ -1697,25 +1568,17 @@ Following code example illustrates the WatermarkAPI comparison,
 ChartArea area = new ChartArea();
 
 area.Watermark = new VisualBrush()
-
-{
-
-Opacity = 0.5,
-
-AlignmentX = AlignmentX.Center,
-
-AlignmentY = AlignmentY.Center,
-
-Stretch = Stretch.None,
-
-Visual = new TextBlock()
-
 {
-
-Text = "Chart", Foreground = Brushes.Gray, FontSize = 60d
-
-}
-
+   Opacity = 0.5,
+   AlignmentX = AlignmentX.Center,
+   AlignmentY = AlignmentY.Center,
+   Stretch = Stretch.None,
+   Visual = new TextBlock()
+   {
+      Text = "Chart",
+      FontSize = 60d,
+      Foreground = Brushes.Gray
+   }
 };
 
 {% endhighlight %}
@@ -1727,22 +1590,23 @@ Text = "Chart", Foreground = Brushes.Gray, FontSize = 60d
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-<syncfusion:SfChart.Watermark>
-
-<syncfusion:Watermark Canvas.ZIndex="-1" HorizontalAlignment="Center"VerticalAlignment="Center">
-
-<syncfusion:Watermark.Content>
-
-<TextBlock Text="SfChart" FontSize="60" Foreground="Gray"Opacity="0.5"></TextBlock>
-
-</syncfusion:Watermark.Content>
-
-</syncfusion:Watermark>
-
-</syncfusion:SfChart.Watermark>
-
+    <syncfusion:SfChart.Watermark>
+        <syncfusion:Watermark
+            Canvas.ZIndex="-1"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center">
+            <syncfusion:Watermark.Content>
+                <TextBlock
+                    Text="SfChart"
+                    FontSize="60"
+                    Foreground="Gray"
+                    Opacity="0.5">
+                </TextBlock>
+            </syncfusion:Watermark.Content>
+        </syncfusion:Watermark>
+    </syncfusion:SfChart.Watermark>
 </syncfusion:SfChart>
+
 {% endhighlight %}
 
 
@@ -1753,13 +1617,17 @@ SfChart chart = new SfChart();
 Watermark waterMark = new Watermark();
 
 waterMark.HorizontalAlignment = HorizontalAlignment.Center;
-
 waterMark.VerticalAlignment = VerticalAlignment.Center;
 
 Canvas.SetZIndex(waterMark, -1);
 
-waterMark.Content = new TextBlock() { Text = "SfChart", Foreground = Brushes.Gray, Opacity = 0.5, FontSize = 60d };
-
+waterMark.Content = new TextBlock() 
+{ 
+    Text = "SfChart", 
+    Foreground = Brushes.Gray, 
+    Opacity = 0.5, 
+    FontSize = 60d 
+};
 
 chart.Watermark = waterMark;
 
@@ -1782,10 +1650,15 @@ Chart having following Annotations
 {% highlight xaml %}
 
 <syncfusion:Chart.AnnotationLabels>
-
-< syncfusion:ChartAnnotationLabel AnnotationShape="None" Template="{StaticResourcetemplateImage}"  Content="Text Annotation" OffsetX="500" OffsetY="100"IsAnnotationDragDrop="True" />
-
+    <syncfusion:ChartAnnotationLabel 
+        AnnotationShape="None" 
+        Template="{StaticResourcetemplateImage}"
+        Content="Text Annotation" 
+        OffsetX="500" 
+        OffsetY="100"
+        IsAnnotationDragDrop="True"/>
 </syncfusion:Chart.AnnotationLabels>
+
 {% endhighlight %}
 
 {% highlight C# %}
@@ -1795,13 +1668,9 @@ Chart chart = new Chart();
 ChartAnnotationLabel chartannotation=new ChartAnnotationLabel();
 
 chartannotation.AnnotationShape = AnnotationShapes.None;
-
 chartannotation.Content = "Text Annotation";
-
 chartannotation.OffsetX = 500d;
-
 chartannotation.OffsetY = 100d;
-
 chartannotation.IsAnnotationDragDrop = true;
 
 chart.AnnotationLabels.Add(chartannotation);
@@ -1815,14 +1684,15 @@ chart.AnnotationLabels.Add(chartannotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:ChartSeries.Annotations>
-
-   <syncfusion:AnnotationsCollection >
-
-    <syncfusion:ChartSeriesAnnotation X="40702" Y="468"  AnnotationShape="Diamond"Stroke="Black"   Fill="Orange"/>
-
-   </syncfusion:AnnotationsCollection>
-
+<syncfusion:ChartSeries.Annotations>   
+    <syncfusion:AnnotationsCollection>   
+        <syncfusion:ChartSeriesAnnotation 
+            X="40702"
+            Y="468"
+            AnnotationShape="Diamond"
+            Stroke="Black"
+            Fill="Orange"/>                              
+    </syncfusion:AnnotationsCollection>
 </syncfusion:ChartSeries.Annotations>
 
 {% endhighlight %}
@@ -1836,18 +1706,14 @@ AnnotationsCollection annoCollection = new AnnotationsCollection();
 ChartSeriesAnnotation seriesAnnotation=new ChartSeriesAnnotation();
 
 seriesAnnotation.X = 40702;
-
 seriesAnnotation.Y = 468;
-
 seriesAnnotation.AnnotationShape = AnnotationShapes.Diamond;
-
 seriesAnnotation.Stroke = Brushes.Black;
-
 seriesAnnotation.Fill = Brushes.Orange;
-
 annoCollection.m_annotationsCollection.Add(seriesAnnotation);
 
 columnSeries.Annotations = annoCollection;
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1855,20 +1721,25 @@ columnSeries.Annotations = annoCollection;
 
 In SfChart, you can position Annotations in pixel unit or axis. Units are specified using CoordinateUnit property. Unlike Chart, shape is represented by class name itself in SfChart.
 
-###SfChart having the following Annotations
+### SfChart having the following Annotations
 
 * Image Annotation
 
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
+<syncfusion:SfChart.Annotations>
+    <syncfusion:ImageAnnotation
+        ImageSource="Annotation.png"
+        VerticalTextAlignment="Center"
+        Foreground="White"
+        CoordinateUnit="Axis"
+        X1="30" X2="75"
+        Y1="520" 
+        Y2="560">
+    </syncfusion:ImageAnnotation>
+</syncfusion:SfChart.Annotations>
 
- < syncfusion:ImageAnnotation ImageSource="Annotation.png"VerticalTextAlignment="Center" Foreground="White" CoordinateUnit="Axis" X1="30"X2="75" Y1="520" Y2="560">                  
-
- </syncfusion:ImageAnnotation>
-
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
 {% highlight C# %}
@@ -1878,24 +1749,16 @@ SfChart chart = new SfChart();
 ImageAnnotation imgAnnotation = new ImageAnnotation();
 
 imgAnnotation.ImageSource = new BitmapImage(new Uri(@"/Images/Annotation.png", UriKind.Relative));
-
 imgAnnotation.VerticalTextAlignment = VerticalAlignment.Center;
-
-imgAnnotation.Foreground = new SolidColorBrush(Colors.White);
-
+imgAnnotation.Foreground = new SolidColorBrush(Colors.White);            
 imgAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
 imgAnnotation.X1 = 30d;
-
 imgAnnotation.X2 = 75d;
-
 imgAnnotation.Y1 = 520d;
-
 imgAnnotation.Y2 = 560d;
 
-
-
 chart.Annotations.Add(imgAnnotation);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1904,11 +1767,17 @@ chart.Annotations.Add(imgAnnotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
+<syncfusion:SfChart.Annotations>
+    <syncfusion:LineAnnotation 
+        X1="3" 
+        Y1="34" 
+        X2="5" 
+        Y2="38" 
+        CanResize="True" 
+        CanDrag="True">
+    </syncfusion:LineAnnotation>
+</syncfusion:SfChart.Annotations>
 
- < syncfusion:LineAnnotation X1="3" Y1="34" X2="5" Y2="38" CanResize="True"CanDrag="True"></ syncfusion:LineAnnotation>   
-
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
 
@@ -1916,23 +1785,16 @@ chart.Annotations.Add(imgAnnotation);
 
 SfChart chart = new SfChart();
 
-LineAnnotation lineAnnotation = new LineAnnotation();
-
-lineAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
-lineAnnotation.CanResize = true;
-
-lineAnnotation.CanDrag = true;
-
-lineAnnotation.X1 = 3d;
-
-lineAnnotation.X2 = 34d;
-
-lineAnnotation.Y1 = 5d;
-
-lineAnnotation.Y2 = 38d;
-
-
+LineAnnotation lineAnnotation = new LineAnnotation()
+{
+    CoordinateUnit = CoordinateUnit.Axis,
+    CanResize = true,
+    CanDrag = true,
+    X1 = 3d,
+    X2 = 34d,
+    Y1 = 5d,
+    Y2 = 38d
+};
 
 chart.Annotations.Add(lineAnnotation);
 
@@ -1943,11 +1805,17 @@ chart.Annotations.Add(lineAnnotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
-
- <syncfusion:EllipseAnnotation X1="1" Y1="36" X2="2" Y2="42" CanResize="True"CanDrag="True"></ syncfusion:EllipseAnnotation>     
+<syncfusion:SfChart.Annotations>
+    <syncfusion:EllipseAnnotation
+        X1="1"
+        Y1="36"
+        X2="2"
+        Y2="42"
+        CanResize="True"
+        CanDrag="True">
+    </syncfusion:EllipseAnnotation>
+</syncfusion:SfChart.Annotations>
 
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
 
@@ -1955,23 +1823,19 @@ chart.Annotations.Add(lineAnnotation);
 
 SfChart chart = new SfChart();
 
-EllipseAnnotation ellipseAnnotation = new EllipseAnnotation();
-
-ellipseAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
-ellipseAnnotation.CanResize = true;
-
-ellipseAnnotation.CanDrag = true;
-
-ellipseAnnotation.X1 = 36d;
-
-ellipseAnnotation.X2 = 2d;
-
-ellipseAnnotation.Y1 = 36d;
-
-ellipseAnnotation.Y2 = 42d;
+EllipseAnnotation ellipseAnnotation = new EllipseAnnotation()
+{
+   CoordinateUnit = CoordinateUnit.Axis,
+   CanResize = true,
+   CanDrag = true,
+   X1 = 36d,
+   X2 = 2d,
+   Y1 = 36d,
+   Y2 = 42d
+};
 
 chart.Annotations.Add(ellipseAnnotation);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -1979,36 +1843,38 @@ chart.Annotations.Add(ellipseAnnotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
+<syncfusion:SfChart.Annotations>
+    <syncfusion:RectangleAnnotation
+        X1="4"
+        Y1="40"
+        X2="6"
+        Y2="42"
+        CanResize="True"
+        CanDrag="True">
+    </syncfusion:RectangleAnnotation>
+</syncfusion:SfChart.Annotations>
 
- <syncfusion:RectangleAnnotation X1="4" Y1="40" X2="6" Y2="42" CanResize="True"CanDrag="True"></syncfusion:RectangleAnnotation>           
-
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
 {% highlight C# %}
 
 SfChart chart = new SfChart();
 
-RectangleAnnotation rectAnnotation = new RectangleAnnotation();
-
-rectAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
-rectAnnotation.CanResize = true;
-
-rectAnnotation.CanDrag = true;
-
-rectAnnotation.X1 = 36d;
-
-rectAnnotation.X2 = 2d;
-
-rectAnnotation.Y1 = 36d;
-
-rectAnnotation.Y2 = 42d;
+RectangleAnnotation rectAnnotation = new RectangleAnnotation()
+{
+   CoordinateUnit = CoordinateUnit.Axis,
+   CanResize = true,
+   CanDrag = true,
+   X1 = 36d,
+   X2 = 2d,
+   Y1 = 36d,
+   Y2 = 42d
+};
 
 chart.Annotations.Add(rectAnnotation);
 
 {% endhighlight %}
+
 {% endtabs %}
 
 * Vertical Line Annotation 
@@ -2016,16 +1882,17 @@ chart.Annotations.Add(rectAnnotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
-
- <syncfusion:VerticalLineAnnotation CanDrag="True" ShowAxisLabel="True"CanResize="True" CoordinateUnit="Axis" X1="3">               
+<syncfusion:SfChart.Annotations>
+    <syncfusion:VerticalLineAnnotation
+        CanDrag="True" 
+        ShowAxisLabel="True"
+        CanResize="True"
+        CoordinateUnit="Axis" X1="3">
+    </syncfusion:VerticalLineAnnotation>
+</syncfusion:SfChart.Annotations>
 
-</syncfusion:VerticalLineAnnotation>                
-
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
-
 {% highlight C# %}
 
 SfChart chart = new SfChart();
@@ -2033,11 +1900,8 @@ SfChart chart = new SfChart();
 VerticalLineAnnotation verAnnotation = new VerticalLineAnnotation();
 
 verAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
 verAnnotation.ShowAxisLabel = true;
-
 verAnnotation.CanDrag = true;
-
 verAnnotation.X1 = 3d;
 
 chart.Annotations.Add(verAnnotation);
@@ -2048,20 +1912,21 @@ chart.Annotations.Add(verAnnotation);
 * Horizontal Line Annotation  
 
 {% tabs %}
-{% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
-
- <syncfusion:HorizontalLineAnnotation CanDrag="True" CanResize="True"CoordinateUnit="Axis" ShowAxisLabel="True"  Y1="40" >                
-
-</syncfusion:HorizontalLineAnnotation>
+{% highlight xaml %}
 
-<syncfusion:SfChart.Annotations/>
+<syncfusion:SfChart.Annotations>
+    <syncfusion:HorizontalLineAnnotation
+        CanDrag="True"
+        CanResize="True"
+        CoordinateUnit="Axis"
+        ShowAxisLabel="True"
+        Y1="40">
+    </syncfusion:HorizontalLineAnnotation>
+</syncfusion:SfChart.Annotations>
 
 {% endhighlight %}
 
-
-
 {% highlight C# %}
 
 SfChart chart = new SfChart();
@@ -2069,14 +1934,12 @@ SfChart chart = new SfChart();
 HorizontalLineAnnotation horAnnotation = new HorizontalLineAnnotation();
 
 horAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
 horAnnotation.ShowAxisLabel = true;
-
 horAnnotation.CanDrag = true;
-
 horAnnotation.Y1 = 40d;
 
 chart.Annotations.Add(horAnnotation);
+
 {% endhighlight %}
 {% endtabs %}
 * Text Annotation 
@@ -2084,11 +1947,21 @@ chart.Annotations.Add(horAnnotation);
 {% tabs %}
 {% highlight xaml %}
 
-<syncfusion:SfChart.Annotations>              
+<syncfusion:SfChart.Annotations>
+    <syncfusion:TextAnnotation
+        X1="0"
+        Y1="150"
+        Text="Release 1"
+        ContentTemplate="{StaticResource textTemplate}"
+        ToolTipContent="Volume 1 Released!!!"
+        ToolTipTemplate="{StaticResource tooltip}"
+        VerticalAlignment="Top"
+        HorizontalAlignment="Left"
+        ToolTipPlacement="Top"
+        ShowToolTip="True">
+    </syncfusion:TextAnnotation>
+</syncfusion:SfChart.Annotations>
 
-<syncfusion:TextAnnotation X1="0" Y1="150" Text="Release 1" ContentTemplate="{StaticResource textTemplate}" ToolTipContent="Volume 1 Released!!!"ToolTipTemplate="{StaticResource tooltip}" VerticalAlignment="Top" HorizontalAlignment="Left"  ToolTipPlacement="Top"ShowToolTip="True">                </syncfusion:TextAnnotation>
-
-<syncfusion:SfChart.Annotations/>
 {% endhighlight %}
 
 
@@ -2096,23 +1969,17 @@ chart.Annotations.Add(horAnnotation);
 
 SfChart chart = new SfChart();
 
-TextAnnotation textAnnotation = new TextAnnotation();
-
-textAnnotation.CoordinateUnit = CoordinateUnit.Axis;
-
-textAnnotation.X1 = 0d;
-
-textAnnotation.Y1 = 150d;
-
-textAnnotation.Text = "Release 1";
-
-textAnnotation.ToolTipContent = "Volume 1 Released!!!";
-
-textAnnotation.HorizontalAlignment = HorizontalAlignment.Left;
-
-textAnnotation.ToolTipPlacement = ToolTipLabelPlacement.Top;
-
-textAnnotation.ShowToolTip = true;
+TextAnnotation textAnnotation = new TextAnnotation()
+{
+   CoordinateUnit = CoordinateUnit.Axis,
+   X1 = 0d,
+   Y1 = 150d,
+   Text = "Release 1",
+   ToolTipContent = "Volume 1 Released!!!",
+   HorizontalAlignment = HorizontalAlignment.Left,
+   ToolTipPlacement = ToolTipLabelPlacement.Top,
+   ShowToolTip = true
+};
 
 chart.Annotations.Add(textAnnotation);
 
@@ -2187,23 +2054,17 @@ In Chart, you can set the type of the indicator where as in SfChart, indicator t
 {% highlight xaml %}
 
 <syncfusion:ChartSeries.Indicators>
-
-<syncfusion:IndicatorCollection>
-
-<syncfusion:IndicatorCollection.Items>
-
-<syncfusion:ChartTechnicalIndicator 
-
-IndicatorType="BollingerBands"  
-
-chart:ChartBollingerBand.LowerLineColor ="Blue" chart:ChartBollingerBand.UpperLineColor="Red" chart:ChartBollingerBand.SignalLineColor ="Green" chart:ChartBollingerBand.BollingerMovingAverage="50" >
-
-</syncfusion:ChartTechnicalIndicator>
-
-</syncfusion:IndicatorCollection.Items>
-
-</syncfusion:IndicatorCollection>
-
+    <syncfusion:IndicatorCollection>
+        <syncfusion:IndicatorCollection.Items>
+            <syncfusion:ChartTechnicalIndicator
+                IndicatorType="BollingerBands"
+                chart:ChartBollingerBand.LowerLineColor="Blue"
+                chart:ChartBollingerBand.UpperLineColor="Red"
+                chart:ChartBollingerBand.SignalLineColor="Green"
+                chart:ChartBollingerBand.BollingerMovingAverage="50">
+            </syncfusion:ChartTechnicalIndicator>
+        </syncfusion:IndicatorCollection.Items>
+    </syncfusion:IndicatorCollection>
 </syncfusion:ChartSeries.Indicators>
 
 {% endhighlight %}
@@ -2219,11 +2080,8 @@ ChartTechnicalIndicator indicator = new ChartTechnicalIndicator();
 indicator.IndicatorType = IndicatorTypes.BollingerBands;
 
 ChartBollingerBand.SetLowerLineColor(chart,Brushes.Blue);
-
 ChartBollingerBand.SetSignalLineColor(chart, Brushes.Red);
-
 ChartBollingerBand.SetSignalLineColor(chart, Brushes.Green);
-
 ChartBollingerBand.SetBollingerMovingAverage(chart,50);
 
 indiCollection.Items.Add(indicator);
@@ -2233,44 +2091,45 @@ columnSeries.Indicators = indiCollection;
 {% endhighlight %}
 {% endtabs %}
 
-##SfChart
+### SfChart
 
 {% tabs %}
 {% highlight xaml %}
 
 <syncfusion:SfChart.TechnicalIndicators>
+    <syncfusion:BollingerBandIndicator
+        UpperLineColor="Brown"
+        LowerLineColor="DarkBlue"
+        Period="1"
+        XBindingPath="Year"
+        ItemsSource="{Binding CompanyDetails}"
+        High="High"
+        Open="Open"
+        Close="Close"
+        Low="Low"/>
+</syncfusion:SfChart.TechnicalIndicators>
 
- <syncfusion:BollingerBandIndicator UpperLineColor="Brown"LowerLineColor="DarkBlue" Period="1" XBindingPath="Year" ItemsSource="{BindingCompanyDetails}" High="High" Open="Open" Close="Close" Low="Low"/>
-
- </syncfusion:SfChart.TechnicalIndicators>
 {% endhighlight %}
 
 
 {% highlight C# %}
 
-
-
 SfChart chart = new SfChart();
 
-BollingerBandIndicator indicator = new BollingerBandIndicator();
-
-indicator.UpperLineColor=new SolidColorBrush(Colors.Brown);
-
-indicator.LowerLineColor=new SolidColorBrush(Colors.DarkBlue);
-
-indicator.XBindingPath = "Year";
-
-indicator.High = "High";
-
-indicator.Open = "Open";
-
-indicator.Close = "Close";
-
-indicator.Low = "Low";
-
-indicator.ItemsSource = viewmodel.CompanyDetails;
+BollingerBandIndicator indicator = new BollingerBandIndicator()
+{
+   UpperLineColor = new SolidColorBrush(Colors.Brown),
+   LowerLineColor = new SolidColorBrush(Colors.DarkBlue),
+   XBindingPath   = "Year",
+   High           = "High",
+   Open           = "Open",
+   Close          = "Close",
+   Low            = "Low",
+   ItemsSource    = viewmodel.CompanyDetails
+};
 
 chart.TechnicalIndicators.Add(indicator);
+
 {% endhighlight %}
 {% endtabs %}
 
@@ -2289,67 +2148,60 @@ The following code example illustrates the API’s for both charts,
 {% tabs %}
 {% highlight xaml %}
 
-  <syncfusion:Chart>
-
-  <syncfusion:SyncChartAreas >
-
-  <syncfusion:SyncChartAreas.PrimaryAxis>
-
-  <syncfusion:ChartAxis  ValueType="DateTime"LabelDateTimeFormat="MM/dd/yy" Header="Date">
-
-  </syncfusion:ChartAxis>
-
-  </syncfusion:SyncChartAreas.PrimaryAxis>
-
-  <syncfusion:SyncChartAreas.Areas>
-
-  <syncfusion:ChartArea x:Name="Area1" >
-
-  <syncfusion:ChartArea.SecondaryAxis >
-
-  <syncfusion:ChartAxis EdgeLabelsDrawingMode="Shift" Interval="50" Header="Prices">
-
-  </syncfusion:ChartAxis>
-
-  </syncfusion:ChartArea.SecondaryAxis>
-
-  <syncfusion:ChartSeries Type="Line" DataSource="{Bindingdatalist}" BindingPathX="Time" BindingPathsY="Low"  >
-
-  </syncfusion:ChartSeries>
-
-  </syncfusion:ChartArea>
-
-  <syncfusion:ChartArea x:Name="Area2" >
-
-  <syncfusion:ChartArea.SecondaryAxis >
-
-  <syncfusion:ChartAxis EdgeLabelsDrawingMode="Shift" Interval="50" Header="Prices">
-
-  </syncfusion:ChartAxis>
-
-  </syncfusion:ChartArea.SecondaryAxis>
-
-  <syncfusion:ChartSeries Type="Line" DataSource="{Bindingdatalist}" BindingPathX="Time" BindingPathsY="High" >
-
-  </syncfusion:ChartSeries>
-
-  </syncfusion:ChartArea>
-
-  </syncfusion:SyncChartAreas.Areas>
-
-  </syncfusion:SyncChartAreas>
-
-  </syncfusion:Chart>
-
+<syncfusion:Chart>
+   <syncfusion:SyncChartAreas>
+
+      <syncfusion:SyncChartAreas.PrimaryAxis>
+         <syncfusion:ChartAxis
+               ValueType="DateTime"
+               LabelDateTimeFormat="MM/dd/yy"
+               Header="Date">
+         </syncfusion:ChartAxis>
+      </syncfusion:SyncChartAreas.PrimaryAxis>
+
+      <syncfusion:SyncChartAreas.Areas>
+         <syncfusion:ChartArea x:Name="Area1">
+               <syncfusion:ChartArea.SecondaryAxis>
+                  <syncfusion:ChartAxis
+                     EdgeLabelsDrawingMode="Shift"
+                     Interval="50"
+                     Header="Prices">
+                  </syncfusion:ChartAxis>
+               </syncfusion:ChartArea.SecondaryAxis>
+
+               <syncfusion:ChartSeries
+                  Type="Line"
+                  DataSource="{Binding datalist}"
+                  BindingPathX="Time"
+                  BindingPathsY="Low">
+               </syncfusion:ChartSeries>
+         </syncfusion:ChartArea>
+
+         <syncfusion:ChartArea x:Name="Area2">
+               <syncfusion:ChartArea.SecondaryAxis>
+                  <syncfusion:ChartAxis
+                     EdgeLabelsDrawingMode="Shift"
+                     Interval="50"
+                     Header="Prices">
+                  </syncfusion:ChartAxis>
+               </syncfusion:ChartArea.SecondaryAxis>
+
+               <syncfusion:ChartSeries
+                  Type="Line"
+                  DataSource="{Binding datalist}"
+                  BindingPathX="Time"
+                  BindingPathsY="High">
+               </syncfusion:ChartSeries>
+         </syncfusion:ChartArea>
+      </syncfusion:SyncChartAreas.Areas>
+   </syncfusion:SyncChartAreas>
+</syncfusion:Chart>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-
-
-
-SyncChartAreas areas=new SyncChartAreas();
+SyncChartAreas areas = new SyncChartAreas();
 
 areas.PrimaryAxis = new ChartAxis();
 
@@ -2360,11 +2212,8 @@ area1.SecondaryAxis = new ChartAxis();
 ChartSeries lineSeries1 = new ChartSeries();
 
 lineSeries1.BindingPathX = "Time";
-
 lineSeries1.BindingPathsY = new string[] { "Low" };
-
 lineSeries1.DataSource = viewmodel.datalist;
-
 lineSeries1.Type = ChartTypes.Line;
 
 area1.Series.Add(lineSeries1);
@@ -2376,17 +2225,13 @@ area2.SecondaryAxis = new ChartAxis();
 ChartSeries lineSeries2 = new ChartSeries();
 
 lineSeries2.BindingPathX = "Time";
-
 lineSeries2.BindingPathsY = new string[] { "High" };
-
 lineSeries2.DataSource = viewmodel.datalist;
-
 lineSeries2.Type = ChartTypes.Line;
 
 area2.Series.Add(lineSeries1);
 
 areas.Areas.Add(area1);
-
 areas.Areas.Add(area2);
 
 {% endhighlight %}
@@ -2394,171 +2239,171 @@ areas.Areas.Add(area2);
 
 ### SfChart
 
-##Column Row Definition
+## Column Row Definition
 
 {% tabs %}
 {% highlight xaml %}
-<syncfusion:SfChart>
-
-<syncfusion:SfChart.RowDefinitions>
-
-<syncfusion:ChartRowDefinition/>
-
-<syncfusion:ChartRowDefinition/>
-
-</syncfusion:SfChart.RowDefinitions>
-
-<syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:CategoryAxis ShowGridLines="False" FontSize="20"Header="Company Name"/>
-
-</syncfusion:SfChart.PrimaryAxis>
-
-<syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis syncfusion:ChartBase.Row="0"  Interval="40"FontSize="20" Header="Gross Revenue (cr.)"/>
-
-</syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:LineSeries  Stroke="Red" StrokeThickness="3"XBindingPath="CompanyName" YBindingPath="CompanyTurnOver1" ItemsSource="{BindingCompanyDetails}"/>
-
-<syncfusion:LineSeries  Stroke="Green" StrokeThickness="3"XBindingPath="CompanyName" YBindingPath="CompanyTurnOver2" ItemsSource="{BindingCompanyDetails}">
-
-<syncfusion:LineSeries.YAxis>
-
-<syncfusion:NumericalAxis syncfusion:ChartBase.Row="1"Header="Additional Axis" PlotOffset="30"/>
-
-</syncfusion:LineSeries.YAxis>
-
-</syncfusion:LineSeries>
 
+<syncfusion:SfChart>
+   <syncfusion:SfChart.RowDefinitions>
+      <syncfusion:ChartRowDefinition/>
+      <syncfusion:ChartRowDefinition/>
+   </syncfusion:SfChart.RowDefinitions>
+
+   <syncfusion:SfChart.PrimaryAxis>
+      <syncfusion:CategoryAxis
+         ShowGridLines="False"
+         FontSize="20"
+         Header="Company Name"/>
+   </syncfusion:SfChart.PrimaryAxis>
+
+   <syncfusion:SfChart.SecondaryAxis>
+      <syncfusion:NumericalAxis
+         syncfusion:ChartBase.Row="0"
+         Interval="40"
+         FontSize="20"
+         Header="Gross Revenue (cr.)"/>
+   </syncfusion:SfChart.SecondaryAxis>
+
+   <syncfusion:LineSeries
+      Stroke="Red"
+      StrokeThickness="3"
+      ItemsSource="{Binding CompanyDetails}"
+      XBindingPath="CompanyName"
+      YBindingPath="CompanyTurnOver1"/>
+
+   <syncfusion:LineSeries
+      Stroke="Green"
+      StrokeThickness="3"
+      ItemsSource="{Binding CompanyDetails}"
+      XBindingPath="CompanyName"
+      YBindingPath="CompanyTurnOver2">
+
+      <syncfusion:LineSeries.YAxis>
+         <syncfusion:NumericalAxis
+               syncfusion:ChartBase.Row="1"
+               Header="Additional Axis"
+               PlotOffset="30"/>
+      </syncfusion:LineSeries.YAxis>
+   </syncfusion:LineSeries>
 </syncfusion:SfChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
 
 SfChart chart = new SfChart();
 
-ChartRowDefinition row1=new ChartRowDefinition();
-
+ChartRowDefinition row1 = new ChartRowDefinition();
 ChartRowDefinition row2 = new ChartRowDefinition();
 
 chart.RowDefinitions.Add(row1);
-
 chart.RowDefinitions.Add(row2);
 
+chart.PrimaryAxis = new CategoryAxis()
+{
+    ShowGridLines = false,
+    FontSize = 20,
+    Header = "Company Name"
+};
 
+NumericalAxis numAxis1 = new NumericalAxis()
+{
+    Interval = 40,
+    FontSize = 20,
+    Header = "Gross Revenue (cr.)"
+};
 
-chart.PrimaryAxis = new CategoryAxis();
-
-NumericalAxis numAxis1 = new NumericalAxis();
-
-ChartBase.SetRow(numAxis1,0);
-
-
-
-LineSeries lineseries1 = new LineSeries();
-
-lineseries1.ItemsSource = viewmodel.CompanyDetails;
-
-lineseries1.XBindingPath = "CompanyName";
-
-lineseries1.YBindingPath = "CompanyTurnOver1";
-
-
-
-LineSeries lineseries2 = new LineSeries();
-
-lineseries2.ItemsSource = viewmodel.CompanyDetails;
-
-lineseries2.XBindingPath = "CompanyName";
-
-lineseries2.YBindingPath = "CompanyTurnOver2";
-
-
-
-NumericalAxis numAxis2 = new NumericalAxis();
-
-ChartBase.SetRow(numAxis2,1);
+ChartBase.SetRow(numAxis1, 0);
+chart.SecondaryAxis = numAxis1;
 
-lineseries2.YAxis = numAxis2;
+LineSeries lineSeries1 = new LineSeries()
+{
+    ItemsSource = viewmodel.CompanyDetails,
+    XBindingPath = "CompanyName",
+    YBindingPath = "CompanyTurnOver1",
+    Stroke = Brushes.Red,
+    StrokeThickness = 3
+};
 
+LineSeries lineSeries2 = new LineSeries()
+{
+    ItemsSource = viewmodel.CompanyDetails,
+    XBindingPath = "CompanyName",
+    YBindingPath = "CompanyTurnOver2",
+    Stroke = Brushes.Green,
+    StrokeThickness = 3
+};
 
+NumericalAxis numAxis2 = new NumericalAxis()
+{
+    Header = "Additional Axis",
+    PlotOffset = 30
+};
 
-chart.Series.Add(lineseries1);
+ChartBase.SetRow(numAxis2, 1);
+lineSeries2.YAxis = numAxis2;
 
-chart.Series.Add(lineseries2);
+chart.Series.Add(lineSeries1);
+chart.Series.Add(lineSeries2);
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Exporting and Printing
-
 ### Export to Image
 
 ### Chart
 
 {% highlight C# %}
 
-Chart chart = new Chart();      
+Chart chart = new Chart();
 
 SaveFileDialog saveFileDialog = new SaveFileDialog();
 
-            string C_imageFilesFilter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|TIFF(*.tiff)|*.tiff|PNG(*.png)|*.png|WDP(*.wdp)|*.wdp|Xps file (*.xps)|*.xps|All files (*.*)|*.*";
+string C_imageFilesFilter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|TIFF(*.tiff)|*.tiff|PNG(*.png)|*.png|WDP(*.wdp)|*.wdp|Xps file (*.xps)|*.xps|All files (*.*)|*.*";
 
 saveFileDialog.Filter = C_imageFilesFilter;
 
-
-
 if (saveFileDialog.ShowDialog() == true)
+{
+   chart.Save(saveFileDialog.FileName);
+}
 
- {
-
-    chart.Save(saveFileDialog.FileName);
-
- }
 {% endhighlight %}
 
 ### SfChart
 
 {% highlight C# %}
 
-SfChart sfchart = new SfChart();      
+SfChart sfchart = new SfChart();
 
-SaveFileDialog sfd = new SaveFileDialog();      
+SaveFileDialog sfd = new SaveFileDialog();
 
- sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|All files (*.*)|*.*";          
+sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|All files (*.*)|*.*";
 
-  if (sfd.ShowDialog() == true)          
-
-  {               
-
-          using (Stream fs = sfd.OpenFile())
-
-          {
-
-              sfchart.Save(fs, new PngBitmapEncoder());
-
-          }           
+if (sfd.ShowDialog() == true)
+{
+    using (Stream fs = sfd.OpenFile())
+    {
+      sfchart.Save(fs, new PngBitmapEncoder());
+    }                
+}
 
-   }
 {% endhighlight %}
 
-##Printing Chart
+## Printing Chart
 
 ### Chart
 
 {% highlight xaml %}
 
-<syncfusion:Chart x:Name="chart"/>
-
-<Button Content="Print"  Command="{x:Static ApplicationCommands.Print}"
+<syncfusion:Chart x:Name="chart"/>
 
-CommandTarget="{Binding ElementName=chart}"/>
+<Button Content="Print"  Command="{x:Static ApplicationCommands.Print}" CommandTarget="{Binding ElementName=chart}"/>
 
-<Button Content="Printing Mode" Command="{x:Staticsyncfusion:ChartCommands.SwitchPrinting}"
+<Button Content="Printing Mode" Command="{x:Staticsyncfusion:ChartCommands.SwitchPrinting}" CommandTarget="{Binding ElementName=chart}"/>
 
-CommandTarget="{Binding ElementName=chart}"/>
 {% endhighlight %}
 
 ### SfChart
@@ -2566,10 +2411,8 @@ CommandTarget="{Binding ElementName=chart}"/>
 {% highlight C# %}
 
 SfChart chart = new SfChart();
-
 chart.Print();
 
-
 {% endhighlight %}
 
 
diff --git a/wpf/Charts/Overview.md b/wpf/Charts/Overview.md
index f64227dd9f..6d271ef864 100644
--- a/wpf/Charts/Overview.md
+++ b/wpf/Charts/Overview.md
@@ -20,7 +20,7 @@ SfChart provides a perfect way to visualize data with a high level of user inter
 * SfChart supports 38 different types of [series](https://help.syncfusion.com/wpf/charts/seriestypes/series), ranging from simple [bar series](https://help.syncfusion.com/wpf/charts/seriestypes/columnandbar) to complex [financial charts](https://help.syncfusion.com/wpf/charts/seriestypes/financial). Each type of chart represents a unique style of representing data with more user friendly and greater UI visualization.
 * Capable of rendering large amount of data within the few milliseconds (ms). 
 * Allows you to map data from the specified path, by achieving [data binding](https://help.syncfusion.com/wpf/charts/databinding) concept.
-* Interactive zooming[https://help.syncfusion.com/wpf/charts/interactive-features/zoompan] can be done with touch mode enabled that allows you to explore portions of large charts in more detail, with excellent performance.
+* [Interactive zooming](https://help.syncfusion.com/wpf/charts/interactive-features/zoompan) can be done with touch mode enabled that allows you to explore portions of large charts in more detail, with excellent performance.
 * When you need more information about particular segment in a chart, a little mouse over on the series provides much more information by including [tooltip](https://help.syncfusion.com/wpf/charts/interactive-features/tooltip), [crosshair](https://help.syncfusion.com/wpf/charts/interactive-features/crosshair) and [track ball](https://help.syncfusion.com/wpf/charts/interactive-features/trackball) behavior.
 * Supports 10 different types of [technical indicators](https://help.syncfusion.com/wpf/charts/technical-indicators) that determine financial, stock or economic trends by analyzing a set of recorded data. 
 * Supports multiple axes that can be stacked and spanned for multiple panes.
diff --git a/wpf/Charts/Performance.md b/wpf/Charts/Performance.md
index cc81618930..7620d46ade 100644
--- a/wpf/Charts/Performance.md
+++ b/wpf/Charts/Performance.md
@@ -21,7 +21,6 @@ N> Stopped to provide support for the DirectX series. Instead of that, use FastL
 You can hold and resume the series updates in dynamic update scenarios using the below methods.
 
 [`SuspendSeriesNotification`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_SuspendSeriesNotification)
-
 [`ResumeSeriesNotification`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_ResumeSeriesNotification)
 
 
@@ -29,6 +28,6 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to create a real time Chart using MVVM in WPF`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
+[`How to create a real time Chart using MVVM in WPF?`](https://support.syncfusion.com/kb/article/10039/how-to-create-a-real-time-chart-sfchart-using-mvvm-in-wpf)
 
 
diff --git a/wpf/Charts/Printing.md b/wpf/Charts/Printing.md
index b3a54a7643..c3d2bede62 100644
--- a/wpf/Charts/Printing.md
+++ b/wpf/Charts/Printing.md
@@ -21,51 +21,38 @@ The following code example demonstrates the printing of chart in button click ev
 
 {% highlight xaml %}
 
-<chart:SfChart x:Name="ExportDemoChart" >
-
-<chart:SfChart.Watermark>
-
-<chart:Watermark Canvas.ZIndex="-1"  HorizontalAlignment="Center" VerticalAlignment="Center">
-
-<chart:Watermark.Content>
-
-<TextBlock Text="Climate Report" FontSize="60" Foreground="Gray" Opacity="0.5"></TextBlock>
-
-</chart:Watermark.Content>
-
-</chart:Watermark>
-
-</chart:SfChart.Watermark>
-
-<chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  PlotOffset="20" Header="Month" />
-
-</chart:SfChart.PrimaryAxis>
-
-<chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis Header="Degree ( In Celsius )" 
-
-RangePadding="Round"/>
-
-</chart:SfChart.SecondaryAxis>
-
-<!-- Add Series to the Chart-->
-
-<chart:SplineSeries Label="Sports" ItemsSource="{Binding ClimateData}"         
-
-XBindingPath="Month" YBindingPath="Temperature">
-
-<chart:SplineSeries.AdornmentsInfo>
-
-<chart:ChartAdornmentInfo  ShowMarker="True" Symbol="Ellipse" 
-
-ShowLabel="True"/>
-
-</chart:SplineSeries.AdornmentsInfo>
-
-</chart:SplineSeries>
+<chart:SfChart x:Name="ExportDemoChart">
+    <chart:SfChart.Watermark>
+        <chart:Watermark Canvas.ZIndex="-1"  HorizontalAlignment="Center" VerticalAlignment="Center">
+            <chart:Watermark.Content>
+                <TextBlock 
+                    Text="Climate Report" 
+                    FontSize="60" 
+                    Foreground="Gray" 
+                    Opacity="0.5">
+                </TextBlock>
+            </chart:Watermark.Content>
+        </chart:Watermark>
+    </chart:SfChart.Watermark>
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis PlotOffset="20" Header="Month"/>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis Header="Degree ( In Celsius )" RangePadding="Round"/>
+    </chart:SfChart.SecondaryAxis>
+
+    <!-- Add Series to the Chart-->
+    <chart:SplineSeries 
+        Label="Sports" 
+        ItemsSource="{Binding ClimateData}"
+        XBindingPath="Month" 
+        YBindingPath="Temperature">
+        <chart:SplineSeries.AdornmentsInfo>
+            <chart:ChartAdornmentInfo ShowMarker="True" Symbol="Ellipse" ShowLabel="True"/>
+        </chart:SplineSeries.AdornmentsInfo>
+    </chart:SplineSeries>
 
 </chart:SfChart>
 
@@ -74,11 +61,8 @@ ShowLabel="True"/>
 {% highlight C# %}
 
 private void Button_Click_1(object sender, RoutedEventArgs e)
-
 {
-
     ExportDemoChart.Print();
-
 }
 
 {% endhighlight %}
diff --git a/wpf/Charts/ScaleBreaks.md b/wpf/Charts/ScaleBreaks.md
index 133ea7f5f4..c80fa3464e 100644
--- a/wpf/Charts/ScaleBreaks.md
+++ b/wpf/Charts/ScaleBreaks.md
@@ -26,37 +26,33 @@ Applying scale breaks helps in proper visualization of all the data points.
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis>                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="300"
-
-End="8500">
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis>
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak
+                Start="300"
+                End="8500">
+            </chart:ChartAxisScaleBreak>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
+
 NumericalAxis axis = new NumericalAxis();
 
 ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak();
 
 scaleBreak.Start = 300;
-
 scaleBreak.End = 8500;
 
 axis.AxisScaleBreaks.Add(scaleBreak);
 
 chart.SecondaryAxis = axis;
 
+
 {% endhighlight %}
 
 {% endtabs %}
@@ -85,19 +81,11 @@ Range [0,350] takes nearly 4/5th of the axis height and the range [8000,10000] t
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis x:Name="axis" BreakPosition="DataCount">                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="350"
-
-End="8000">  
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis x:Name="axis" BreakPosition="DataCount">
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak  Start="350" End="8000"/>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -111,7 +99,6 @@ axis.BreakPosition = ScaleBreakPosition.DataCount;
 ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak();
 
 scaleBreak.Start = 350;
-
 scaleBreak.End = 8000;
 
 axis.AxisScaleBreaks.Add(scaleBreak);
@@ -134,19 +121,11 @@ chart.SecondaryAxis = axis;
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis x:Name="axis" BreakPosition="Scale">                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="350"
-
-End="8000">  
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis x:Name="axis" BreakPosition="Scale">
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak  Start="350" End="8000"/>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -154,13 +133,11 @@ End="8000">
 {% highlight c# %}
 
 NumericalAxis axis = new NumericalAxis();
-
 axis.BreakPosition = ScaleBreakPosition.Scale;
 
 ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak();
 
 scaleBreak.Start = 350;
-
 scaleBreak.End = 8000;
 
 axis.AxisScaleBreaks.Add(scaleBreak);
@@ -187,27 +164,23 @@ In the below image, each break is given percent value as 50. First break is posi
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis x:Name="axis" BreakPosition="Percent ">                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="300"
-
-End="8000" BreakPercent="50"> 
-
-</chart:ChartAxisScaleBreak>                     
-
-<chart:ChartAxisScaleBreak Start="12500"
-
-End="19000" BreakPercent="50"> 
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis.AxisScaleBreaks>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis
+        x:Name="axis"
+        BreakPosition="Percent">
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak
+                Start="300"
+                End="8000"
+                BreakPercent="50">
+            </chart:ChartAxisScaleBreak>
+
+            <chart:ChartAxisScaleBreak
+                Start="12500"
+                End="19000"
+                BreakPercent="50">
+            </chart:ChartAxisScaleBreak>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -219,23 +192,15 @@ NumericalAxis axis = new NumericalAxis();
 axis.BreakPosition = ScaleBreakPosition.Percent;
 
 ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak();
-
 scaleBreak1.Start = 300;
-
 scaleBreak1.End = 8000;
-
 scaleBreak1.BreakPercent = 50;
-
 axis.AxisScaleBreaks.Add(scaleBreak1);
 
 ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak();
-
 scaleBreak2.Start = 12500;
-
 scaleBreak2.End = 19000;
-
 scaleBreak2.BreakPercent = 50;
-
 axis.AxisScaleBreaks.Add(scaleBreak2);
 
 chart.SecondaryAxis = axis;
@@ -256,27 +221,12 @@ Multiple breaks can be included in the chart.
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis>                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="300"
-
-End="8000"> 
-
-</chart:ChartAxisScaleBreak>                   
-
-<chart:ChartAxisScaleBreak Start="12500"
-
-End="19000"> 
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis.AxisScaleBreaks>
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis>
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak Start="300" End="8000"/>
+            <chart:ChartAxisScaleBreak Start="12500" End="19000"/>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -286,19 +236,13 @@ End="19000">
 NumericalAxis axis = new NumericalAxis();
 
 ChartAxisScaleBreak scaleBreak1 = new ChartAxisScaleBreak();
-
 scaleBreak1.Start = 300;
-
 scaleBreak1.End = 8000;
-
 axis.AxisScaleBreaks.Add(scaleBreak1);
 
 ChartAxisScaleBreak scaleBreak2 = new ChartAxisScaleBreak();
-
 scaleBreak2.Start = 12500;
-
 scaleBreak2.End = 19000;
-
 axis.AxisScaleBreaks.Add(scaleBreak2);
 
 chart.SecondaryAxis = axis;
@@ -321,25 +265,19 @@ Line type such as [`Wave`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
 {% highlight xaml %}
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis>                                
-
-<chart:NumericalAxis.AxisScaleBreaks>                     
-
-<chart:ChartAxisScaleBreak Start="300"  BreakSpacing="12"
-
-End="8500" LineType="Wave" 
-
-Fill="PaleTurquoise"
-
-Stroke="Black" StrokeThickness="1.2" >  
-
-</chart:ChartAxisScaleBreak>
-
-</chart:NumericalAxis.AxisScaleBreaks> 
-
-</chart:NumericalAxis>
-
+    <chart:NumericalAxis>
+        <chart:NumericalAxis.AxisScaleBreaks>
+            <chart:ChartAxisScaleBreak
+                Start="300"
+                End="8500"
+                BreakSpacing="12"
+                LineType="Wave"
+                Fill="PaleTurquoise"
+                Stroke="Black"
+                StrokeThickness="1.2">
+            </chart:ChartAxisScaleBreak>
+        </chart:NumericalAxis.AxisScaleBreaks>
+    </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -351,17 +289,11 @@ NumericalAxis axis = new NumericalAxis();
 ChartAxisScaleBreak scaleBreak = new ChartAxisScaleBreak();
 
 scaleBreak.Start = 300;
-
 scaleBreak.End = 8500;
-
 scaleBreak.LineType = BreakLineType.Wave;
-
 scaleBreak.BreakSpacing = 12;
-
 scaleBreak.Fill = new SolidColorBrush(Colors.PaleTurquoise);
-
 scaleBreak.Stroke = new SolidColorBrush(Colors.Black);
-
 scaleBreak.StrokeThickness = 1.2;
 
 axis.AxisScaleBreaks.Add(scaleBreak);
diff --git a/wpf/Charts/Serialization.md b/wpf/Charts/Serialization.md
index 42ed346ea3..4b330cdd77 100644
--- a/wpf/Charts/Serialization.md
+++ b/wpf/Charts/Serialization.md
@@ -47,51 +47,58 @@ Deserialize the XML file from the given stream and returns the SfChart control o
 
 {% highlight xaml %}
 
- <Grid >
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="350" />
-            <ColumnDefinition Width="350" />
-        </Grid.ColumnDefinitions>
-        
-        <!--Serialize-->
-        <chart:SfChart Grid.Column="0" Margin="10" x:Name="chart">
-
-            <chart:SfChart.PrimaryAxis>
-                <chart:CategoryAxis />
-            </chart:SfChart.PrimaryAxis>
-            
-            <chart:SfChart.SecondaryAxis>
-                <chart:NumericalAxis />
-            </chart:SfChart.SecondaryAxis>
-            
-            <chart:ColumnSeries ItemsSource="{Binding CategoricalDatas}" XBindingPath="Category"
-                                YBindingPath="Value"  EnableAnimation="True">
-                <chart:ColumnSeries.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo ShowLabel="True" ShowMarker="True" Symbol="Ellipse" Foreground="White"/>
-                </chart:ColumnSeries.AdornmentsInfo>
-            </chart:ColumnSeries>
-        </chart:SfChart>
-
-         <!--Assign the DeSerialize Chart-->
-        <chart:SfChart Grid.Column="1" x:Name="deserializedChart"/>
- 
-    </Grid>
+<Grid>
+    <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="350"/>
+        <ColumnDefinition Width="350"/>
+    </Grid.ColumnDefinitions>
+
+    <!--Serialize-->
+    <chart:SfChart Grid.Column="0" Margin="10" x:Name="chart">
+
+        <chart:SfChart.PrimaryAxis>
+            <chart:CategoryAxis/>
+        </chart:SfChart.PrimaryAxis>
+
+        <chart:SfChart.SecondaryAxis>
+            <chart:NumericalAxis />
+        </chart:SfChart.SecondaryAxis>
+
+        <chart:ColumnSeries 
+            ItemsSource="{Binding CategoricalDatas}" 
+            XBindingPath="Category"                               
+            YBindingPath="Value"  
+            EnableAnimation="True">
+            <chart:ColumnSeries.AdornmentsInfo>
+                <chart:ChartAdornmentInfo 
+                    ShowLabel="True" 
+                    ShowMarker="True" 
+                    Symbol="Ellipse" 
+                    Foreground="White">
+                </chart:ChartAdornmentInfo>
+            </chart:ColumnSeries.AdornmentsInfo>
+        </chart:ColumnSeries>
+    </chart:SfChart>
+
+    <!--Assign the DeSerialize Chart-->
+    <chart:SfChart Grid.Column="1" x:Name="deserializedChart"/>
+</Grid>
 
     {% endhighlight %}
 
 {% highlight c# %}
 
-        //Action to Serialize the Chart
-       private void Button_Click(object sender, RoutedEventArgs e)
-        {
-            chart.Serialize();         
-        }
-
-        //Action to Deserialize the Chart
-        private void Load_Click(object sender, RoutedEventArgs e)
-        {
-            deserializedChart = (SfChart)chart.Deserialize();
-        }        
+//Action to Serialize the Chart
+private void Button_Click(object sender, RoutedEventArgs e)
+{
+    chart.Serialize();         
+}
+
+//Action to Deserialize the Chart
+private void Load_Click(object sender, RoutedEventArgs e)
+{
+    deserializedChart = (SfChart)chart.Deserialize();
+}        
 
 {% endhighlight %}
 
diff --git a/wpf/Charts/Serialization_images/wpf-chart-serialization.PNG b/wpf/Charts/Serialization_images/wpf-chart-serialization.PNG
index bc9eaa6ff9..f3593f2050 100644
Binary files a/wpf/Charts/Serialization_images/wpf-chart-serialization.PNG and b/wpf/Charts/Serialization_images/wpf-chart-serialization.PNG differ
diff --git a/wpf/Charts/SeriesTypes/Area.md b/wpf/Charts/SeriesTypes/Area.md
index 6f7d6372a9..a230b05eec 100644
--- a/wpf/Charts/SeriesTypes/Area.md
+++ b/wpf/Charts/SeriesTypes/Area.md
@@ -7,7 +7,7 @@ control: SfChart
 documentation: ug
 ---
 
-# Area in WPF Charts (SfChart)
+# Area Series in WPF Charts (SfChart)
 
 ## Area Chart
 [`AreaSeries`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.AreaSeries.html#) is rendered using a collection of line segments connected to form a closed loop area, filled with the specified color.
@@ -18,9 +18,7 @@ The following code example initializes the AreaSeries:
 
 {% highlight xaml %}
 
-<chart:AreaSeries XBindingPath="FruitName" Interior="#BCBCBC" 
-
-YBindingPath="People" ItemsSource="{Binding Fruits}" >   
+<chart:AreaSeries XBindingPath="FruitName" Interior="#BCBCBC" YBindingPath="People" ItemsSource="{Binding Fruits}" >   
 
 {% endhighlight %}
 
@@ -28,17 +26,11 @@ YBindingPath="People" ItemsSource="{Binding Fruits}" >
 
 AreaSeries series = new AreaSeries()
 {
-
     ItemsSource = new ViewModel().Fruits,
-
     XBindingPath = "FruitName",
-
     YBindingPath = "People",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
-
 chart.Series.Add(series);
 
 {% endhighlight %}
@@ -57,11 +49,12 @@ N> You can refer to our [WPF Area Chart](https://www.syncfusion.com/wpf-controls
 
 {% highlight xaml %}
 
-<chart:StepAreaSeries  Interior="#7F7F7F"  
-
-ItemsSource="{Binding SneakersDetail}" XBindingPath="Brand" 
-
-YBindingPath="ItemsCount"/>
+<chart:StepAreaSeries  
+    Interior="#7F7F7F"  
+    ItemsSource="{Binding SneakersDetail}" 
+    XBindingPath="Brand"
+    YBindingPath="ItemsCount">
+</chart:StepAreaSeries>
 
 {% endhighlight %}
 
@@ -69,15 +62,10 @@ YBindingPath="ItemsCount"/>
 
 StepAreaSeries series = new StepAreaSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -98,11 +86,13 @@ If you wish to draw the open area series (Area with stroke only at top), SfChart
 
 {% highlight xaml %}
 
-<chart:AreaSeries  IsClosed="False"
-
-XBindingPath="FruitName" Interior="#BCBCBC" 
-
-YBindingPath="People" ItemsSource="{Binding Fruits}" /> 
+<chart:AreaSeries  
+    IsClosed="False"
+    XBindingPath="FruitName" 
+    Interior="#BCBCBC" 
+    YBindingPath="People" 
+    ItemsSource="{Binding Fruits}">
+</chart:AreaSeries>
 
 {% endhighlight %}
 
@@ -110,19 +100,12 @@ YBindingPath="People" ItemsSource="{Binding Fruits}" />
 
 AreaSeries series = new AreaSeries()
 {
-
     ItemsSource = new ViewModel().Fruits,
-
     XBindingPath = "FruitName",
-
     YBindingPath = "People",
-
     IsClosed = true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
-
 chart.Series.Add(series);
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/BubbleandScatter.md b/wpf/Charts/SeriesTypes/BubbleandScatter.md
index 2f7d1d6a63..9dfb84f54d 100644
--- a/wpf/Charts/SeriesTypes/BubbleandScatter.md
+++ b/wpf/Charts/SeriesTypes/BubbleandScatter.md
@@ -19,13 +19,15 @@ The size of the bubble series is relative proportional to the value bind with th
 
 {% highlight xaml %}
 
-<chart:BubbleSeries  ItemsSource="{Binding Fruits}"  XBindingPath="FruitName" 
-
-YBindingPath="People"   Size="Size" MinimumRadius="5" 
-
-MaximumRadius="10"
-
-Interior="#BCBCBC" />
+<chart:BubbleSeries  
+    ItemsSource="{Binding Fruits}"  
+    XBindingPath="FruitName" 
+    YBindingPath="People"   
+    Size="Size" 
+    MinimumRadius="5" 
+    MaximumRadius="10"
+    Interior="#BCBCBC">
+</chart:BubbleSeries>
 
 {% endhighlight %}
 
@@ -33,21 +35,13 @@ Interior="#BCBCBC" />
 
 BubbleSeries series = new BubbleSeries()
 {
-
     ItemsSource = new ViewModel().Fruits,
-
     XBindingPath = "FruitName",
-
     YBindingPath = "People",
-
     Size = "Size",
-
     MinimumRadius = 5,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
-
 chart.Series.Add(series);
 
 {% endhighlight %}
@@ -67,16 +61,13 @@ The following code illustrates how to set the value to the property.
 
 {% highlight xaml %}
 
-<chart:BubbleSeries ShowZeroBubbles="True" >
-
-</chart:BubbleSeries>
+<chart:BubbleSeries ShowZeroBubbles="True"></chart:BubbleSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BubbleSeries series = new BubbleSeries();
-
 series.ShowZeroBubbles = true;
 
 {% endhighlight %}
@@ -91,16 +82,13 @@ The following code example and screenshots describes when [`ShowZeroBubbles`](ht
 
 {% highlight xaml %}
 
-<chart:BubbleSeries ShowZeroBubbles="False" >
-
-</chart:BubbleSeries>
+<chart:BubbleSeries ShowZeroBubbles="False"></chart:BubbleSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BubbleSeries series = new BubbleSeries();
-
 series.ShowZeroBubbles = false;
 
 {% endhighlight %}
@@ -117,11 +105,14 @@ series.ShowZeroBubbles = false;
 
 {% highlight xaml %}
 
-<chart:ScatterSeries Interior="#4A4A4A" ScatterHeight="4" ScatterWidth="4" 
-
-ItemsSource="{Binding DataPoints}" XBindingPath="Eruptions" 
-
-YBindingPath="WaitingTime"/>
+<chart:ScatterSeries 
+    Interior="#4A4A4A" 
+    ScatterHeight="4" 
+    ScatterWidth="4" 
+    ItemsSource="{Binding DataPoints}" 
+    XBindingPath="Eruptions"
+    YBindingPath="WaitingTime">
+</chart:ScatterSeries>
 
 {% endhighlight %}
 
@@ -129,21 +120,13 @@ YBindingPath="WaitingTime"/>
 
 ScatterSeries series = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().DataPoints,
-
     XBindingPath = "Eruptions",
-
     YBindingPath = "WaitingTime",
-
     ScatterHeight = 4,
-
     ScatterWidth = 4,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
-
 chart.Series.Add(series);
 
 {% endhighlight %}
@@ -154,4 +137,4 @@ chart.Series.Add(series);
 
 ## See also
 
-[`How to change the size and color of scatter series`](https://www.syncfusion.com/kb/3857/how-to-change-the-size-and-color-of-scatter-series)
+[`How to change the size and color of scatter series?`](https://www.syncfusion.com/kb/3857/how-to-change-the-size-and-color-of-scatter-series)
diff --git a/wpf/Charts/SeriesTypes/ColumnandBar.md b/wpf/Charts/SeriesTypes/ColumnandBar.md
index c29c5dfa31..9055aba28b 100644
--- a/wpf/Charts/SeriesTypes/ColumnandBar.md
+++ b/wpf/Charts/SeriesTypes/ColumnandBar.md
@@ -17,9 +17,12 @@ documentation: ug
 
 {% highlight xaml %}
 
-<chart:ColumnSeries Interior="#7F7F7F" ItemsSource="{Binding SneakersDetail}"           
-
-XBindingPath="Brand" YBindingPath="ItemsCount1"   />
+<chart:ColumnSeries 
+    Interior="#7F7F7F" 
+    ItemsSource="{Binding SneakersDetail}"
+    XBindingPath="Brand" 
+    YBindingPath="ItemsCount1">
+</chart:ColumnSeries>
 
 {% endhighlight %}
 
@@ -27,15 +30,10 @@ XBindingPath="Brand" YBindingPath="ItemsCount1"   />
 
 ColumnSeries series = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount1",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 chart.Series.Add(series);
@@ -56,9 +54,11 @@ N> You can explore our [WPF Column Chart](https://www.syncfusion.com/wpf-control
 
 {% highlight xaml %}
 
-<chart:BarSeries ItemsSource="{Binding CategoricalDatas}" XBindingPath="Category" 
-
-YBindingPath="Value" Interior="#7F7F7F" />
+<chart:BarSeries 
+    ItemsSource="{Binding CategoricalDatas}" 
+    XBindingPath="Category" 
+    YBindingPath="Value" Interior="#7F7F7F">
+</chart:BarSeries>
 
 {% endhighlight %}
 
@@ -66,15 +66,10 @@ YBindingPath="Value" Interior="#7F7F7F" />
 
 BarSeries series = new BarSeries()
 {
-
     ItemsSource = new ViewModel().CategoricalDatas,
-
     XBindingPath = "Category",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
 
 {% endhighlight %}
@@ -100,7 +95,6 @@ N> You can explore our [WPF Bar Chart](https://www.syncfusion.com/wpf-controls/c
 {% highlight c# %}
 
 ColumnSeries series = new ColumnSeries()
-
 ChartSeriesBase.SetSpacing(series, 0.8);
 
 {% endhighlight %}
@@ -118,11 +112,8 @@ ChartSeriesBase.SetSpacing(series, 0.8);
 {% highlight xaml %}
 
 <Chart:SfChart >
-
-<Chart:ColumnSeries SegmentSpacing="0.6"/>
-
-<Chart:ColumnSeries SegmentSpacing="0.6"/>
-
+    <Chart:ColumnSeries SegmentSpacing="0.6"/>
+    <Chart:ColumnSeries SegmentSpacing="0.6"/>
 </Chart:SfChart>
 
 {% endhighlight %}
@@ -132,23 +123,15 @@ ChartSeriesBase.SetSpacing(series, 0.8);
 SfChart chart = new SfChart();
 
 ColumnSeries series1 = new ColumnSeries()
-
 {
-
     SegmentSpacing = 0.6,
-
 };
-
 chart.Series.Add(series1);
 
 ColumnSeries series2 = new ColumnSeries()
-
 {
-
     SegmentSpacing = 0.6
-
 };
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Custom.md b/wpf/Charts/SeriesTypes/Custom.md
index 4a6dccc974..4337063caa 100644
--- a/wpf/Charts/SeriesTypes/Custom.md
+++ b/wpf/Charts/SeriesTypes/Custom.md
@@ -38,53 +38,39 @@ The following code example illustrates the use of [`CustomTemplate`](https://hel
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
+  <syncfusion:SfChart x:Name="chart">
      <syncfusion:SfChart.Resources>
-
-            <local:ScatterInteriorConverter x:Key="scatterInteriorConverter"/>
-
-            <local:ScatterAngleConverter x:Key="scatterAngleConverter"/>
-
-            <DataTemplate x:Key="seriesTemplate">
-
-                <Canvas>
-
-                    <Path Fill="{Binding Converter={StaticResource scatterInteriorConverter}}"
-                              
-                          Stretch="Fill" Height="{Binding ScatterHeight}"
-                              
-                          Width="{Binding ScatterWidth}" RenderTransformOrigin="0.5,0.5"
-                              
-                          Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"
-                              
-                          Data="M20.125,32L0.5,12.375L10.3125,12.375L10.3125,
-                              
-                              0.5L29.9375,0.5L29.9375,12.375L39.75,12.375z">
-
-                          <Path.RenderTransform>
-
-                                <RotateTransform Angle="{Binding Converter={StaticResource scatterAngleConverter}}"/>
-
-                          </Path.RenderTransform>
-
-                        </Path>
-
-                    </Canvas>
-
-                </DataTemplate>
-
-    </syncfusion:SfChart.Resources>
-
-    <syncfusion:ScatterSeries  ScatterHeight="20" ScatterWidth="20" Interior="Gray"
-                                       
-                                XBindingPath="Year" YBindingPath="Count" 
-                                       
-                                ItemsSource="{Binding Data}"
-                                
-                                CustomTemplate="{StaticResource seriesTemplate}"/>
-
-</syncfusion:SfChart>
+         <local:ScatterInteriorConverter x:Key="scatterInteriorConverter"/>
+         <local:ScatterAngleConverter x:Key="scatterAngleConverter"/>         
+         <DataTemplate x:Key="seriesTemplate">
+             <Canvas>
+                 <Path 
+                     Fill="{Binding Converter={StaticResource scatterInteriorConverter}}"
+                     Stretch="Fill" 
+                     Height="{Binding ScatterHeight}"
+                     Width="{Binding ScatterWidth}" 
+                     RenderTransformOrigin="0.5,0.5" 
+                     Canvas.Left="{Binding RectX}" 
+                     Canvas.Top="{Binding RectY}" 
+                     Data="M20.125,32L0.5,12.375L10.3125,12.375L10.3125, 
+                         0.5L29.9375,0.5L29.9375,12.375L39.75,12.375z">
+                     <Path.RenderTransform>
+                         <RotateTransform Angle="{Binding Converter={StaticResource scatterAngleConverter}}"/>
+                     </Path.RenderTransform>
+                 </Path>
+             </Canvas>
+         </DataTemplate>
+     </syncfusion:SfChart.Resources>
+
+     <syncfusion:ScatterSeries  
+         ScatterHeight="20" 
+         ScatterWidth="20" 
+         Interior="Gray"    
+         XBindingPath="Year" 
+         YBindingPath="Count" 
+         ItemsSource="{Binding Data}"
+         CustomTemplate="{StaticResource seriesTemplate}"/>
+ </syncfusion:SfChart>
 
 {% endhighlight %}
 
@@ -92,21 +78,13 @@ The following code example illustrates the use of [`CustomTemplate`](https://hel
 
 ScatterSeries series = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Year",
-
     YBindingPath = "Count",
-
     ScatterHeight = 20,
-
     ScatterWidth = 20,
-
     Interior = new SolidColorBrush(Colors.DarkGray),
-
     CustomTemplate = chart.Resources["seriesTemplate"] as DataTemplate
-
 };
 
 chart.Series.Add(series);
@@ -123,6 +101,5 @@ The BarSeries, BubbleSeries, ColumnSeries, LineSeries, ScatterSeries and StepLin
 
 ## See also
 
-[`How to customize the default shape of any series with the required shapes`](https://www.syncfusion.com/kb/3853/how-to-customize-the-default-shape-of-any-series-with-the-required-shapes)
-
-[`How to create the Tornado Chart in WPF Charts`](https://www.syncfusion.com/kb/11657/how-to-create-the-tornado-chart-in-wpf-charts)
\ No newline at end of file
+[`How to customize the default shape of any series with the required shapes?`](https://www.syncfusion.com/kb/3853/how-to-customize-the-default-shape-of-any-series-with-the-required-shapes)
+[`How to create the Tornado Chart in WPF Charts?`](https://www.syncfusion.com/kb/11657/how-to-create-the-tornado-chart-in-wpf-charts)
\ No newline at end of file
diff --git a/wpf/Charts/SeriesTypes/Distribution.md b/wpf/Charts/SeriesTypes/Distribution.md
index 7643931c3f..962e22dbc6 100644
--- a/wpf/Charts/SeriesTypes/Distribution.md
+++ b/wpf/Charts/SeriesTypes/Distribution.md
@@ -19,17 +19,13 @@ The following code example shows how to add the HistogramSeries:
 
 {% highlight xaml %}
 
-<chart:HistogramSeries x:Name="histogramSeries" 
-
-HistogramInterval="5" 
-
-Interior="#BCBCBC"
-
-ItemsSource="{Binding Product}"
-
-XBindingPath="Price" 
-
-YBindingPath="Value"/>
+<chart:HistogramSeries 
+    x:Name="histogramSeries" 
+    HistogramInterval="5" 
+    Interior="#BCBCBC"
+    ItemsSource="{Binding Product}"
+    XBindingPath="Price" 
+    YBindingPath="Value"/>
 
 {% endhighlight %}
 
@@ -37,17 +33,11 @@ YBindingPath="Value"/>
 
 HistogramSeries series = new HistogramSeries()
 {
-
     ItemsSource = new ViewModel().Product,
-
     XBindingPath = "Price",
-
     YBindingPath = "Value",
-
     HistogramInterval = 5,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 chart.Series.Add(series);
@@ -65,19 +55,14 @@ You can customize interval using [`HistogramInterval`](https://help.syncfusion.c
 
 {% highlight xaml %}
 
-<chart:HistogramSeries x:Name="histogramSeries" 
-
-HistogramInterval="5"
-
-ShowNormalDistributionCurve="False"
-
-Interior="#BCBCBC"
-
-ItemsSource="{Binding Product}"
-
-XBindingPath="Price" 
-
-YBindingPath="Value"/>
+<chart:HistogramSeries 
+    x:Name="histogramSeries" 
+    HistogramInterval="5"
+    ShowNormalDistributionCurve="False"
+    Interior="#BCBCBC"
+    ItemsSource="{Binding Product}"
+    XBindingPath="Price" 
+    YBindingPath="Value"/>
 
 {% endhighlight %}
 
@@ -85,19 +70,12 @@ YBindingPath="Value"/>
 
 HistogramSeries series = new HistogramSeries()
 {
-
     ItemsSource = new ViewModel().Product,
-
     XBindingPath = "Price",
-
     YBindingPath = "Value",
-
     HistogramInterval = 5,
-
     ShowNormalDistributionCurve = false,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 chart.Series.Add(series);
@@ -123,21 +101,15 @@ You can customize the normal distribution curve by using the [`CurveLineStyle`](
 </Style>
 ...
 
-<chart:HistogramSeries x:Name="histogramSeries" 
-
-HistogramInterval="5"
-
-ShowNormalDistributionCurve="True"
-
-CurveLineStyle="{StaticResource CurveColorStyle}"
-
-Interior="LightSkyBlue"
-
-ItemsSource="{Binding Product}"
-
-XBindingPath="Price" 
-
-YBindingPath="Value"/>
+<chart:HistogramSeries 
+    x:Name="histogramSeries" 
+    HistogramInterval="5"
+    ShowNormalDistributionCurve="True"
+    CurveLineStyle="{StaticResource CurveColorStyle}"
+    Interior="LightSkyBlue"
+    ItemsSource="{Binding Product}"
+    XBindingPath="Price" 
+    YBindingPath="Value"/>
 
 {% endhighlight %}
 
@@ -146,21 +118,13 @@ YBindingPath="Value"/>
 ...
 HistogramSeries series = new HistogramSeries()
 {
-
     ItemsSource = new ViewModel().Product,
-
     XBindingPath = "Price",
-
     YBindingPath = "Value",
-
     HistogramInterval = 5,
-
     ShowNormalDistributionCurve = True,
-
     CurveLineStyle = histogramChart.Resources["CurveColorStyle"] as Style,
-
     Interior = new SolidColorBrush(new SolidColorBrush(Colors.LightSkyBlue))
-
 };
 
 chart.Series.Add(series);
diff --git a/wpf/Charts/SeriesTypes/EmptyPoints.md b/wpf/Charts/SeriesTypes/EmptyPoints.md
index 7522186ba8..bb45f2ab64 100644
--- a/wpf/Charts/SeriesTypes/EmptyPoints.md
+++ b/wpf/Charts/SeriesTypes/EmptyPoints.md
@@ -13,12 +13,12 @@ The data collection that is passed to the chart can have NaN or Null values that
 
 {% highlight C# %}
 
-    Fruits.Add(new Model() { FruitName = "Mango", People = 5 });
-    Fruits.Add(new Model() { FruitName = "Apple", People = 27 });
-    Fruits.Add(new Model() { FruitName = "Orange", People = Double.NaN });
-    Fruits.Add(new Model() { FruitName = "Grapes", People = 15 });
-    Fruits.Add(new Model() { FruitName = "Banana", People = 5 });
-    Fruits.Add(new Model() { FruitName = "Blueberry", People = 20 });
+Fruits.Add(new Model() { FruitName = "Mango", People = 5 });
+Fruits.Add(new Model() { FruitName = "Apple", People = 27 });
+Fruits.Add(new Model() { FruitName = "Orange", People = Double.NaN });
+Fruits.Add(new Model() { FruitName = "Grapes", People = 15 });
+Fruits.Add(new Model() { FruitName = "Banana", People = 5 });
+Fruits.Add(new Model() { FruitName = "Blueberry", People = 20 });
 
 {% endhighlight %}
 
@@ -48,40 +48,39 @@ The following code examples shows how to display the empty points:
 
 {% highlight xaml %}
 
-    <chart:LineSeries XBindingPath="FruitName" Interior="#BCBCBC" YBindingPath="People" 
-
-    ShowEmptyPoints="True" ItemsSource="{Binding Fruits}" >
-
-        <chart:LineSeries.AdornmentsInfo>
-
-            <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
-
-        </chart:LineSeries.AdornmentsInfo>
-
-    </chart:LineSeries>
+<chart:LineSeries 
+    XBindingPath="Name"
+    Interior="#BCBCBC"
+    YBindingPath="Height"
+    ShowEmptyPoints="True"
+    ItemsSource="{Binding Data}">
+    <chart:LineSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
+    </chart:LineSeries.AdornmentsInfo>
+</chart:LineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    LineSeries series = new LineSeries()
-    {   
-        ItemsSource = new ViewModel().Fruits,
-        XBindingPath = "FruitName",
-        YBindingPath = "People",
-        ShowEmptyPoints = true,
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-    };
+LineSeries series = new LineSeries()
+{
+    ItemsSource = new ViewModel().Fruits,
+    XBindingPath = "FruitName",
+    YBindingPath = "People",
+    ShowEmptyPoints = true,
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition = AdornmentsLabelPosition.Auto
+};
 
-    ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowLabel = true,
-        LabelPosition = AdornmentsLabelPosition.Auto
-    };
-
-    series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-    chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -98,40 +97,41 @@ The following code example shows the [`EmptyPointValue`](https://help.syncfusion
 
 {% highlight xaml %}
 
-    <chart:LineSeries XBindingPath="FruitName" Interior="#BCBCBC" YBindingPath="People" 
-
-    ShowEmptyPoints="True" EmptyPointValue="Average" ItemsSource="{Binding Fruits}" >
-
-        <chart:LineSeries.AdornmentsInfo>
+<chart:LineSeries 
+    XBindingPath="FruitName" 
+    Interior="#BCBCBC" 
+    YBindingPath="People"
+    ShowEmptyPoints="True" 
+    EmptyPointValue="Average" 
+    ItemsSource="{Binding Fruits}">
 
-            <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
-
-        </chart:LineSeries.AdornmentsInfo>
-
-    </chart:LineSeries>
+    <chart:LineSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
+    </chart:LineSeries.AdornmentsInfo>
+</chart:LineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    LineSeries series = new LineSeries()
-    {
-        ItemsSource = new ViewModel().Fruits,
-        XBindingPath = "FruitName",
-        YBindingPath = "People",
-        ShowEmptyPoints = true,
-        EmptyPointValue = EmptyPointValue.Average,
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-    };
-
-    ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowLabel = true,
-        LabelPosition = AdornmentsLabelPosition.Auto
-    };
-
-    series.AdornmentsInfo = adornmentInfo;
-    chart.Series.Add(series);
+LineSeries series = new LineSeries()
+{
+    ItemsSource = new ViewModel().Fruits,
+    XBindingPath = "FruitName",
+    YBindingPath = "People",
+    ShowEmptyPoints = true,
+    EmptyPointValue = EmptyPointValue.Average,
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition = AdornmentsLabelPosition.Auto
+};
+
+series.AdornmentsInfo = adornmentInfo;
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -158,24 +158,27 @@ The following code example illustrates the use of [`EmptyPointStyle`](https://he
 
 {% highlight xaml %}
 
-    <chart:ColumnSeries  ItemsSource="{Binding EmptyPointDatas}" Interior="#bcbcbc" XBindingPath="Category" 
-
-     YBindingPath="Value" ShowEmptyPoints="True"/>
+<chart:ColumnSeries  
+    ItemsSource="{Binding EmptyPointDatas}" 
+    Interior="#bcbcbc" 
+    XBindingPath="Category"     
+    YBindingPath="Value" 
+    ShowEmptyPoints="True"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ColumnSeries series = new ColumnSeries()
-    {
-        ItemsSource = new ViewModel().EmptyPointDatas,
-        XBindingPath = "Category",
-        YBindingPath = "Value",
-        ShowEmptyPoints = true,
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-    };
+ColumnSeries series = new ColumnSeries()
+{
+    ItemsSource = new ViewModel().EmptyPointDatas,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+    ShowEmptyPoints = true,
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+};
 
-    chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -194,42 +197,43 @@ This option is used to add Symbol for the empty points as in the below code exam
 
 {% highlight xaml %}
 
-    <chart:LineSeries XBindingPath="FruitName" Interior="#BCBCBC" YBindingPath="People" 
-
-    ShowEmptyPoints="True" EmptyPointValue="Average" EmptyPointStyle="Symbol" ItemsSource="{Binding Fruits}" >
-
-        <chart:LineSeries.AdornmentsInfo>
-
-            <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
-
-        </chart:LineSeries.AdornmentsInfo>
-
-    </chart:LineSeries>
+<chart:LineSeries 
+    XBindingPath="FruitName" 
+    Interior="#BCBCBC" 
+    YBindingPath="People"    
+    ShowEmptyPoints="True" 
+    EmptyPointValue="Average" 
+    EmptyPointStyle="Symbol" 
+    ItemsSource="{Binding Fruits}">
+    <chart:LineSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
+    </chart:LineSeries.AdornmentsInfo>
+</chart:LineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    LineSeries series = new LineSeries()
-    {
-        ItemsSource = new ViewModel().Fruits,
-        XBindingPath = "FruitName",
-        YBindingPath = "People",
-        ShowEmptyPoints = true,
-        EmptyPointValue = EmptyPointValue.Average,
-        EmptyPointStyle = EmptyPointStyle.Symbol,
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-    };
+LineSeries series = new LineSeries()
+{
+    ItemsSource = new ViewModel().Fruits,
+    XBindingPath = "FruitName",
+    YBindingPath = "People",
+    ShowEmptyPoints = true,
+    EmptyPointValue = EmptyPointValue.Average,
+    EmptyPointStyle = EmptyPointStyle.Symbol,
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+};
+
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowLabel = true,
+    LabelPosition = AdornmentsLabelPosition.Auto
+};
 
-    ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowLabel = true,
-        LabelPosition = AdornmentsLabelPosition.Auto
-    };
-
-    series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-    chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -246,44 +250,44 @@ This option combines above two options, which draw a symbol with defined [`Empty
 
 {% highlight xaml %}
 
-    <chart:LineSeries XBindingPath="FruitName" Interior="#BCBCBC" YBindingPath="People" 
-
-    ShowEmptyPoints="True" EmptyPointValue="Average" EmptyPointStyle="SymbolAndInterior"
-
-    EmptyPointInterior="Red" ItemsSource="{Binding Fruits}" >
-
-        <chart:LineSeries.AdornmentsInfo>
-
-            <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
-
-        </chart:LineSeries.AdornmentsInfo>
-
-    </chart:LineSeries>
+<chart:LineSeries 
+    XBindingPath="FruitName" 
+    Interior="#BCBCBC" 
+    YBindingPath="People" 
+    ShowEmptyPoints="True" 
+    EmptyPointValue="Average" 
+    EmptyPointStyle="SymbolAndInterior"
+    EmptyPointInterior="Red" 
+    ItemsSource="{Binding Fruits}">
+    <chart:LineSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo ShowLabel="True" LabelPosition="Auto"/>
+    </chart:LineSeries.AdornmentsInfo>
+</chart:LineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    LineSeries series = new LineSeries()
-    {
-        ItemsSource = new ViewModel().Fruits,
-        XBindingPath = "FruitName",
-        YBindingPath = "People",
-        ShowEmptyPoints = true,
-        EmptyPointValue = EmptyPointValue.Average,
-        EmptyPointStyle = EmptyPointStyle.SymbolAndInterior,
-        EmptyPointInterior = new SolidColorBrush(Colors.Red),
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-    };
-
-    ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowLabel = true,
-        LabelPosition = AdornmentsLabelPosition.Auto
-    };
-
-series.AdornmentsInfo = adornmentInfo;
-chart.Series.Add(series);
+ LineSeries series = new LineSeries()
+ {
+     ItemsSource = new ViewModel().Fruits,
+     XBindingPath = "FruitName",
+     YBindingPath = "People",
+     ShowEmptyPoints = true,
+     EmptyPointValue = EmptyPointValue.Average,
+     EmptyPointStyle = EmptyPointStyle.SymbolAndInterior,
+     EmptyPointInterior = new SolidColorBrush(Colors.Red),
+     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+ };
+
+ ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+ {
+     ShowLabel = true,
+     LabelPosition = AdornmentsLabelPosition.Auto
+ };
+
+ series.AdornmentsInfo = adornmentInfo;
+ chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -301,48 +305,59 @@ You can add any custom shape for the empty point symbol. The following code exam
 {% highlight xaml %}
 
  <syncfusion:SfChart x:Name="chart">
-    <syncfusion:SfChart.Resources>
-        <DataTemplate x:Key="symbolTemplate">
-            <Canvas>
-                        <Grid Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" >
-                            <Ellipse StrokeDashArray="1,1" Height="50"                                      
-                                     Width="50" Stroke="Gray" StrokeThickness="2"                                      
-                                     Margin="-15,-15,0,0" Fill="Transparent"/>
-
-                            <Ellipse  StrokeDashArray="1,3" Height="35" Width="35"                                      
-                                      Stroke="Gray" StrokeThickness="2" Margin="-15,-15,0,0"                                      
-                                      Fill="LightGray"/>
-                        </Grid>
+     <syncfusion:SfChart.Resources>
+         <DataTemplate x:Key="symbolTemplate">
+             <Canvas>
+                 <Grid 
+                     Canvas.Left="{Binding X}" 
+                     Canvas.Top="{Binding Y}" >
+                     <Ellipse 
+                         StrokeDashArray="1,1" 
+                         Height="50"
+                         Width="50" 
+                         Stroke="Gray" 
+                         StrokeThickness="2"
+                         Margin="-15,-15,0,0" 
+                         Fill="Transparent"/>
+                     <Ellipse  
+                         StrokeDashArray="1,3" 
+                         Height="35" 
+                         Width="35"
+                         Stroke="Gray" 
+                         StrokeThickness="2" 
+                         Margin="-15,-15,0,0" 
+                         Fill="LightGray"/>
+                 </Grid>
              </Canvas>
-        </DataTemplate>
+         </DataTemplate>
      </syncfusion:SfChart.Resources>
-
-    <syncfusion:LineSeries XBindingPath="XValue" Interior="#BCBCBC"                                    
-                           YBindingPath="YValue" ShowEmptyPoints="True"                                       
-                           EmptyPointValue="Average" EmptyPointStyle="Symbol"                                   
-                           EmptyPointInterior="Red" ItemsSource="{Binding Data}"                                   
-                           EmptyPointSymbolTemplate="{StaticResource symbolTemplate}"/>
-
-</syncfusion:SfChart>
+     <syncfusion:LineSeries XBindingPath="XValue" 
+         Interior="#BCBCBC"
+         YBindingPath="YValue" 
+         ShowEmptyPoints="True" 
+         EmptyPointValue="Average" 
+         EmptyPointStyle="Symbol"   
+         EmptyPointInterior="Red" 
+         ItemsSource="{Binding Data}"
+         EmptyPointSymbolTemplate="{StaticResource symbolTemplate}"/>
+ </syncfusion:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    LineSeries series = new LineSeries()
-    {
-
-        ItemsSource = new ViewModel().Fruits,
-        XBindingPath = "FruitName",
-        YBindingPath = "People",
-        Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)),
-        ShowEmptyPoints = true,
-        EmptyPointValue = EmptyPointValue.Average,
-        EmptyPointStyle = EmptyPointStyle.Symbol,
-        EmptyPointInterior =new SolidColorBrush(Colors.Red),
-        EmptyPointSymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate
-
-    };
+LineSeries series = new LineSeries()
+{
+    ItemsSource = new ViewModel().Fruits,
+    XBindingPath = "FruitName",
+    YBindingPath = "People",
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC)),
+    ShowEmptyPoints = true,
+    EmptyPointValue = EmptyPointValue.Average,
+    EmptyPointStyle = EmptyPointStyle.Symbol,
+    EmptyPointInterior = new SolidColorBrush(Colors.Red),
+    EmptyPointSymbolTemplate = chart.Resources["symbolTemplate"] as DataTemplate
+};
 
 chart.Series.Add(series);
 
diff --git a/wpf/Charts/SeriesTypes/ErrorBars.md b/wpf/Charts/SeriesTypes/ErrorBars.md
index 9e2a6ae8e5..dc63f2b021 100644
--- a/wpf/Charts/SeriesTypes/ErrorBars.md
+++ b/wpf/Charts/SeriesTypes/ErrorBars.md
@@ -20,20 +20,23 @@ The following code examples illustrates how to create error bar series:
 
 {% highlight xaml %}
 
-<chart:ScatterSeries ScatterWidth="20" ScatterHeight="20"  Label="Coal" 
-
-ItemsSource="{Binding EnergyProductions}" Interior="#BCBCBC"
-
-XBindingPath="ID" YBindingPath="Coal">
-
+<chart:ScatterSeries 
+    ScatterWidth="20" 
+    ScatterHeight="20"  
+    Label="Coal" 
+    ItemsSource="{Binding EnergyProductions}" 
+    Interior="#BCBCBC"
+    XBindingPath="ID" 
+    YBindingPath="Coal">
 </chart:ScatterSeries>
 
-<chart:ErrorBarSeries Name="Errorseries"   ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" YBindingPath="Coal" 
-
-VerticalErrorValue="50" HorizontalErrorValue="1" >
-
+<chart:ErrorBarSeries 
+    Name="Errorseries"   
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal" 
+    VerticalErrorValue="50" 
+    HorizontalErrorValue="1" >
 </chart:ErrorBarSeries>
 
 {% endhighlight %}
@@ -42,42 +45,26 @@ VerticalErrorValue="50" HorizontalErrorValue="1" >
 
 ScatterSeries series = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     ScatterWidth = 20,
-
     ScatterHeight = 20,
-
     Label ="Coal",
-
     ListenPropertyChange=true,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 1,
-
     VerticalErrorValue = 50
-
 };
 
 chart.Series.Add(series);
-
 chart.Series.Add(errorBar);
 
 {% endhighlight %}
@@ -99,13 +86,14 @@ To view horizontal error value, you can set the Mode as Horizontal as shown in t
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"   ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" YBindingPath="Coal"                                  
-
-VerticalErrorValue="50" HorizontalErrorValue="1" 
-
-Mode="Horizontal">
+<chart:ErrorBarSeries 
+    Name="Errorseries"
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal" 
+    VerticalErrorValue="50" 
+    HorizontalErrorValue="1" 
+    Mode="Horizontal"/>
 
 {% endhighlight %}
 
@@ -113,19 +101,12 @@ Mode="Horizontal">
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 1,
-
     VerticalErrorValue = 50,
-
     Mode = ErrorBarMode.Horizontal
-
 };
 
 chart.Series.Add(errorBar);
@@ -145,13 +126,14 @@ To view vertical error value, you can set the Mode as Vertical as shown in the b
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"   ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" YBindingPath="Coal" 
-
-VerticalErrorValue="50" HorizontalErrorValue="1" 
-
-Mode="Vertical">
+<chart:ErrorBarSeries 
+    Name="Errorseries"
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal" 
+    VerticalErrorValue="50" 
+    HorizontalErrorValue="1"
+    Mode="Vertical"/>
 
 {% endhighlight %}
 
@@ -159,19 +141,12 @@ Mode="Vertical">
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 1,
-
     VerticalErrorValue = 50,
-
     Mode = ErrorBarMode.Vertical
-
 };
 
 chart.Series.Add(errorBar);
@@ -203,16 +178,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Both">
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Both"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.HorizontalDirection = ErrorBarDirection.Both;
 
 chart.Series.Add(errorBar);
@@ -231,16 +203,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Minus">
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Minus"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.HorizontalDirection = ErrorBarDirection.Minus;
 
 chart.Series.Add(errorBar);
@@ -259,16 +228,13 @@ The following code illustrates how to set the [`HorizontalDirection`](https://he
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Plus">
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" HorizontalDirection="Plus"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.HorizontalDirection = ErrorBarDirection.Plus;
 
 chart.Series.Add(errorBar);
@@ -295,16 +261,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Both" >
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Both"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.VerticalDirection= ErrorBarDirection.Both;
 
 chart.Series.Add(errorBar);
@@ -323,16 +286,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Minus" >
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Minus"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.VerticalDirection= ErrorBarDirection.Minus;
 
 chart.Series.Add(errorBar);
@@ -351,16 +311,13 @@ The following code illustrates how to set the [`VerticalDirection`](https://help
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Plus" >
-
-</chart:ErrorBarSeries>
+<chart:ErrorBarSeries Name="Errorseries" VerticalDirection="Plus"></chart:ErrorBarSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 ErrorBarSeries errorBarSeries = new ErrorBarSeries();
-
 errorBarSeries.VerticalDirection= ErrorBarDirection.Plus;
 
 chart.Series.Add(errorBar);
@@ -389,17 +346,15 @@ N> The default error bar series is Fixed.
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"  
-
-ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" 
-
-YBindingPath="Coal" 
-
-VerticalErrorValue="40" HorizontalErrorValue="10" 
-
-Mode="Both" Type="Fixed">
+<chart:ErrorBarSeries 
+    Name="Errorseries"  
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal"
+    VerticalErrorValue="40" 
+    HorizontalErrorValue="10"
+    Mode="Both" 
+    Type="Fixed"/>
 
 {% endhighlight %}
 
@@ -407,21 +362,13 @@ Mode="Both" Type="Fixed">
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 10,
-
     VerticalErrorValue = 40,
-
     Mode = ErrorBarMode.Both,
-
     Type = ErrorBarType.Fixed
-
 };
 
 chart.Series.Add(errorBar);
@@ -438,17 +385,15 @@ chart.Series.Add(errorBar);
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"  
-
-ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" 
-
-YBindingPath="Coal" 
-
-VerticalErrorValue="40" HorizontalErrorValue="10" 
-
-Mode="Both" Type="Percentage">
+<chart:ErrorBarSeries 
+    Name="Errorseries"  
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal"
+    VerticalErrorValue="40" 
+    HorizontalErrorValue="10"
+    Mode="Both" 
+    Type="Percentage"/>
 
 {% endhighlight %}
 
@@ -456,21 +401,13 @@ Mode="Both" Type="Percentage">
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 10,
-
     VerticalErrorValue = 40,
-
     Mode = ErrorBarMode.Both,
-
     Type = ErrorBarType.Percentage
-
 };
 
 chart.Series.Add(errorBar);
@@ -489,17 +426,15 @@ chart.Series.Add(errorBar);
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"  
-
-ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" 
-
-YBindingPath="Coal" 
-
-VerticalErrorValue="40" HorizontalErrorValue="10" 
-
-Mode="Both" Type="StandardDeviation"/>
+<chart:ErrorBarSeries 
+    Name="Errorseries"  
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal"
+    VerticalErrorValue="40" 
+    HorizontalErrorValue="10"
+    Mode="Both" 
+    Type="StandardDeviation"/>
 
 {% endhighlight %}
 
@@ -507,21 +442,13 @@ Mode="Both" Type="StandardDeviation"/>
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 10,
-
     VerticalErrorValue = 40,
-
     Mode = ErrorBarMode.Both,
-
     Type = ErrorBarType.StandardDeviation
-
 };
 
 chart.Series.Add(errorBar);
@@ -538,17 +465,15 @@ chart.Series.Add(errorBar);
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"  
-
-ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" 
-
-YBindingPath="Coal" 
-
-VerticalErrorValue="40" HorizontalErrorValue="10" 
-
-Mode="Both" Type="StandardErrors"/>
+<chart:ErrorBarSeries 
+    Name="Errorseries"  
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal"
+    VerticalErrorValue="40" 
+    HorizontalErrorValue="10"
+    Mode="Both" 
+    Type="StandardErrors"/>
 
 {% endhighlight %}
 
@@ -556,21 +481,13 @@ Mode="Both" Type="StandardErrors"/>
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 10,
-
     VerticalErrorValue = 40,
-
     Mode = ErrorBarMode.Both,
-
     Type = ErrorBarType.StandardErrors
-
 };
 
 chart.Series.Add(errorBar);
@@ -590,19 +507,15 @@ If the Type is Custom, you have to bind [`HorizontalErrorPathValue`](https://hel
 
 {% highlight xaml %}
 
-<chart:ErrorBarSeries Name="Errorseries"  
-
-ItemsSource="{Binding EnergyProductions}" 
-
-XBindingPath="ID" 
-
-YBindingPath="Coal" 
-
-HorizontalErrorPath="HorizontalErrorValue"
-
-VerticalErrorPath="VerticalErrorValue"
-
-Mode="Both" Type="Custom"/>
+<chart:ErrorBarSeries 
+    Name="Errorseries"  
+    ItemsSource="{Binding EnergyProductions}" 
+    XBindingPath="ID" 
+    YBindingPath="Coal"
+    VerticalErrorValue="40" 
+    HorizontalErrorValue="10"
+    Mode="Both" 
+    Type="Custom"/>
 
 {% endhighlight %}
 
@@ -610,21 +523,13 @@ Mode="Both" Type="Custom"/>
 
 ErrorBarSeries errorBar = new ErrorBarSeries()
 {
-
     ItemsSource = new ViewModel().EnergyProductions,
-
     XBindingPath = "ID",
-
     YBindingPath = "Coal",
-
     HorizontalErrorValue = 10,
-
     VerticalErrorValue = 40,
-
     Mode = ErrorBarMode.Both,
-
     Type = ErrorBarType.Custom
-
 };
 
 chart.Series.Add(errorBar);
@@ -650,11 +555,7 @@ You can define the LineStyle for the error bar lines using [`HorizontalLineStyle
 {% highlight xaml %}
 
 <chart:ErrorBarSeries.HorizontalLineStyle>
-
-<chart:LineStyle Stroke="Black"  StrokeThickness="2"  >
-
-</chart:LineStyle>
-
+    <chart:LineStyle Stroke="Black" StrokeThickness="2"/>
 </chart:ErrorBarSeries.HorizontalLineStyle>
 
 {% endhighlight %}
@@ -663,11 +564,8 @@ You can define the LineStyle for the error bar lines using [`HorizontalLineStyle
 
 errorBarSeries.HorizontalLineStyle = new LineStyle()
 {
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 2
-
 };
 
 {% endhighlight %}
@@ -681,11 +579,7 @@ errorBarSeries.HorizontalLineStyle = new LineStyle()
 {% highlight xaml %}
 
 <chart:ErrorBarSeries.VerticalLineStyle>
-
-<chart:LineStyle Stroke="Black"  StrokeThickness="2"  >
-
-</chart:LineStyle>
-
+    <chart:LineStyle Stroke="Black" StrokeThickness="2"/>
 </chart:ErrorBarSeries.VerticalLineStyle>
 
 {% endhighlight %}
@@ -694,11 +588,8 @@ errorBarSeries.HorizontalLineStyle = new LineStyle()
 
 errorBarSeries.VerticalLineStyle = new LineStyle()
 {
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 2
-
 };
 
 {% endhighlight %}
@@ -717,11 +608,11 @@ ErrorBar line cap can be customized using [`HorizontalCapLineStyle`](https://hel
 {% highlight xaml %}
 
 <chart:ErrorBarSeries.HorizontalCapLineStyle>
-
-<chart:CapLineStyle Stroke="Black" StrokeThickness="2"  
-
-LineWidth="10"></chart:CapLineStyle>
-
+    <chart:CapLineStyle 
+        Stroke="Black" 
+        StrokeThickness="2" 
+        LineWidth="10">
+    </chart:CapLineStyle>
 </chart:ErrorBarSeries.HorizontalCapLineStyle>
 
 {% endhighlight %}
@@ -730,13 +621,9 @@ LineWidth="10"></chart:CapLineStyle>
 
 errorBarSeries.HorizontalCapLineStyle = new CapLineStyle()
 {
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 2,
-
     LineWidth = 10
-
 };
 
 {% endhighlight %}
@@ -750,11 +637,11 @@ errorBarSeries.HorizontalCapLineStyle = new CapLineStyle()
 {% highlight xaml %}
 
 <chart:ErrorBarSeries.VerticalCapLineStyle>
-
-<chart:CapLineStyle Stroke="Black" StrokeThickness="3"  
-
-LineWidth="15"></chart:CapLineStyle>
-
+    <chart:CapLineStyle 
+        Stroke="Black" 
+        StrokeThickness="3" 
+        LineWidth="15">
+    </chart:CapLineStyle>
 </chart:ErrorBarSeries.VerticalCapLineStyle>
 
 {% endhighlight %}
@@ -763,13 +650,9 @@ LineWidth="15"></chart:CapLineStyle>
 
 errorBarSeries.VerticalCapLineStyle = new CapLineStyle()
 {
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 3,
-
     LineWidth = 15
-
 };
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Financial.md b/wpf/Charts/SeriesTypes/Financial.md
index a40f33f368..103afb402d 100644
--- a/wpf/Charts/SeriesTypes/Financial.md
+++ b/wpf/Charts/SeriesTypes/Financial.md
@@ -29,15 +29,16 @@ The following code example shows how to use OHLC series:
 
 {% highlight xaml %}
 
-<chart:HiLoOpenCloseSeries Name="series" ItemsSource="{Binding StockPriceDetails}" 
-
-XBindingPath="Date"  High="High" Low="Low"                         
-
-Interior="#4A4A4A"
-
-Open="Open" Close="Close" 
-
-Label="HiloOpenClose" />
+<chart:HiLoOpenCloseSeries 
+    Name="series" 
+    ItemsSource="{Binding StockPriceDetails}" 
+    XBindingPath="Date"  
+    High="High" 
+    Low="Low"
+    Interior="#4A4A4A"
+    Open="Open" 
+    Close="Close"
+    Label="HiloOpenClose"/>
 
 {% endhighlight %}
 
@@ -45,17 +46,13 @@ Label="HiloOpenClose" />
 
 HiLoOpenCloseSeries series = new HiLoOpenCloseSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    High = "High", Low = "Low",
-
-    Open = "Open", Close = "Close",
-
+    High = "High",
+    Low = "Low",
+    Open = "Open",
+    Close = "Close",
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -78,13 +75,15 @@ The values for this series can be bind using [`High`](https://help.syncfusion.co
 
 {% highlight xaml %}
 
-<chart:CandleSeries Name="series" ItemsSource="{Binding StockPriceDetails}" 
-
-XBindingPath="Date"  High="High" Open="Open"  
-
-Close="Close" Low="Low"  
-
-Interior="#4A4A4A"/>
+<chart:CandleSeries
+    Name="series"
+    ItemsSource="{Binding StockPriceDetails}"
+    XBindingPath="Date"
+    High="High"
+    Low="Low"
+    Open="Open"
+    Close="Close"
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -92,17 +91,13 @@ Interior="#4A4A4A"/>
 
 CandleSeries series = new CandleSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    High = "High", Low = "Low",
-
-    Open = "Open", Close = "Close",
-
+    High = "High",
+    Low = "Low",
+    Open = "Open",
+    Close = "Close",
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -117,28 +112,29 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:CandleSeries Name="series" ItemsSource="{Binding StockPriceDetails}" XBindingPath="Date"   
-                    High="High" Open="Open"  Close="Close" Low="Low"  BearFillColor="Black"
-                    BullFillColor="#BCBCBC"/>
+<chart:CandleSeries 
+    Name="series" 
+    ItemsSource="{Binding StockPriceDetails}" 
+    XBindingPath="Date"
+    Open="Open" 
+    Close="Close"
+    High="High"
+    Low="Low"
+    BearFillColor="Black" 
+    BullFillColor="#BCBCBC"/>
+
 {% endhighlight %}   
 
 {% highlight c# %}
 
 CandleSeries series = new CandleSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     High = "High", Low = "Low",
-
     Open = "Open", Close = "Close",
-
     BearFillColor = new SolidColorBrush(Colors.Black),
-
     BullFillColor = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 chart.Series.Add(series);
@@ -165,16 +161,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi
 
 {% highlight xaml %}
 
-<syncfusion:CandleSeries ComparisonMode="Open">
-
-</syncfusion:CandleSeries>
+<syncfusion:CandleSeries ComparisonMode="Open"></syncfusion:CandleSeries>
 
 {% endhighlight %}   
 
 {% highlight c# %}
 
 CandleSeries series = new CandleSeries();
-
 series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Open;
 
 {% endhighlight %}
@@ -193,16 +186,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi
 
 {% highlight xaml %}
 
-<syncfusion:CandleSeries ComparisonMode="Close">
-
-</syncfusion:CandleSeries>
+<syncfusion:CandleSeries ComparisonMode="Close"></syncfusion:CandleSeries>
 
 {% endhighlight %}   
 
 {% highlight c# %}
 
 CandleSeries series = new CandleSeries();
-
 series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Close;
 
 {% endhighlight %}
@@ -221,16 +211,13 @@ While setting the [`ComparisonMode`](https://help.syncfusion.com/cr/wpf/Syncfusi
 
 {% highlight xaml %}
 
-<syncfusion:CandleSeries ComparisonMode="High">
-
-</syncfusion:CandleSeries>
+<syncfusion:CandleSeries ComparisonMode="High"></syncfusion:CandleSeries>
 
 {% endhighlight %}   
 
 {% highlight c# %}
 
 CandleSeries series = new CandleSeries();
-
 series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.High;
 
 {% endhighlight %}
@@ -249,16 +236,13 @@ series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.High;
 
 {% highlight xaml %}
 
-<syncfusion:CandleSeries ComparisonMode="Low">
-
-</syncfusion:CandleSeries>
+<syncfusion:CandleSeries ComparisonMode="Low"></syncfusion:CandleSeries>
 
 {% endhighlight %}   
 
 {% highlight c# %}
 
 CandleSeries series = new CandleSeries();
-
 series.ComparisonMode = Syncfusion.UI.Xaml.Charts.FinancialPrice.Low;
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Funnelandpyramid.md b/wpf/Charts/SeriesTypes/Funnelandpyramid.md
index aeb9256510..0c8b9ad71c 100644
--- a/wpf/Charts/SeriesTypes/Funnelandpyramid.md
+++ b/wpf/Charts/SeriesTypes/Funnelandpyramid.md
@@ -17,11 +17,7 @@ PyramidSeries has the form of a triangle with lines dividing it into sections an
 
 {% highlight xaml %}
 
-<chart:PyramidSeries XBindingPath="Category" 
-
-ItemsSource="{Binding Tax}"       
-
-YBindingPath="Percentage"/>
+<chart:PyramidSeries XBindingPath="Category" ItemsSource="{Binding Tax}" YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -29,13 +25,9 @@ YBindingPath="Percentage"/>
 
 PyramidSeries series = new PyramidSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage"
-
 };
 
 chart.Series.Add(series);
@@ -55,13 +47,11 @@ The [`PyramidMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts
 
 {% highlight xaml %}
 
-<chart:PyramidSeries XBindingPath="Category" 
-
-PyramidMode="Surface"
-
-ItemsSource="{Binding Tax}"        
-
-YBindingPath="Percentage"/>
+<chart:PyramidSeries 
+    XBindingPath="Category" 
+    PyramidMode="Surface"
+    ItemsSource="{Binding Tax}"
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -69,15 +59,10 @@ YBindingPath="Percentage"/>
 
 PyramidSeries series = new PyramidSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     PyramidMode = ChartPyramidMode.Surface
-
 };
 
 chart.Series.Add(series);
@@ -95,13 +80,11 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:PyramidSeries XBindingPath="Category" 
-
-PyramidMode="Linear"
-
-ItemsSource="{Binding Tax}"          
-
-YBindingPath="Percentage"/>
+<chart:PyramidSeries 
+    PyramidMode="Linear"
+    ItemsSource="{Binding Tax}"
+    XBindingPath="Category" 
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -109,15 +92,10 @@ YBindingPath="Percentage"/>
 
 PyramidSeries series = new PyramidSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     PyramidMode = ChartPyramidMode.Linear
-
 };
 
 chart.Series.Add(series);
@@ -140,9 +118,7 @@ The following code example shows how to use the funnel series:
 
 {% highlight xaml %}
 
-<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding list}"  
-
-YBindingPath="Percentage" />
+<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding List}" YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -150,13 +126,9 @@ YBindingPath="Percentage" />
 
 FunnelSeries series = new FunnelSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
 };
 
 chart.Series.Add(series);
@@ -178,11 +150,11 @@ The [`FunnelMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.
 
 {% highlight xaml %}
 
-<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding list}"    
-
-FunnelMode="ValueIsHeight" 
-
-YBindingPath="Percentage"/>
+<chart:FunnelSeries 
+    ItemsSource="{Binding List}"
+    FunnelMode="ValueIsHeight" 
+    XBindingPath="Category"
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -190,15 +162,10 @@ YBindingPath="Percentage"/>
 
 FunnelSeries series = new FunnelSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     FunnelMode = ChartFunnelMode.ValueIsHeight
-
 };
 
 chart.Series.Add(series);
@@ -215,11 +182,11 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding list}"    
-
-FunnelMode="ValueIsWidth" 
-
-YBindingPath="Percentage" />
+<chart:FunnelSeries
+    ItemsSource="{Binding List}"
+    FunnelMode="ValueIsWidth"
+    XBindingPath="Category"
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -227,15 +194,10 @@ YBindingPath="Percentage" />
 
 FunnelSeries series = new FunnelSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     FunnelMode = ChartFunnelMode.ValueIsWidth
-
 };
 
 chart.Series.Add(series);
@@ -261,11 +223,12 @@ The following properties are used to explode the individual segments in Funnel a
 
 {% highlight xaml %}
 
-<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding list}"   
-
-ExplodeIndex="4"  ExplodeOffset="70" YBindingPath="Percentage">
-
-</chart:FunnelSeries>
+<chart:FunnelSeries
+    XBindingPath="Category"
+    ItemsSource="{Binding List}"
+    ExplodeIndex="4"
+    ExplodeOffset="70"
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -273,17 +236,11 @@ ExplodeIndex="4"  ExplodeOffset="70" YBindingPath="Percentage">
 
 FunnelSeries series = new FunnelSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     ExplodeIndex = 4,
-
     ExplodeOffset = 70
-
 };
 
 chart.Series.Add(series);
@@ -302,11 +259,11 @@ The gap between each segment using [`GapRatio`](https://help.syncfusion.com/cr/w
 
 {% highlight xaml %}
 
-<chart:FunnelSeries XBindingPath="Category" ItemsSource="{Binding list}"     
-
-GapRatio="0.5" YBindingPath="Percentage">
-
-</chart:FunnelSeries>
+<chart:FunnelSeries 
+    XBindingPath="Category" 
+    ItemsSource="{Binding List}"     
+    GapRatio="0.5" 
+    YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -314,15 +271,10 @@ GapRatio="0.5" YBindingPath="Percentage">
 
 FunnelSeries series = new FunnelSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     GapRatio = 0.5
-
 };
 
 chart.Series.Add(series);
@@ -337,4 +289,4 @@ N> You can refer to our [WPF Funnel Chart](https://www.syncfusion.com/wpf-contro
 
 ## See also
 
-[`How to add gaps between segments in a pyramid or funnel series`](https://www.syncfusion.com/kb/2708/how-to-add-gaps-between-segments-in-a-pyramid-or-funnel-series)
+[`How to add gaps between segments in a pyramid or funnel series?`](https://www.syncfusion.com/kb/2708/how-to-add-gaps-between-segments-in-a-pyramid-or-funnel-series)
diff --git a/wpf/Charts/SeriesTypes/GroupingStacked.md b/wpf/Charts/SeriesTypes/GroupingStacked.md
index fe92697533..69600463d1 100644
--- a/wpf/Charts/SeriesTypes/GroupingStacked.md
+++ b/wpf/Charts/SeriesTypes/GroupingStacked.md
@@ -17,64 +17,81 @@ The following code example shows how to group the stacking series.
 
 {% highlight xaml %}
 
-        <chart:StackingColumnSeries Interior="#4A4A4A" GroupingLabel="Group1" XBindingPath="Year" 
-         YBindingPath="Quarter1" ItemsSource="{Binding AnnualDetails}"/>
-
-        <chart:StackingColumnSeries Interior="#BCBCBC" GroupingLabel="Group1" XBindingPath="Year" 
-          YBindingPath="Quarter2" ItemsSource="{Binding AnnualDetails}"/>
-
-        <chart:StackingColumnSeries Interior="#7F7F7F" GroupingLabel="Group2" XBindingPath="Year"
-          YBindingPath="Quarter3" ItemsSource="{Binding AnnualDetails}"/>
-
-        <chart:StackingColumnSeries Interior="#343434" GroupingLabel="Group2" XBindingPath="Year"
-          YBindingPath="Quarter4" ItemsSource="{Binding AnnualDetails}"/>
-
+<chart:StackingColumnSeries 
+    Interior="#4A4A4A" 
+    GroupingLabel="Group1" 
+    XBindingPath="Year"       
+    YBindingPath="Quarter1" 
+    ItemsSource="{Binding AnnualDetails}"/>
+
+<chart:StackingColumnSeries 
+    Interior="#BCBCBC" 
+    GroupingLabel="Group1" 
+    XBindingPath="Year"          
+    YBindingPath="Quarter2" 
+    ItemsSource="{Binding AnnualDetails}"/>
+
+<chart:StackingColumnSeries 
+    Interior="#7F7F7F" 
+    GroupingLabel="Group2" 
+    XBindingPath="Year"          
+    YBindingPath="Quarter3" 
+    ItemsSource="{Binding AnnualDetails}"/>
+
+<chart:StackingColumnSeries 
+    Interior="#343434" 
+    GroupingLabel="Group2" 
+    XBindingPath="Year"
+    YBindingPath="Quarter4" 
+    ItemsSource="{Binding AnnualDetails}"/>
+    
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfChart chart = new SfChart();
-
-            StackingColumnSeries series1 = new StackingColumnSeries()
-            {
-                ItemsSource = new ViewModel().AnnualDetails,
-                XBindingPath = "Year",
-                YBindingPath = "Quarter1",
-                GroupingLabel = "Group1",
-                Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-            };
-
-            StackingColumnSeries series2 = new StackingColumnSeries()
-            {
-                ItemsSource = new ViewModel().AnnualDetails,
-                XBindingPath = "Year",
-                YBindingPath = "Quarter2",
-                GroupingLabel = "Group1",
-                Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-            };
-
-            StackingColumnSeries series3 = new StackingColumnSeries()
-            {
-                ItemsSource = new ViewModel().AnnualDetails,
-                XBindingPath = "Year",
-                YBindingPath = "Quarter3",
-                GroupingLabel = "Group2",
-                Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-            };
-
-            StackingColumnSeries series4 = new StackingColumnSeries()
-            {
-                ItemsSource = new ViewModel().AnnualDetails,
-                XBindingPath = "Year",
-                YBindingPath = "Quarter4",
-                GroupingLabel = "Group2",
-                Interior = new SolidColorBrush(Color.FromRgb(0x34, 0x34, 0x34))
-            };
-
-            chart.Series.Add(series1);
-            chart.Series.Add(series2);
-            chart.Series.Add(series3);
-            chart.Series.Add(series4);
+SfChart chart = new SfChart();
+
+StackingColumnSeries series1 = new StackingColumnSeries()
+{
+    ItemsSource = new ViewModel().AnnualDetails,
+    XBindingPath = "Year",
+    YBindingPath = "Quarter1",
+    GroupingLabel = "Group1",
+    Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
+};
+
+StackingColumnSeries series2 = new StackingColumnSeries()
+{
+    ItemsSource = new ViewModel().AnnualDetails,
+    XBindingPath = "Year",
+    YBindingPath = "Quarter2",
+    GroupingLabel = "Group1",
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
+};
+
+StackingColumnSeries series3 = new StackingColumnSeries()
+{
+    ItemsSource = new ViewModel().AnnualDetails,
+    XBindingPath = "Year",
+    YBindingPath = "Quarter3",
+    GroupingLabel = "Group2",
+    Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
+};
+
+StackingColumnSeries series4 = new StackingColumnSeries()
+{
+    ItemsSource = new ViewModel().AnnualDetails,
+    XBindingPath = "Year",
+    YBindingPath = "Quarter4",
+    GroupingLabel = "Group2",
+    Interior = new SolidColorBrush(Color.FromRgb(0x34, 0x34, 0x34))
+};
+
+chart.Series.Add(series1);
+chart.Series.Add(series2);
+chart.Series.Add(series3);
+chart.Series.Add(series4);
+
 {% endhighlight %}
 
 {% endtabs %}
@@ -83,6 +100,5 @@ The following code example shows how to group the stacking series.
 
 ## See also
 
-[`How to render the stacked step line series in WPF Chart`](https://www.syncfusion.com/kb/10155/how-to-render-the-stacked-step-line-series-in-wpf-chart)
-
-[`How to create separate columns StackedGroup in stacking series`](https://www.syncfusion.com/kb/4730/how-to-create-separate-columns-stackedgroup-in-stacking-series)
+[`How to render the stacked step line series in WPF Chart?`](https://www.syncfusion.com/kb/10155/how-to-render-the-stacked-step-line-series-in-wpf-chart)
+[`How to create separate columns StackedGroup in stacking series?`](https://www.syncfusion.com/kb/4730/how-to-create-separate-columns-stackedgroup-in-stacking-series)
diff --git a/wpf/Charts/SeriesTypes/LineandStepLine.md b/wpf/Charts/SeriesTypes/LineandStepLine.md
index fc34ec3cc7..9182b2c94f 100644
--- a/wpf/Charts/SeriesTypes/LineandStepLine.md
+++ b/wpf/Charts/SeriesTypes/LineandStepLine.md
@@ -17,17 +17,16 @@ Line series join points on a plot by straight lines, showing data trends at equa
 
 {% highlight xaml %}
 
-<chart:LineSeries  XBindingPath="Year
-
-ItemsSource="{Binding List}" YBindingPath="India"               
-
-Interior="#4A4A4A"/>
-
-<chart:LineSeries  XBindingPath="Year"     
-
-ItemsSource="{Binding List}" YBindingPath="America"               
-
-Interior="#4A4A4A"/>
+<chart:LineSeries  
+    XBindingPath="Year"
+    ItemsSource="{Binding List}" 
+    YBindingPath="India"               
+    Interior="#4A4A4A"/>
+<chart:LineSeries                     
+    XBindingPath="Year"     
+    ItemsSource="{Binding List}" 
+    YBindingPath="America"               
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -35,32 +34,21 @@ Interior="#4A4A4A"/>
 
 LineSeries series1 = new LineSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 LineSeries series2 = new LineSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "America",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -79,24 +67,19 @@ N> You can explore our [WPF Line Chart](https://www.syncfusion.com/wpf-controls/
 
 {% highlight xaml %}
 
-<chart:StepLineSeries ItemsSource="{Binding Data}"  
-                      
-                      XBindingPath="XValue" 
-                      
-                      YBindingPath="YValue">
-            
- </chart:StepLineSeries>
+<chart:StepLineSeries
+    ItemsSource="{Binding Data}" 
+    XBindingPath="XValue"
+    YBindingPath="YValue">
+</chart:StepLineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 StepLineSeries stepLine = new StepLineSeries();
-
 stepLine.ItemsSource = new ViewModel().Data;
-
 stepLine.XBindingPath = "XValue";
-
 stepLine.YBindingPath = "YValue";
 
 SteplineChart.Series.Add(stepLine);
@@ -111,10 +94,7 @@ N> You can explore our [WPF Step Line Chart](https://www.syncfusion.com/wpf-cont
 
 ## See also
 
-[`How to remove the blended color effect in multiple line series of Chart`](https://www.syncfusion.com/kb/10463/how-to-remove-the-blended-color-effect-in-multiple-line-series-of-sfchart)
-
-[`Comparison between line series and fast line series`](https://www.syncfusion.com/kb/6609/comparison-between-line-series-and-fast-line-series)
-
-[`How to bind the array property in Chart`](https://www.syncfusion.com/kb/4923/how-to-bind-the-array-property-in-sfchart)
-
-[`How to draw dotted line using line series in Chart`](https://www.syncfusion.com/kb/2550/how-to-draw-dotted-line-using-line-series-in-sfchart)
+[`How to remove the blended color effect in multiple line series of Chart?`](https://www.syncfusion.com/kb/10463/how-to-remove-the-blended-color-effect-in-multiple-line-series-of-sfchart)
+[`Comparison between line series and fast line series?`](https://www.syncfusion.com/kb/6609/comparison-between-line-series-and-fast-line-series)
+[`How to bind the array property in Chart?`](https://www.syncfusion.com/kb/4923/how-to-bind-the-array-property-in-sfchart)
+[`How to draw dotted line using line series in Chart?`](https://www.syncfusion.com/kb/2550/how-to-draw-dotted-line-using-line-series-in-sfchart)
diff --git a/wpf/Charts/SeriesTypes/Other.md b/wpf/Charts/SeriesTypes/Other.md
index a867faf87a..e87d96af0b 100644
--- a/wpf/Charts/SeriesTypes/Other.md
+++ b/wpf/Charts/SeriesTypes/Other.md
@@ -17,12 +17,9 @@ documentation: ug
 
 {% highlight xaml %}
 
-<chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"  
-                          
-                            XBindingPath="Department" 
-                          
-                            YBindingPath="Age">
-
+<chart:BoxAndWhiskerSeries ItemsSource="{Binding BoxWhiskerData}"
+    XBindingPath="Department"  
+    YBindingPath="Age">
 </chart:BoxAndWhiskerSeries>
 
 {% endhighlight %}
@@ -30,11 +27,8 @@ documentation: ug
 {% highlight c# %}
 
 BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries();
-
 boxAndWhisker.ItemsSource = new BoxWhiskerViewModel().BoxWhiskerData;
-
 boxAndWhisker.XBindingPath = "Department";
-
 boxAndWhisker.YBindingPath = "Age";
 
 boxWhiskerChart.Series.Add(boxAndWhisker);
@@ -65,16 +59,13 @@ The following code illustrates how to define the [`BoxPlotMode`](https://help.sy
 
 {% highlight xaml %}
 
-<chart:BoxAndWhiskerSeries  BoxPlotMode="Normal">
-
-</chart:BoxAndWhiskerSeries>
+<chart:BoxAndWhiskerSeries BoxPlotMode="Normal"></chart:BoxAndWhiskerSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries();
-
 boxAndWhisker.BoxPlotMode = BoxPlotMode.Normal;
 
 {% endhighlight %}
@@ -91,16 +82,13 @@ The following code illustrates how to define the [`BoxPlotMode`](https://help.sy
 
 {% highlight xaml %}
 
-<chart:BoxAndWhiskerSeries  BoxPlotMode="Inclusive">
-
-</chart:BoxAndWhiskerSeries>
+<chart:BoxAndWhiskerSeries BoxPlotMode="Inclusive"></chart:BoxAndWhiskerSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries();
-
 boxAndWhisker.BoxPlotMode = BoxPlotMode.Inclusive;
 
 {% endhighlight %}
@@ -117,16 +105,13 @@ The Median values of given dataset is viewed by enabling the [`ShowMedian`](http
 
 {% highlight xaml %}
 
-<chart:BoxAndWhiskerSeries ShowMedian="True">
-
-</chart:BoxAndWhiskerSeries>
+<chart:BoxAndWhiskerSeries ShowMedian="True"></chart:BoxAndWhiskerSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries();
-
 boxAndWhisker.ShowMedian = true;
 
 {% endhighlight %}
@@ -152,16 +137,13 @@ The outlier value in the box plot can be viewed by enabling the [`ShowOutlier`](
 
 {% highlight xaml %}
 
-<chart:BoxAndWhiskerSeries ShowOutlier="False">
-
-</chart:BoxAndWhiskerSeries>
+<chart:BoxAndWhiskerSeries ShowOutlier="False"></chart:BoxAndWhiskerSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 BoxAndWhiskerSeries boxAndWhisker = new BoxAndWhiskerSeries();
-
 boxAndWhisker.ShowOutlier = false;
 
 {% endhighlight %}
@@ -179,29 +161,22 @@ The default appearance of the outlier symbol can be customized by using the [`Ou
 {% highlight xaml %}
 
 <chart:BoxAndWhiskerSeries.OutlierTemplate>
-
     <DataTemplate>
-
         <Canvas>
-
-                 <Path Stretch="Fill" Height="10" Width="10"  Fill="{Binding Interior}" 
-                              
-                         Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"
-      
-                            Data="F1 M 145.193,54.8249L 169.315,54.8249L 169.315,
-            
-                                    78.9463L 145.193,78.9463L 145.193,103.074L 121.071,
-            
-                                    103.074L 121.071,78.9463L 96.946,78.9463L 96.946,
-           
-                                    54.8249L 121.071,54.8249L 121.071,
-            
-                                    30.6983L 145.193,30.6983L 145.193,54.8249 Z"/>
-
-          </Canvas>
-
+            <Path 
+                Stretch="Fill" 
+                Height="10" 
+                Width="10"  
+                Fill="{Binding Interior}"
+                Canvas.Left="{Binding RectX}" 
+                Canvas.Top="{Binding RectY}"
+                Data="F1 M 145.193,54.8249L 169.315,54.8249L 169.315,
+                    78.9463L 145.193,78.9463L 145.193,103.074L 121.071,
+                    103.074L 121.071,78.9463L 96.946,78.9463L 96.946,
+                    54.8249L 121.071,54.8249L 121.071,
+                    30.6983L 145.193,30.6983L 145.193,54.8249 Z"/>
+        </Canvas>
     </DataTemplate>
-
 </chart:BoxAndWhiskerSeries.OutlierTemplate>
 
 {% endhighlight %}
@@ -220,12 +195,10 @@ The following code illustrates how to use the series in chart.
 
 {% highlight xaml %}
 
-<chart:WaterfallSeries ItemsSource="{Binding RevenueDetails}"  
-                      
-                       XBindingPath="Category" 
-                      
-                       YBindingPath="Value">
-
+<chart:WaterfallSeries 
+    ItemsSource="{Binding RevenueDetails}"
+    XBindingPath="Category"                      
+    YBindingPath="Value">
 </chart:WaterfallSeries>
 
 {% endhighlight %}
@@ -233,11 +206,8 @@ The following code illustrates how to use the series in chart.
 {% highlight c# %}
 
 WaterfallSeries waterfallSeries = new WaterfallSeries();
-
 waterfallSeries.ItemsSource = new ViewModel().RevenueDetails;
-
 waterfallSeries.XBindingPath = "Category";
-
 waterfallSeries.YBindingPath = "Value";
 
 chart.Series.Add(waterfallSeries);
@@ -259,16 +229,12 @@ The summary segment can be differentiated by applying the [`SummarySegmentBrush`
 
 {% highlight xaml %}
 
-<chart:WaterfallSeries ItemsSource="{Binding RevenueDetails}"  
-                                  
-                                   XBindingPath="Category"
-                                  
-                                   YBindingPath="Value" Interior="Gray"
-                                  
-                                   SummaryBindingPath="IsSummary"
-                                  
-                                   SummarySegmentBrush="RoyalBlue">
-
+<chart:WaterfallSeries 
+    ItemsSource="{Binding RevenueDetails}"
+    XBindingPath="Category"
+    YBindingPath="Value" Interior="Gray" 
+    SummaryBindingPath="IsSummary"
+    SummarySegmentBrush="RoyalBlue">
 </chart:WaterfallSeries>
 
 {% endhighlight %}
@@ -276,15 +242,10 @@ The summary segment can be differentiated by applying the [`SummarySegmentBrush`
 {% highlight c# %}
 
 WaterfallSeries waterfallSeries = new WaterfallSeries();
-
 waterfallSeries.ItemsSource = new ViewModel().RevenueDetails;
-
 waterfallSeries.XBindingPath = "Category";
-
 waterfallSeries.YBindingPath = "Value";
-
 waterfallSeries.SummaryBindingPath = "IsSummary";
-
 waterfallSeries.SummarySegmentBrush = new SolidColorBrush(Colors.RoyalBlue);
 
 chart.Series.Add(waterfallSeries);
@@ -305,9 +266,7 @@ The following code illustrates how to change the appearance of the negative segm
 
 {% highlight xaml %}
 
-<chart:WaterfallSeries NegativeSegmentBrush="Red">
-
-</chart:WaterfallSeries>
+<chart:WaterfallSeries NegativeSegmentBrush="Red"></chart:WaterfallSeries>
 
 {% endhighlight %}
 
@@ -315,7 +274,6 @@ The following code illustrates how to change the appearance of the negative segm
 
 
 WaterfallSeries waterfallSeries = new WaterfallSeries();
-
 waterfallSeries.NegativeSegmentBrush = new SolidColorBrush(Colors.Red);
 
 {% endhighlight %}
@@ -334,24 +292,19 @@ The following code example illustrates how the AllowAutoSum property value can b
 
 {% highlight xaml %}
 
-<chart:WaterfallSeries AllowAutoSum="False"
-                       
-                       SummaryBindingPath="IsSummary"
-                       
-                       SummarySegmentBrush="RoyalBlue">
- 
- </chart:WaterfallSeries>
+<chart:WaterfallSeries 
+    AllowAutoSum="False" 
+    SummaryBindingPath="IsSummary" 
+    SummarySegmentBrush="RoyalBlue">
+</chart:WaterfallSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 WaterfallSeries waterfallSeries = new WaterfallSeries();
-
 waterfallSeries.AllowAutoSum = true;
-
 waterfallSeries.SummaryBindingPath = "IsSummary";
-
 waterfallSeries.SummarySegmentBrush = new SolidColorBrush(Colors.RoyalBlue);
 
 chart.Series.Add(waterfallSeries);
@@ -370,16 +323,13 @@ The connector line of series can be enabled or disabled by using its [`ShowConne
 
 {% highlight xaml %}
 
-<chart:WaterfallSeries ShowConnector="False">
-
-</chart:WaterfallSeries>
+<chart:WaterfallSeries ShowConnector="False"></chart:WaterfallSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 WaterfallSeries waterfallSeries = new WaterfallSeries();
-
 waterfallSeries.ShowConnector = false;
 
 {% endhighlight %}
@@ -397,17 +347,11 @@ The connector line can be customized by applying [`ConnectorLineStyle`](https://
 {% highlight xaml %}
 
 <chart:WaterfallSeries.ConnectorLineStyle>
-
-<Style TargetType="Line">
-
-<Setter Property="Stroke" Value="Red"/>
-
-<Setter Property="StrokeDashArray" Value="1"/>
-
-<Setter Property="StrokeThickness" Value="2"/>
-
-</Style>
-
+    <Style TargetType="Line">
+        <Setter Property="Stroke" Value="Red"/>
+        <Setter Property="StrokeDashArray" Value="1"/>
+        <Setter Property="StrokeThickness" Value="2"/>
+    </Style>
 </chart:WaterfallSeries.ConnectorLineStyle>
 
 {% endhighlight %}
@@ -415,15 +359,11 @@ The connector line can be customized by applying [`ConnectorLineStyle`](https://
 {% highlight c# %}
 
 Style style = new Style(typeof(Line));
-
 style.Setters.Add(new Setter(Line.StrokeProperty, new SolidColorBrush(Colors.Red)));
-
 style.Setters.Add(new Setter(Line.StrokeDashArrayProperty, new DoubleCollection() { 1 }));
-
 style.Setters.Add(new Setter(Line.StrokeThicknessProperty, 2));
 
 WaterfallSeries series = new WaterfallSeries();
-
 series.ConnectorLineStyle = style;
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/PieandDoughnut.md b/wpf/Charts/SeriesTypes/PieandDoughnut.md
index a85f045795..faa6f6a49d 100644
--- a/wpf/Charts/SeriesTypes/PieandDoughnut.md
+++ b/wpf/Charts/SeriesTypes/PieandDoughnut.md
@@ -17,11 +17,7 @@ documentation: ug
 
 {% highlight xaml %}
 
-<chart:PieSeries  XBindingPath="Category" 
-
-                 ItemsSource="{Binding Tax}" 
-
-                  YBindingPath="Percentage"/>
+<chart:PieSeries XBindingPath="Category" ItemsSource="{Binding Tax}" YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -29,13 +25,9 @@ documentation: ug
 
 PieSeries series = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage"
-
 };
 
 chart.Series.Add(series);
@@ -52,13 +44,12 @@ The rendering size of the PieSeries can be controlled using [`PieCoefficient`](h
 
 {% highlight xaml %}
 
-<chart:PieSeries PieCoefficient="0.9" 
-
-XBindingPath="Category" 
-
-ItemsSource="{Binding Tax}" 
-
-YBindingPath="Percentage"/>
+<chart:PieSeries 
+    PieCoefficient="0.9"
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}" 
+    YBindingPath="Percentage">
+</chart:PieSeries>
 
 {% endhighlight %}
 
@@ -66,15 +57,10 @@ YBindingPath="Percentage"/>
 
 PieSeries series = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     PieCoefficient = 0.9
-
 };
 
 chart.Series.Add(series);
@@ -100,48 +86,54 @@ The small segments in the pie chart can be grouped into the “others” categor
 
 {% highlight xaml %}
 
-        <Window.Resources>
-            <local:DataLabelTemplateConverter x:Key="DataLabelConverter"/>
-
-            <DataTemplate x:Key="DataLabelTemplate">
-                <StackPanel Orientation="Vertical" Margin="5">
-                    <TextBlock Text="{Binding Converter={StaticResource DataLabelConverter}}"                          
-                               Margin="3" Foreground="White">
-                    </TextBlock>
-                </StackPanel>
-            </DataTemplate>
-        </Window.Resources>
-
-            <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Count"
-				   GroupMode="Value" GroupTo="1000" >
-
-                <chart:PieSeries.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo ShowConnectorLine="True" 
-                                              ConnectorHeight="80" 
-                                              ShowLabel="True" 
-                                              LabelTemplate="{StaticResource DataLabelTemplate}"  
-                                              SegmentLabelContent="LabelContentPath">
-                    </chart:ChartAdornmentInfo>
-                </chart:PieSeries.AdornmentsInfo>
-            </chart:PieSeries>
+<Window.Resources>
+    <local:DataLabelTemplateConverter x:Key="DataLabelConverter"/>
+
+    <DataTemplate x:Key="DataLabelTemplate">
+        <StackPanel Orientation="Vertical" Margin="5">
+            <TextBlock 
+                Text="{Binding Converter={StaticResource DataLabelConverter}}" 
+                Margin="3" 
+                Foreground="White">
+            </TextBlock>
+        </StackPanel>
+    </DataTemplate>
+</Window.Resources>
+
+<chart:PieSeries 
+    ItemsSource="{Binding Data}" 
+    XBindingPath="Country" 
+    YBindingPath="Count"
+    GroupMode="Value" 
+    GroupTo="1000">
+    <chart:PieSeries.AdornmentsInfo>
+        <chart:ChartAdornmentInfo 
+            ShowConnectorLine="True"
+            ConnectorHeight="80"
+            ShowLabel="True"
+            LabelTemplate="{StaticResource DataLabelTemplate}"
+            SegmentLabelContent="LabelContentPath">
+        </chart:ChartAdornmentInfo>
+    </chart:PieSeries.AdornmentsInfo>
+</chart:PieSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            pieSeries.GroupMode = PieGroupMode.Value;
-            pieSeries.GroupTo = 1000;
+pieSeries.GroupMode = PieGroupMode.Value;
+pieSeries.GroupTo = 1000;
 
-            ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-            {
-                ShowConnectorLine = true,
-                ShowLabel = true,
-                ConnectorHeight = 80,
-                LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
-                SegmentLabelContent = LabelContent.LabelContentPath,
-            };
+ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
+{
+    ShowConnectorLine = true,
+    ShowLabel = true,
+    ConnectorHeight = 80,
+    LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
+    SegmentLabelContent = LabelContent.LabelContentPath,
+};
 
-            pieSeries.AdornmentsInfo = adornmentInfo;
+pieSeries.AdornmentsInfo = adornmentInfo;
 
 {% endhighlight %}
 
@@ -157,15 +149,19 @@ You can explore our KB article on showing adornment labels for grouped values in
 
 {% highlight xaml %}
 
-<chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Count" 
-                 GroupMode="Angle" GroupTo="30">
-                 
+<chart:PieSeries 
+    ItemsSource="{Binding Data}" 
+    XBindingPath="Country"
+    YBindingPath="Count"
+    GroupMode="Angle" 
+    GroupTo="30">
     <chart:PieSeries.AdornmentsInfo>
-        <chart:ChartAdornmentInfo ShowConnectorLine="True" 
-                                  ConnectorHeight="80" 
-                                  ShowLabel="True" 
-                                  LabelTemplate="{StaticResource DataLabelTemplate}"  
-                                  SegmentLabelContent="LabelContentPath">
+        <chart:ChartAdornmentInfo 
+            ShowConnectorLine="True"   
+            ConnectorHeight="80" 
+            ShowLabel="True" 
+            LabelTemplate="{StaticResource DataLabelTemplate}"
+            SegmentLabelContent="LabelContentPath">
         </chart:ChartAdornmentInfo>
     </chart:PieSeries.AdornmentsInfo>
 </chart:PieSeries>
@@ -178,13 +174,13 @@ pieSeries.GroupMode = PieGroupMode.Angle;
 pieSeries.GroupTo = 30;
 
 ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowConnectorLine = true,
-        ShowLabel = true,
-        ConnectorHeight = 80,
-        LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
-        SegmentLabelContent = LabelContent.LabelContentPath,
-    };
+{
+    ShowConnectorLine = true,
+    ShowLabel = true,
+    ConnectorHeight = 80,
+    LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
+    SegmentLabelContent = LabelContent.LabelContentPath,
+};
 
 pieSeries.AdornmentsInfo = adornmentInfo;
 
@@ -200,15 +196,19 @@ pieSeries.AdornmentsInfo = adornmentInfo;
 
 {% highlight xaml %}
 
-<chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Count"                
-                 GroupMode="Percentage" GroupTo="10" >
-
+<chart:PieSeries 
+    ItemsSource="{Binding Data}" 
+    XBindingPath="Country" 
+    YBindingPath="Count"
+    GroupMode="Percentage"
+    GroupTo="10" >
     <chart:PieSeries.AdornmentsInfo>
-        <chart:ChartAdornmentInfo ShowConnectorLine="True" 
-                                  ConnectorHeight="80" 
-                                  ShowLabel="True" 
-                                  LabelTemplate="{StaticResource DataLabelTemplate}"  
-                                  SegmentLabelContent="LabelContentPath">
+        <chart:ChartAdornmentInfo 
+            ShowConnectorLine="True" 
+            ConnectorHeight="80" 
+            ShowLabel="True"
+            LabelTemplate="{StaticResource DataLabelTemplate}"  
+            SegmentLabelContent="LabelContentPath">
         </chart:ChartAdornmentInfo>
     </chart:PieSeries.AdornmentsInfo>
 </chart:PieSeries>
@@ -222,13 +222,13 @@ pieSeries.GroupMode = PieGroupMode.Percentage;
 pieSeries.GroupTo = 10;
 
 ChartAdornmentInfo adornmentInfo = new ChartAdornmentInfo()
-    {
-        ShowConnectorLine = true,
-        ShowLabel = true,
-        ConnectorHeight = 80,
-        LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
-        SegmentLabelContent = LabelContent.LabelContentPath,
-    };
+{
+    ShowConnectorLine = true,
+    ShowLabel = true,
+    ConnectorHeight = 80,
+    LabelTemplate = this.RootGrid.Resources["DataLabelTemplate"] as DataTemplate,
+    SegmentLabelContent = LabelContent.LabelContentPath,
+};
 
 pieSeries.AdornmentsInfo = adornmentInfo;
 
@@ -250,11 +250,8 @@ The DoughnutSeries can be added to chart as in below code example:
 
 {% highlight xaml %}
 
-<chart:DoughnutSeries XBindingPath="Category"
-
-                      ItemsSource="{Binding Tax}" 
+<chart:DoughnutSeries XBindingPath="Category" ItemsSource="{Binding Tax}" YBindingPath="Percentage"/>
 
-                      YBindingPath="Percentage"/>
 
 {% endhighlight %}
 
@@ -262,11 +259,8 @@ The DoughnutSeries can be added to chart as in below code example:
 
 DoughnutSeries series = new DoughnutSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage"
 };
 
@@ -284,11 +278,12 @@ The Doughnut also having coefficient property, [`DoughnutCoefficient`](https://h
 
 {% highlight xaml %}
 
-<chart:DoughnutSeries DoughnutCoefficient="0.7"                    
-
-XBindingPath="Category" ItemsSource="{Binding Tax}" 
-
-YBindingPath="Percentage" />
+<chart:DoughnutSeries 
+    DoughnutCoefficient="0.7"                    
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}" 
+    YBindingPath="Percentage">
+</chart:DoughnutSeries>
 
 {% endhighlight %}
 
@@ -296,13 +291,9 @@ YBindingPath="Percentage" />
 
 DoughnutSeries series = new DoughnutSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     DoughnutCoefficient = 0.9
 };
 
@@ -323,28 +314,20 @@ The size of doughnut series can be customized by using its [`DoughnutSize`](http
 {% highlight xaml %}
 
 <syncfusion:SfChart>
-
-<syncfusion:DoughnutSeries DoughnutSize="0.8"/>
-       
-<syncfusion:DoughnutSeries DoughnutSize="0.8"/ >
-
+    <syncfusion:DoughnutSeries DoughnutSize="0.8"/>
+    <syncfusion:DoughnutSeries DoughnutSize="0.8"/>
 </syncfusion:SfChart>
 
-
 {% endhighlight %}
 
 {% highlight c# %}
 
 DoughnutSeries doughnut = new DoughnutSeries();
-
 doughnut.DoughnutSize = 0.8;
-
 chart.Series.Add(doughnut);
 
 DoughnutSeries doughnut1 = new DoughnutSeries();
-
 doughnut1.DoughnutSize = 0.8;
-
 chart.Series.Add(doughnut1);
 
 {% endhighlight %}
@@ -361,16 +344,13 @@ chart.Series.Add(doughnut1);
 
 {% highlight xaml %}
 
-<Chart:SfChart Chart:DoughnutSeries.DoughnutHoleSize="0.2">
-    
-</chart:SfChart>
+<Chart:SfChart Chart:DoughnutSeries.DoughnutHoleSize="0.2"></chart:SfChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 DoughnutSeries.SetDoughnutHoleSize(chart, 0.2);
 
 {% endhighlight %}
@@ -388,13 +368,14 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.
 
 {% highlight xaml %}
 
-<syncfusion:PieSeries x:Name="PieSeries" StartAngle="180" EndAngle="360"    
-
-XBindingPath="Utilization" 
-
-YBindingPath="ResponseTime"
-
-ItemsSource="{Binding}"/>
+<syncfusion:PieSeries 
+    x:Name="PieSeries" 
+    StartAngle="180" 
+    EndAngle="360"
+    XBindingPath="Utilization" 
+    YBindingPath="ResponseTime"
+    ItemsSource="{Binding Value}">
+</syncfusion:PieSeries>
 
 {% endhighlight %}
 
@@ -402,17 +383,11 @@ ItemsSource="{Binding}"/>
 
 PieSeries series = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Value,
-
     XBindingPath = "Utilization",
-
     YBindingPath = "ResponseTime",
-
     StartAngle = 180,
-
     EndAngle = 360
-
 };
 
 chart.Series.Add(series);
@@ -429,11 +404,13 @@ chart.Series.Add(series);
 
 <syncfusion:DoughnutSeries StartAngle="180" EndAngle="360" 
 
-XBindingPath="Utilization"
-
-YBindingPath="ResponseTime" 
-
-ItemsSource="{Binding}"/>
+<syncfusion:DoughnutSeries 
+    StartAngle="180" 
+    EndAngle="360" 
+    XBindingPath="Utilization"
+    YBindingPath="ResponseTime" 
+    ItemsSource="{Binding Value}">
+</syncfusion:DoughnutSeries>
 
 {% endhighlight %}
 
@@ -441,17 +418,11 @@ ItemsSource="{Binding}"/>
 
 DoughnutSeries series = new DoughnutSeries()
 {
-
     ItemsSource = new ViewModel().Value,
-
     XBindingPath = "Utilization",
-
     YBindingPath = "ResponseTime",
-
     StartAngle = 180,
-
     EndAngle = 360
-
 };
 
 chart.Series.Add(series);
@@ -573,15 +544,14 @@ The following properties are used to explode the individual segments in Pie and
 
 {% highlight xaml %}
 
-<syncfusion:PieSeries x:Name="PieSeries" ItemsSource="{Binding}"          
-
-ExplodeIndex="2"
-
-ExplodeRadius="10"
-
-XBindingPath="Utilization" 
-
-YBindingPath="ResponseTime" />
+<syncfusion:PieSeries 
+    x:Name="PieSeries" 
+    ItemsSource="{Binding Data}"
+    ExplodeIndex="2"
+    ExplodeRadius="10"
+    XBindingPath="Utilization" 
+    YBindingPath="ResponseTime">
+</syncfusion:PieSeries>
 
 {% endhighlight %}
 
@@ -589,17 +559,11 @@ YBindingPath="ResponseTime" />
 
 PieSeries series = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "Utilization",
-
     YBindingPath = "ResponseTime",
-
     ExplodeIndex = 2,
-
     ExplodeRadius = 10
-
 };
 
 chart.Series.Add(series);
@@ -618,15 +582,13 @@ N> We have defined ExplodeRadius as 30, by default its value is zero. So you nee
 
 {% highlight xaml %}
 
-<chart:PieSeries  ExplodeAll="True"
-
-ExplodeRadius="15"
-
-XBindingPath="Category" 
-
-ItemsSource="{Binding Tax}" 
-
-YBindingPath="Percentage">
+<chart:PieSeries  
+    ExplodeAll="True"
+    ExplodeRadius="15"
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}"
+    YBindingPath="Percentage">
+</chart:PieSeries>
 
 {% endhighlight %}
 
@@ -634,17 +596,11 @@ YBindingPath="Percentage">
 
 PieSeries series = new PieSeries()
 {
-
     ItemsSource = new ViewModel().Tax,
-
     XBindingPath = "Category",
-
     YBindingPath = "Percentage",
-
     ExplodeAll = true,
-
     ExplodeRadius = 15
-
 };
 
 chart.Series.Add(series);
@@ -659,4 +615,4 @@ N> You can refer to our [WPF Doughnut Chart](https://www.syncfusion.com/wpf-cont
 
 ## See also
 
-[`How to create Pie Chart in C# WPF`](https://www.syncfusion.com/kb/10789/how-to-create-pie-chart-in-c-wpf)
\ No newline at end of file
+[`How to create Pie Chart in C# WPF?`](https://www.syncfusion.com/kb/10789/how-to-create-pie-chart-in-c-wpf)
\ No newline at end of file
diff --git a/wpf/Charts/SeriesTypes/Placesidebyside.md b/wpf/Charts/SeriesTypes/Placesidebyside.md
index eaeae179af..1b25a9ba8b 100644
--- a/wpf/Charts/SeriesTypes/Placesidebyside.md
+++ b/wpf/Charts/SeriesTypes/Placesidebyside.md
@@ -22,47 +22,39 @@ The following code example and image illustrates the placement of series while s
 
 {% highlight xaml %}
 
-<chart:SfChart x:Name="columnChart" AreaBorderBrush="DarkGray" 
-
-Header="Usage of Metals"  
-
-SideBySideSeriesPlacement="False"
-
-AreaBorderThickness="1,1,1,1">
-
-<chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  Header="Metals"/>
-
-</chart:SfChart.PrimaryAxis>
-
-<chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis Header="Usage" />                            
-
-</chart:SfChart.SecondaryAxis>
-
-<chart:SfChart.Legend>
-
-<chart:ChartLegend Visibility="Visible" />
-
-</chart:SfChart.Legend>
-
-<chart:ColumnSeries Interior="#bcbcbc"
-
-ItemsSource="{Binding SneakersDetail}" Label="2015"  
-
-XBindingPath="Brand" 
-
-YBindingPath="ItemsCount" />
-
-<chart:ColumnSeries ItemsSource="{Binding SneakersDetail}"  
-
-SegmentSpacing="0.5"
-
-Interior="#4a4a4a"  XBindingPath="Brand" 
-
-Label="2014" YBindingPath="postion"/>            
+<chart:SfChart 
+    x:Name="columnChart" 
+    AreaBorderBrush="DarkGray" 
+    Header="Usage of Metals"  
+    SideBySideSeriesPlacement="False"
+    AreaBorderThickness="1,1,1,1">
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis Header="Metals"/>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis Header="Usage"/>
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:SfChart.Legend>
+        <chart:ChartLegend Visibility="Visible"/>
+    </chart:SfChart.Legend>
+
+    <chart:ColumnSeries 
+        Interior="#bcbcbc"
+        ItemsSource="{Binding SneakersDetail}" 
+        Label="2015"
+        XBindingPath="Brand"
+       YBindingPath="ItemsCount" />
+
+    <chart:ColumnSeries 
+        ItemsSource="{Binding SneakersDetail}"  
+        SegmentSpacing="0.5"
+        Interior="#4a4a4a"  
+        XBindingPath="Brand"
+        Label="2014" 
+        YBindingPath="postion"/>
 
 </chart:SfChart>
 
@@ -71,70 +63,46 @@ Label="2014" YBindingPath="postion"/>
 {% highlight C# %}
 
 SfChart chart = new SfChart();
-
 chart.Header = "Usage of Metals";
-
 chart.AreaBorderBrush = new SolidColorBrush(Colors.DarkGray);
-
 chart.SideBySideSeriesPlacement = false;
-
 chart.AreaBorderThickness = new Thickness(1);
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     Header = "Medals"
-
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-
     Header = "Usage"
-
 };
 
 chart.Legend = new ChartLegend()
 {
-
     Visibility = Visibility.Visible
-
 };
 
 ColumnSeries columnSeries1 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount",
-
     Label = "2015",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xbc, 0xbc, 0xbc)),
-
 };
 
 ColumnSeries columnSeries2 = new ColumnSeries()
 {
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "Position",
-
     Label = "2014",
-
     SegmentSpacing = 0.5,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
-
 };
 
-chart.Series.Add(columnSeries1);
-
+chart.Series.Add(columnSeries1);            
 chart.Series.Add(columnSeries2);
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/RadarandPolar.md b/wpf/Charts/SeriesTypes/RadarandPolar.md
index 654f711aae..677f52be4e 100644
--- a/wpf/Charts/SeriesTypes/RadarandPolar.md
+++ b/wpf/Charts/SeriesTypes/RadarandPolar.md
@@ -19,15 +19,11 @@ The following code example illustrates the use of radar series:
 
 {% highlight xaml %}
 
-<chart:RadarSeries ItemsSource="{Binding PlantDetails}" 
-
-Interior="#BCBCBC"
-
-XBindingPath="Direction"
-
-YBindingPath="Tree" >
-
-</chart:RadarSeries>        
+<chart:RadarSeries 
+    ItemsSource="{Binding PlantDetails}" 
+    Interior="#BCBCBC"
+    XBindingPath="Direction"
+    YBindingPath="Tree"/>
 
 {% endhighlight %}
 
@@ -35,15 +31,10 @@ YBindingPath="Tree" >
 
 RadarSeries series = new RadarSeries()
 {
-
     ItemsSource = new ViewModel().PlantDetails,
-
     XBindingPath = "Direction",
-
     YBindingPath = "Tree",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 chart.Series.Add(series);
@@ -64,13 +55,11 @@ N> You can explore our [WPF Radar Chart](https://www.syncfusion.com/wpf-controls
 
 {% highlight xaml %}
 
-<chart:PolarSeries Interior="#4A4A4A" 
-
-ItemsSource="{Binding PlantDetails}"  
-
-XBindingPath="Direction"
-
-YBindingPath="Tree" />                 
+<chart:PolarSeries 
+    Interior="#4A4A4A" 
+    ItemsSource="{Binding PlantDetails}"  
+    XBindingPath="Direction"
+    YBindingPath="Tree"/>
 
 {% endhighlight %}
 
@@ -78,15 +67,10 @@ YBindingPath="Tree" />
 
 PolarSeries series = new PolarSeries()
 {
-
     ItemsSource = new ViewModel().PlantDetails,
-
     XBindingPath = "Direction",
-
     YBindingPath = "Tree",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -112,15 +96,16 @@ This property used to draw the closed path as below.
 
 {% highlight xaml %}
 
-<chart:PolarSeries x:Name="series1" Interior="#4A4A4A" 
-
-ItemsSource="{Binding PlantDetails}"  
-
-Label="Amount Spent" DrawType="Line" IsClosed="False" 
-
-XBindingPath="Direction" YBindingPath="Tree" 
-
-StrokeThickness="2" />
+<chart:PolarSeries 
+    x:Name="series1" 
+    Interior="#4A4A4A" 
+    ItemsSource="{Binding PlantDetails}"  
+    Label="Amount Spent" 
+    DrawType="Line" 
+    IsClosed="False" 
+    XBindingPath="Direction" 
+    YBindingPath="Tree" 
+    StrokeThickness="2"/>
 
 {% endhighlight %}
 
@@ -128,23 +113,14 @@ StrokeThickness="2" />
 
 PolarSeries series = new PolarSeries()
 {
-
     ItemsSource = new ViewModel().PlantDetails,
-
     XBindingPath = "Direction",
-
     YBindingPath = "Tree",
-
     IsClosed = false,
-
     DrawType = ChartSeriesDrawType.Line,
-
     Label = "Amount Spent",
-
     StrokeThickness = 2,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -165,13 +141,14 @@ This property defines type of curve, whether its [`Line`](https://help.syncfusio
 
 {% highlight xaml %}
 
-<chart:PolarSeries x:Name="series1" Interior="#4A4A4A" 
-
-ItemsSource="{Binding PlantDetails}"  
-
-DrawType="Area" IsClosed="True" 
-
-XBindingPath="Direction" YBindingPath="Tree" />
+<chart:PolarSeries 
+    x:Name="series1" 
+    Interior="#4A4A4A" 
+    ItemsSource="{Binding PlantDetails}"
+    DrawType="Area"
+    IsClosed="True" 
+    XBindingPath="Direction" 
+    YBindingPath="Tree"/>
 
 {% endhighlight %}
 
@@ -179,19 +156,12 @@ XBindingPath="Direction" YBindingPath="Tree" />
 
 PolarSeries series = new PolarSeries()
 {
-
     ItemsSource = new ViewModel().PlantDetails,
-
     XBindingPath = "Direction",
-
     YBindingPath = "Tree",
-
     IsClosed = True,
-
     DrawType = ChartSeriesDrawType.Area,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -208,15 +178,15 @@ chart.Series.Add(series);
 
 {% highlight xaml %}
 
-<chart:PolarSeries x:Name="series1" Interior="#4A4A4A" 
-
-ItemsSource="{Binding PlantDetails}"  
-
-DrawType="Line" IsClosed="True" 
-
-XBindingPath="Direction" YBindingPath="Tree" 
-
-StrokeThickness="2" />
+<chart:PolarSeries 
+    x:Name="series1" 
+    Interior="#4A4A4A" 
+    ItemsSource="{Binding PlantDetails}"
+    DrawType="Line" 
+    IsClosed="True" 
+    XBindingPath="Direction" 
+    YBindingPath="Tree" 
+    StrokeThickness="2"/>
 
 {% endhighlight %}
 
@@ -224,21 +194,13 @@ StrokeThickness="2" />
 
 PolarSeries series = new PolarSeries()
 {
-
     ItemsSource = new ViewModel().PlantDetails,
-
     XBindingPath = "Direction",
-
     YBindingPath = "Tree",
-
     IsClosed = True,
-
     DrawType = ChartSeriesDrawType.Line,
-
     StrokeThickness = 2,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -262,35 +224,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  PolarAngle="Rotate0"/>
-
+    <chart:CategoryAxis  PolarAngle="Rotate0"/>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis PolarAngle="Rotate0"/>
-
+    <chart:NumericalAxis PolarAngle="Rotate0"/>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
- chart.PrimaryAxis = new CategoryAxis()
-
- {
-
+chart.PrimaryAxis = new CategoryAxis()
+{
     PolarAngle = ChartPolarAngle.Rotate0
-
- };
+};
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-
     PolarAngle = ChartPolarAngle.Rotate0
-            
 };
 
 {% endhighlight %}
@@ -309,35 +261,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  PolarAngle="Rotate90"/>
-
+    <chart:CategoryAxis PolarAngle="Rotate90"/>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis PolarAngle="Rotate90"/>
-
+    <chart:NumericalAxis PolarAngle="Rotate90"/>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
- chart.PrimaryAxis = new CategoryAxis()
-
- {
-
+chart.PrimaryAxis = new CategoryAxis()
+{
     PolarAngle = ChartPolarAngle.Rotate90
-
- };
+};
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-
     PolarAngle = ChartPolarAngle.Rotate90
-            
 };
 
 {% endhighlight %}
@@ -356,35 +298,25 @@ The below snippet explains how the axes of series has been rotated when [`PolarA
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  PolarAngle="Rotate180"/>
-
+    <chart:CategoryAxis PolarAngle="Rotate180"/>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis PolarAngle="Rotate180"/>
-
+    <chart:NumericalAxis PolarAngle="Rotate180"/>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
- chart.PrimaryAxis = new CategoryAxis()
-
- {
-
+chart.PrimaryAxis = new CategoryAxis()
+{
     PolarAngle = ChartPolarAngle.Rotate180
-
- };
+};
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-
     PolarAngle = ChartPolarAngle.Rotate180
-            
 };
 
 {% endhighlight %}
@@ -403,35 +335,25 @@ The below snippet explains how the axes of series has been rotated, when [`Polar
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  PolarAngle="Rotate270"/>
-
+    <chart:CategoryAxis PolarAngle="Rotate270"/>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis PolarAngle="Rotate270"/>
-
+    <chart:NumericalAxis PolarAngle="Rotate270"/>
 </chart:SfChart.SecondaryAxis>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
- chart.PrimaryAxis = new CategoryAxis()
-
- {
-
+chart.PrimaryAxis = new CategoryAxis()
+{                
     PolarAngle = ChartPolarAngle.Rotate270
-
- };
+};
 
 chart.SecondaryAxis = new NumericalAxis()
-
 {
-
     PolarAngle = ChartPolarAngle.Rotate270
-            
 };
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Range.md b/wpf/Charts/SeriesTypes/Range.md
index 141ad0cc0d..e2e9a8b5bf 100644
--- a/wpf/Charts/SeriesTypes/Range.md
+++ b/wpf/Charts/SeriesTypes/Range.md
@@ -19,13 +19,14 @@ The following code example shows the use of HiLo series:
 
 {% highlight xaml %}
 
-<chart:HiLoSeries Name="series" Interior="#4A4A4A" 
-
-ItemsSource="{Binding StockPriceDetails}" 
-
-XBindingPath="Date" StrokeThickness="3" 
-
-High="High" Low="Low" />
+<chart:HiLoSeries 
+    Name="series" 
+    Interior="#4A4A4A" 
+    ItemsSource="{Binding StockPriceDetails}" 
+    XBindingPath="Date" 
+    StrokeThickness="3" 
+    High="High"
+    Low="Low"/>
 
 {% endhighlight %}
 
@@ -33,17 +34,12 @@ High="High" Low="Low" />
 
 HiLoSeries series = new HiLoSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    High = "High", Low = "Low",
-
+    High = "High",
+    Low = "Low",
     StrokeThickness = 3,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 chart.Series.Add(series);
@@ -64,11 +60,12 @@ N> You can explore our [WPF HiLo Chart](https://www.syncfusion.com/wpf-controls/
 
 {% highlight xaml %}
 
-<chart:RangeColumnSeries ItemsSource="{Binding FinancialDatas}" 
-
-XBindingPath="Time" Interior="#4A4A4A"
-
-High="High" Low="Low"  />
+<chart:RangeColumnSeries 
+    ItemsSource="{Binding FinancialDatas}" 
+    XBindingPath="Time" 
+    Interior="#4A4A4A"
+    High="High" 
+    Low="Low"/>
 
 {% endhighlight %}
 
@@ -76,15 +73,11 @@ High="High" Low="Low"  />
 
 RangeColumnSeries series = new RangeColumnSeries()
 {
-
     ItemsSource = new ViewModel().FinancialDatas,
-
     XBindingPath = "Time",
-
-    High = "High", Low = "Low",
-
+    High = "High", 
+    Low = "Low",
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series);
@@ -106,13 +99,12 @@ N> You can explore our [WPF Range Column Chart](https://www.syncfusion.com/wpf-c
 
 {% highlight xaml %}
 
-<chart:RangeAreaSeries  XBindingPath="ProdName" 
-
-High="Stock" Low="Price"   
-
-Interior="#BCBCBC"        
-
-ItemsSource="{Binding Products}" />
+<chart:RangeAreaSeries  
+    ItemsSource="{Binding Products}"
+    XBindingPath="ProdName" 
+    High="Stock" 
+    Low="Price"
+    Interior="#BCBCBC"/>
 
 {% endhighlight %}
 
@@ -120,15 +112,11 @@ ItemsSource="{Binding Products}" />
 
 RangeAreaSeries series = new RangeAreaSeries()
 {
-
     ItemsSource = new ViewModel().Products,
-
     XBindingPath = "ProdName",
-
-    High = "Stock", Low = "Price",
-
+    High = "Stock", 
+    Low = "Price",
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 chart.Series.Add(series);
@@ -149,15 +137,14 @@ The APIs present in the RangeArea series are,
 
 {% highlight xaml %}
 
-<chart:RangeAreaSeries x:Name="RangeAreaSeries" XBindingPath="ProdName" 
-
-High="Stock" Low="Price"   
-
-LowValueInterior="#4A4A4A"
-
-HighValueInterior="#777777"
-
-ItemsSource="{Binding Products}" />
+<chart:RangeAreaSeries 
+    x:Name="RangeAreaSeries" 
+    XBindingPath="ProdName" 
+    High="Stock" 
+    Low="Price"   
+    LowValueInterior="#4A4A4A"
+    HighValueInterior="#777777"
+    ItemsSource="{Binding Products}"/> 
 
 {% endhighlight %}
 
@@ -165,17 +152,12 @@ ItemsSource="{Binding Products}" />
 
 RangeAreaSeries series = new RangeAreaSeries()
 {
-
     ItemsSource = new ViewModel().Products,
-
     XBindingPath = "ProdName",
-
-    High = "Stock", Low = "Price",
-
+    High = "Stock", 
+    Low = "Price",
     HighValueInterior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0x77)),
-
     LowValueInterior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series);
@@ -196,33 +178,24 @@ N> You can explore our [WPF Range Area Chart](https://www.syncfusion.com/wpf-con
 
 {% highlight xaml %}
 
-<chart:SplineRangeAreaSeries ItemsSource = "{Binding Products}"
-
-                             XBindingPath="ProdName" 
-
-                             High="Stock" 
-
-                             Low="Price"
-
-                             Interior="#BCBCBC" />
+<chart:SplineRangeAreaSeries 
+    ItemsSource = "{Binding Products}"
+    XBindingPath="ProdName"
+    High="Stock"
+    Low="Price" 
+    Interior="#BCBCBC"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SplineRangeAreaSeries splineRangeAreaSeries = new SplineRangeAreaSeries();
-
 splineRangeAreaSeries.ItemsSource = new ViewModel().Products;
-
 splineRangeAreaSeries.XBindingPath = "ProdName";
-
 splineRangeAreaSeries.High = "Stock";
-
 splineRangeAreaSeries.Low = "Price";
-
 splineRangeAreaSeries.Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC));
 
-
 chart.Series.Add(splineRangeAreaSeries);
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Series_images/wpf-bubble-chart.png b/wpf/Charts/SeriesTypes/Series_images/wpf-bubble-chart.png
index a4f094033c..50c0b4503b 100644
Binary files a/wpf/Charts/SeriesTypes/Series_images/wpf-bubble-chart.png and b/wpf/Charts/SeriesTypes/Series_images/wpf-bubble-chart.png differ
diff --git a/wpf/Charts/SeriesTypes/Series_images/wpf-candle-chart-comparision.png b/wpf/Charts/SeriesTypes/Series_images/wpf-candle-chart-comparision.png
index 3e130be66c..2a4cd30937 100644
Binary files a/wpf/Charts/SeriesTypes/Series_images/wpf-candle-chart-comparision.png and b/wpf/Charts/SeriesTypes/Series_images/wpf-candle-chart-comparision.png differ
diff --git a/wpf/Charts/SeriesTypes/Series_images/wpf-chart-curve-line-style.png b/wpf/Charts/SeriesTypes/Series_images/wpf-chart-curve-line-style.png
index af2d308232..c4bb4cbdfc 100644
Binary files a/wpf/Charts/SeriesTypes/Series_images/wpf-chart-curve-line-style.png and b/wpf/Charts/SeriesTypes/Series_images/wpf-chart-curve-line-style.png differ
diff --git a/wpf/Charts/SeriesTypes/Series_images/wpf-scatter-chart.png b/wpf/Charts/SeriesTypes/Series_images/wpf-scatter-chart.png
index 1134c6bade..4b2f8818b7 100644
Binary files a/wpf/Charts/SeriesTypes/Series_images/wpf-scatter-chart.png and b/wpf/Charts/SeriesTypes/Series_images/wpf-scatter-chart.png differ
diff --git a/wpf/Charts/SeriesTypes/Spline.md b/wpf/Charts/SeriesTypes/Spline.md
index 7c50b87fc0..c0383512b9 100644
--- a/wpf/Charts/SeriesTypes/Spline.md
+++ b/wpf/Charts/SeriesTypes/Spline.md
@@ -17,17 +17,17 @@ documentation: ug
 
 {% highlight xaml %}
 
-<chart:SplineSeries  XBindingPath="Year"     
-
-ItemsSource="{Binding List}" YBindingPath="India"               
-
-Interior="#4A4A4A"/>
-
-<chart:SplineSeries  XBindingPath="Year"     
-
-ItemsSource="{Binding List}" YBindingPath="America"               
-
-Interior="#4A4A4A"/>
+<chart:SplineSeries  
+    XBindingPath="Year"
+    ItemsSource="{Binding List}"
+    YBindingPath="India"
+    Interior="#4A4A4A"/>
+
+<chart:SplineSeries 
+    XBindingPath="Year"
+    ItemsSource="{Binding List}"
+    YBindingPath="America"
+    Interior="#4A4A4A"/>
 
 {% endhighlight %}
 
@@ -35,32 +35,21 @@ Interior="#4A4A4A"/>
 
 SplineSeries series1 = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 SplineSeries series2 = new SplineSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "America",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
@@ -110,11 +99,7 @@ N> You can explore our [WPF Spline Chart](https://www.syncfusion.com/wpf-control
 
 {% highlight xaml %}
 
-<chart:SplineAreaSeries Interior="#7F7F7F"              
-
-ItemsSource="{Binding Products}" XBindingPath="ProdName"     
-
-YBindingPath="Price" />
+<chart:SplineAreaSeries Interior="#7F7F7F" ItemsSource="{Binding Products}" XBindingPath="ProdName" YBindingPath="Price"/>
 
 {% endhighlight %}
 
@@ -122,17 +107,11 @@ YBindingPath="Price" />
 
 SplineAreaSeries series = new SplineAreaSeries()
 {
-
     ItemsSource = new ViewModel().Products,
-
     XBindingPath = "ProdName",
-
     YBindingPath = "Price",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0x7F))
-
 };
-
 chart.Series.Add(series);
 
 {% endhighlight %}
@@ -162,16 +141,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu
 
 {% highlight xaml %}
 
-<chart:SplineSeries SplineType="Cardinal">
-
-</chart:SplineSeries>
+<chart:SplineSeries SplineType="Monotonic"></chart:SplineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SplineSeries series = new SplineSeries();
-
 series.SplineType = SplineType.Cardinal;
 
 {% endhighlight %}
@@ -190,16 +166,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu
 
 {% highlight xaml %}
 
-<chart:SplineSeries SplineType="Monotonic">
-
-</chart:SplineSeries>
+<chart:SplineSeries SplineType="Monotonic"></chart:SplineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SplineSeries series = new SplineSeries();
-
 series.SplineType = SplineType.Monotonic;
 
 {% endhighlight %}
@@ -218,16 +191,13 @@ The following code illustrates how to set the [`SplineType`](https://help.syncfu
 
 {% highlight xaml %}
 
-<chart:SplineSeries SplineType="Clamped">
-
-</chart:SplineSeries>
+<chart:SplineSeries SplineType="Clamped"></chart:SplineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SplineSeries series = new SplineSeries();
-
 series.SplineType = SplineType.Clamped;
 
 {% endhighlight %}
diff --git a/wpf/Charts/SeriesTypes/Stacking.md b/wpf/Charts/SeriesTypes/Stacking.md
index bfca5f1977..44b0e9cac7 100644
--- a/wpf/Charts/SeriesTypes/Stacking.md
+++ b/wpf/Charts/SeriesTypes/Stacking.md
@@ -19,35 +19,23 @@ The following code example illustrates how to use [`StackingLineSeries`](https:/
 
 {% highlight xaml %}
 
-<chart:StackingLineSeries  
-
-XBindingPath="MonthlyExpenses"    
-
-YBindingPath="Father" 
-
-Interior="#4A4A4A"
-
-ItemsSource="{Binding Data}"/>
-
 <chart:StackingLineSeries
+    XBindingPath="MonthlyExpenses"
+    YBindingPath="Father"
+    Interior="#4A4A4A"
+    ItemsSource="{Binding Data}"/>
 
-XBindingPath="MonthlyExpenses" 
-
-YBindingPath="Mother"
-
-Interior="#BCBCBC"
-
-ItemsSource="{Binding Data}"/> 
+<chart:StackingLineSeries
+    XBindingPath="MonthlyExpenses" 
+    YBindingPath="Mother"
+    Interior="#BCBCBC"
+    ItemsSource="{Binding Data}"/>
 
 <chart:StackingLineSeries 
-
-XBindingPath="MonthlyExpenses" 
-
-YBindingPath="Son"
-
-Interior="#7F7F7F"
-
-ItemsSource="{Binding Data}" />
+    XBindingPath="MonthlyExpenses"
+    YBindingPath="Son"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding Data}"/>
 
 {% endhighlight %}
 
@@ -55,47 +43,30 @@ ItemsSource="{Binding Data}" />
 
 StackingLineSeries series1 = new StackingLineSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
-    YBindingPath ="Father",
-
+    YBindingPath = "Father",
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingLineSeries series2 = new StackingLineSeries()
-{
-
+{                
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
     YBindingPath = "Mother",
-
-    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
+    Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))     
 };
 
 StackingLineSeries series3 = new StackingLineSeries()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
     YBindingPath = "Son",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -114,30 +85,23 @@ N> You can explore our [WPF Stacked Line Chart](https://www.syncfusion.com/wpf-c
 
 {% highlight xaml %}
 
-<chart:StackingLine100Series ItemsSource="{Binding Data}" 
-
-XBindingPath="MonthlyExpenses" 
-
-YBindingPath="Father" 
-
-Interior="#4A4A4A"
-/>
-
-<chart:StackingLine100Series ItemsSource="{Binding Data}"
-
-XBindingPath="MonthlyExpenses"  
-
-YBindingPath="Mother"
-
-Interior="#BCBCBC"/>
+<chart:StackingLine100Series 
+    ItemsSource="{Binding Data}"
+    XBindingPath="MonthlyExpenses" 
+    YBindingPath="Father" 
+    Interior="#4A4A4A"/>
 
-<chart:StackingLine100Series ItemsSource="{Binding Data}"
+<chart:StackingLine100Series 
+    ItemsSource="{Binding Data}"
+    XBindingPath="MonthlyExpenses"
+    YBindingPath="Mother"
+    Interior="#BCBCBC"/>
 
-XBindingPath="MonthlyExpenses" 
-
-YBindingPath="Son"
-
-Interior="#7F7F7F"/>
+<chart:StackingLine100Series 
+    ItemsSource="{Binding Data}"
+    XBindingPath="MonthlyExpenses" 
+    YBindingPath="Son"
+    Interior="#7F7F7F"/>
 
 {% endhighlight %}
 
@@ -145,47 +109,30 @@ Interior="#7F7F7F"/>
 
 StackingLine100Series series1 = new StackingLine100Series()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
     YBindingPath = "Father",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingLine100Series series2 = new StackingLine100Series()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
     YBindingPath = "Mother",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingLine100Series series3 = new StackingLine100Series()
 {
-
     ItemsSource = new ViewModel().Data,
-
     XBindingPath = "MonthlyExpenses",
-
     YBindingPath = "Son",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -206,33 +153,23 @@ The following code example illustrates how to use StackingColumnSeries:
 
 {% highlight xaml %}
 
-<chart:StackingColumnSeries  
-
-XBindingPath="CountryName"    
-
-YBindingPath="GoldMedals" 
-
-Interior="#4A4A4A"
-
-ItemsSource="{Binding MedalDetails}"/>
+<chart:StackingColumnSeries               
+    XBindingPath="CountryName"    
+    YBindingPath="GoldMedals" 
+    Interior="#4A4A4A"
+    ItemsSource="{Binding MedalDetails}"/>
 
 <chart:StackingColumnSeries 
-
-Interior="#BCBCBC"
-
-XBindingPath="CountryName" 
-
-YBindingPath="SilverMedals"
-
-ItemsSource="{Binding MedalDetails}"/> 
+    Interior="#BCBCBC"
+    XBindingPath="CountryName" 
+    YBindingPath="SilverMedals"
+    ItemsSource="{Binding MedalDetails}"/>
 
 <chart:StackingColumnSeries 
-
-Interior="#7F7F7F"
-
-XBindingPath="CountryName" 
-
-YBindingPath="BronzeMedals" />
+    Interior="#7F7F7F"
+    XBindingPath="CountryName" 
+    YBindingPath="BronzeMedals"
+    ItemsSource="{Binding MedalDetails}"/>
 
 {% endhighlight %}
 
@@ -240,47 +177,30 @@ YBindingPath="BronzeMedals" />
 
 StackingColumnSeries series1 = new StackingColumnSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath ="GoldMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingColumnSeries series2 = new StackingColumnSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "SilverMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingColumnSeries series3 = new StackingColumnSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "BronzeMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -299,19 +219,17 @@ N> You can explore our [WPF Stacked Column Chart](https://www.syncfusion.com/wpf
 
 {% highlight xaml %}
 
-<chart:StackingColumn100Series  XBindingPath="CountryName" 
-
-YBindingPath="GoldMedals" Interior="#4A4A4A"
+<chart:StackingColumn100Series  
+    XBindingPath="CountryName" 
+    YBindingPath="GoldMedals" 
+    Interior="#4A4A4A"
+    ItemsSource="{Binding MedalDetails}"/>
 
-ItemsSource="{Binding MedalDetails}"/>
-
-<chart:StackingColumn100Series ItemsSource="{Binding MedalDetails}"
-
-XBindingPath="CountryName"  
-
-YBindingPath="SilverMedals"
-
-Interior="#BCBCBC"/>
+<chart:StackingColumn100Series 
+    ItemsSource="{Binding MedalDetails}"
+    XBindingPath="CountryName"
+    YBindingPath="SilverMedals"
+    Interior="#BCBCBC"/>
 
 {% endhighlight %}
 
@@ -319,47 +237,30 @@ Interior="#BCBCBC"/>
 
 StackingColumn100Series series1 = new StackingColumn100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "GoldMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingColumn100Series series2 = new StackingColumn100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "SilverMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingColumn100Series series3 = new StackingColumn100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "BronzeMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -378,35 +279,23 @@ N> You can explore our [WPF 100% Stacked Column Chart](https://www.syncfusion.co
 
 {% highlight xaml %}
 
-<chart:StackingBarSeries XBindingPath="CountryName"        
-
-Interior="#BCBCBC"
-
-YBindingPath="GoldMedals" 
-
-ItemsSource="{Binding MedalDetails}" >
+<chart:StackingBarSeries 
+    XBindingPath="CountryName"        
+    Interior="#BCBCBC"
+    YBindingPath="GoldMedals" 
+    ItemsSource="{Binding MedalDetails}"/>
 
-</chart:StackingBarSeries>
+<chart:StackingBarSeries 
+    Interior="#4A4A4A"
+    XBindingPath="CountryName" 
+    YBindingPath="SilverMedals" 
+    ItemsSource="{Binding MedalDetails}"/>
 
-<chart:StackingBarSeries Interior="#4A4A4A"
-
-XBindingPath="CountryName" 
-
-YBindingPath="SilverMedals" 
-
-ItemsSource="{Binding MedalDetails}">
-
-</chart:StackingBarSeries>
-
-<chart:StackingBarSeries Interior="#7F7F7F"
-
-XBindingPath="CountryName" 
-
-YBindingPath="BronzeMedals"
-
-ItemsSource="{Binding MedalDetails}" >
-
-</chart:StackingBarSeries>
+<chart:StackingBarSeries 
+    Interior="#7F7F7F"
+    XBindingPath="CountryName" 
+    YBindingPath="BronzeMedals"
+    ItemsSource="{Binding MedalDetails}"/>
 
 {% endhighlight %}
 
@@ -414,47 +303,30 @@ ItemsSource="{Binding MedalDetails}" >
 
 StackingBarSeries series1 = new StackingBarSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "GoldMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingBarSeries series2 = new StackingBarSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "SilverMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingBarSeries series3 = new StackingBarSeries()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "BronzeMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -473,29 +345,23 @@ N> You can explore our [WPF Stacked Bar Chart](https://www.syncfusion.com/wpf-co
 
 {% highlight xaml %}
 
-<chart:StackingBar100Series Interior="#BCBCBC"
-
-XBindingPath="CountryName" 
-
-YBindingPath="GoldMedals" 
-
-ItemsSource="{Binding MedalDetails}" />
-
-<chart:StackingBar100Series Interior="#4A4A4A" 
-
-XBindingPath="CountryName"                          
+<chart:StackingBar100Series 
+    Interior="#BCBCBC"
+    XBindingPath="CountryName" 
+    YBindingPath="GoldMedals" 
+    ItemsSource="{Binding MedalDetails}"/>
 
-YBindingPath="SilverMedals" 
+<chart:StackingBar100Series 
+    Interior="#4A4A4A" 
+    XBindingPath="CountryName"
+    YBindingPath="SilverMedals"
+    ItemsSource="{Binding MedalDetails}"/>
 
-ItemsSource="{Binding MedalDetails}" />
-
-<chart:StackingBar100Series Interior="#7F7F7F" 
-
-XBindingPath="CountryName" 
-
-YBindingPath="BronzeMedals" 
-
-ItemsSource="{Binding MedalDetails}" />
+<chart:StackingBar100Series 
+    Interior="#7F7F7F"
+    XBindingPath="CountryName"
+    YBindingPath="BronzeMedals" 
+    ItemsSource="{Binding MedalDetails}"/>
 
 {% endhighlight %}
 
@@ -503,49 +369,31 @@ ItemsSource="{Binding MedalDetails}" />
 
 StackingBar100Series series1 = new StackingBar100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "GoldMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingBar100Series series2 = new StackingBar100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "SilverMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingBar100Series series3 = new StackingBar100Series()
 {
-
     ItemsSource = new ViewModel().MedalDetails,
-
     XBindingPath = "CountryName",
-
     YBindingPath = "BronzeMedals",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
-
 {% endhighlight %}
 
 {% endtabs %}
@@ -560,25 +408,23 @@ chart.Series.Add(series3);
 
 {% highlight xaml %}
 
-<chart:StackingAreaSeries Interior="#BCBCBC" 
-
-XBindingPath="Month" YBindingPath="Bus" 
-
-ItemsSource="{Binding Accidents}" />
+<chart:StackingAreaSeries 
+    Interior="#BCBCBC" 
+    XBindingPath="Month" 
+    YBindingPath="Bus" 
+    ItemsSource="{Binding Accidents}"/>
 
-<chart:StackingAreaSeries Interior="#4A4A4A"                  
+<chart:StackingAreaSeries 
+    Interior="#4A4A4A"
+    XBindingPath="Month" 
+    YBindingPath="Car" 
+    ItemsSource="{Binding Accidents}"/>
 
-XBindingPath="Month" YBindingPath="Car" 
-
-ItemsSource="{Binding Accidents}" />
-
-<chart:StackingAreaSeries  Interior="#7F7F7FC"                     
-
-XBindingPath="Month" 
-
-YBindingPath="Truck" 
-
-ItemsSource="{Binding Accidents}" />
+<chart:StackingAreaSeries  
+    Interior="#7F7F7F"
+    XBindingPath="Month" 
+    YBindingPath="Truck" 
+    ItemsSource="{Binding Accidents}"/>
 
 {% endhighlight %}
 
@@ -586,47 +432,30 @@ ItemsSource="{Binding Accidents}" />
 
 StackingAreaSeries series1 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Bus",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingAreaSeries series2 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Car",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingAreaSeries series3 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Truck",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -647,29 +476,23 @@ The following code example shows the way to add stacking area 100 series:
 
 {% highlight xaml %}
 
-<chart:StackingArea100Series Interior="#BCBCBC" 
-
-XBindingPath="Month"         
+<chart:StackingArea100Series 
+    Interior="#BCBCBC" 
+    XBindingPath="Month"
+    YBindingPath="Bus" 
+    ItemsSource="{Binding Accidents}"/>
 
-YBindingPath="Bus" 
+<chart:StackingArea100Series 
+    Interior="#4A4A4A" 
+    XBindingPath="Month" 
+    YBindingPath="Car" 
+    ItemsSource="{Binding Accidents}"/>
 
-ItemsSource="{Binding Accidents}" 
-
-/>
-
-<chart:StackingArea100Series Interior="#4A4A4A" 
-
-XBindingPath="Month" YBindingPath="Car" 
-
-ItemsSource="{Binding Accidents}" />
-
-<chart:StackingArea100Series Interior="#7F7F7F" 
-
-XBindingPath="Month" 
-
-YBindingPath="Truck" 
-
-ItemsSource="{Binding Accidents}" />
+<chart:StackingArea100Series 
+    Interior="#7F7F7F" 
+    XBindingPath="Month" 
+    YBindingPath="Truck" 
+    ItemsSource="{Binding Accidents}"/>
 
 {% endhighlight %}
 
@@ -677,47 +500,30 @@ ItemsSource="{Binding Accidents}" />
 
 StackingArea100Series series1 = new StackingArea100Series()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Bus",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0X4A))
-
 };
 
 StackingArea100Series series2 = new StackingArea100Series()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Car",
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingArea100Series series3 = new StackingArea100Series()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Truck",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
@@ -732,31 +538,32 @@ You can draw open curve like Area using this [`IsClosed`](https://help.syncfusio
 
 {% highlight xaml %}
 
-<chart:StackingAreaSeries  Interior="#BCBCBC" Stroke="Black" StrokeThickness="3"
-
-IsClosed="False" XBindingPath="Month" 
-
-YBindingPath="Bus" 
-
-ItemsSource="{Binding Accidents}"/>
-
-<chart:StackingAreaSeries  Interior="#777777" Stroke="White" StrokeThickness="3"
-
-IsClosed="False"  XBindingPath="Month"             
-
-YBindingPath="Car"
-
-ItemsSource="{Binding Accidents}"/>
-
-<chart:StackingAreaSeries  Interior="#7F7F7F" Stroke="Black"   
-
-StrokeThickness="3" IsClosed="False"   
-
-XBindingPath="Month" 
-
-YBindingPath="Truck" 
-
-ItemsSource="{Binding Accidents}" />
+<chart:StackingAreaSeries  
+    Interior="#BCBCBC" 
+    Stroke="Black" 
+    StrokeThickness="3"
+    IsClosed="False" 
+    XBindingPath="Month" 
+    YBindingPath="Bus" 
+    ItemsSource="{Binding Accidents}"/>
+
+<chart:StackingAreaSeries  
+    Interior="#777777" 
+    Stroke="White" 
+    StrokeThickness="3"
+    IsClosed="False"  
+    XBindingPath="Month"
+    YBindingPath="Car"
+    ItemsSource="{Binding Accidents}"/>
+
+<chart:StackingAreaSeries  
+    Interior="#7F7F7F" 
+    Stroke="Black"   
+    StrokeThickness="3" 
+    IsClosed="False"   
+    XBindingPath="Month" 
+    YBindingPath="Truck" 
+    ItemsSource="{Binding Accidents}"/>
 
 {% endhighlight %}
 
@@ -764,65 +571,39 @@ ItemsSource="{Binding Accidents}" />
 
 StackingAreaSeries series1 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Bus",
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 3,
-
     IsClosed = false,
-
     Interior = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0XBC))
-
 };
 
 StackingAreaSeries series2 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Car",
-
     Stroke = new SolidColorBrush(Colors.White),
-
     StrokeThickness = 3,
-
     IsClosed = false,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x77, 0x77, 0X77))
-
 };
 
 StackingAreaSeries series3 = new StackingAreaSeries()
 {
-
     ItemsSource = new ViewModel().Accidents,
-
     XBindingPath = "Month",
-
     YBindingPath = "Truck",
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     StrokeThickness = 3,
-
     IsClosed = false,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7F, 0x7F, 0X7F))
-
 };
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
-
 chart.Series.Add(series3);
 
 {% endhighlight %}
diff --git a/wpf/Charts/Sorting.md b/wpf/Charts/Sorting.md
index 121ebb0d5a..a93380ed44 100644
--- a/wpf/Charts/Sorting.md
+++ b/wpf/Charts/Sorting.md
@@ -35,13 +35,14 @@ The following example illustrates a simple chart (without apply sorting):
 {% tabs %}
 
 {% highlight xml %}
-<syncfusion:ColumnSeries IsSortData="True" SortBy="X"  
-	
-	                     SortDirection="Ascending"
-
-                         ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-                         XBindingPath="Demand"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries 
+    IsSortData="True"
+    SortBy="X"
+    SortDirection="Ascending"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -49,21 +50,13 @@ The following example illustrates a simple chart (without apply sorting):
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.X,
-
     SortDirection = Direction.Ascending,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -81,13 +74,14 @@ chart.Series.Add(columnSeries);
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries IsSortData="True" SortBy="X"  
-	 
-	                     SortDirection="Descending"
-
-                         ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-                         XBindingPath="Demand"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="X"
+    SortDirection="Descending"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -95,21 +89,13 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.X,
-
     SortDirection = Direction.Descending,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -127,13 +113,14 @@ chart.Series.Add(columnSeries);
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries IsSortData="True" SortBy="Y" 
-	                   
-					     SortDirection="Ascending"
-
-                         ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-                         XBindingPath="Demand"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="Y"
+    SortDirection="Ascending"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 
 {% endhighlight %}
@@ -142,21 +129,13 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.Y,
-
     SortDirection = Direction.Ascending,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -174,13 +153,14 @@ chart.Series.Add(columnSeries);
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries IsSortData="True" SortBy="Y"  
-	
-	                     SortDirection="Descending"
-
-                         ItemsSource="{Binding Demands}" Interior="#4A4A4A"
-
-                         XBindingPath="Demand"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="Y"
+    SortDirection="Descending"
+    ItemsSource="{Binding Demands}"
+    Interior="#4A4A4A"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 
 {% endhighlight %}
@@ -189,21 +169,13 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.X,
-
     SortDirection = Direction.Descending,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Demand",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -233,13 +205,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries IsSortData="True" SortBy="X" Palette="AutumnBrights"
-
-                         SortDirection="Ascending"
-
-                         ItemsSource="{Binding Demands}" 
-
-                         XBindingPath="Position"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="X"
+    Palette="AutumnBrights"
+    SortDirection="Ascending"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Position"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -247,23 +220,14 @@ The following example illustrates a simple chart having AutumnBrights palette (w
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.X,
-
     SortDirection = Direction.Ascending,
-
     Palette = ChartColorPalette.AutumnBrights,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Position",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -280,15 +244,14 @@ chart.Series.Add(columnSeries);
 
 {% highlight xml %}
 
-<syncfusion:ColumnSeries IsSortData="True" SortBy="X" 
-	
-	                     Palette="AutumnBrights"
-
-                         SortDirection="Descending"
-
-                         ItemsSource="{Binding Demands}" 
-
-                         XBindingPath="Position"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="X"
+    Palette="AutumnBrights"
+    SortDirection="Descending"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Position"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -296,23 +259,14 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.X,
-
     SortDirection = Direction.Descending,
-
     Palette = ChartColorPalette.AutumnBrights,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Position",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -328,15 +282,15 @@ chart.Series.Add(columnSeries);
 {% tabs %}
 
 {% highlight xml %}
-<syncfusion:ColumnSeries IsSortData="True" SortBy="Y" 
-	
-	                     Palette="AutumnBrights"
-
-                         SortDirection="Ascending"
 
-                         ItemsSource="{Binding Demands}" 
-
-                         XBindingPath="Position"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="Y"
+    Palette="AutumnBrights"
+    SortDirection="Ascending"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Position"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -344,23 +298,14 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.Y,
-
     SortDirection = Direction.Ascending,
-
     Palette = ChartColorPalette.AutumnBrights,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Position",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
@@ -376,15 +321,15 @@ chart.Series.Add(columnSeries);
 {% tabs %}
 
 {% highlight xml %}
-<syncfusion:ColumnSeries IsSortData="True" SortBy="Y" 
-	
-	                     Palette="AutumnBrights"
-
-                         SortDirection="Descending"
 
-                         ItemsSource="{Binding Demands}" 
-
-                         XBindingPath="Position"  YBindingPath="Year2011"/>
+<syncfusion:ColumnSeries
+    IsSortData="True"
+    SortBy="Y"
+    Palette="AutumnBrights"
+    SortDirection="Descending"
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Demand"
+    YBindingPath="Year2011"/>
 
 {% endhighlight %}
 
@@ -392,23 +337,14 @@ chart.Series.Add(columnSeries);
 
 ColumnSeries columnSeries = new ColumnSeries()
 {
-
     IsSortData = true,
-
     SortBy = SortingAxis.Y,
-
     SortDirection = Direction.Descending,
-
     Palette = ChartColorPalette.AutumnBrights,
-
     ItemsSource = new ViewModel().Demands,
-
     XBindingPath = "Position",
-
     YBindingPath = "Year2011",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A))
-
 };
 
 chart.Series.Add(columnSeries);
diff --git a/wpf/Charts/Striplines.md b/wpf/Charts/Striplines.md
index deec31c03a..163a9bfb6e 100644
--- a/wpf/Charts/Striplines.md
+++ b/wpf/Charts/Striplines.md
@@ -20,17 +20,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="20" Width="10"  Background="#BCBCBC"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine Start="20" Width="10" Background="#BCBCBC"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -38,14 +32,11 @@ SfChart provides [`Start`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml
 {% highlight c# %}
 
 NumericalAxis axis = new NumericalAxis();
-
 ChartStripLine stripline = new ChartStripLine()
 {
-
-    Start = 20, Width = 10,
-
+    Start = 20, 
+    Width = 10,
     Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -70,19 +61,11 @@ The following code example illustrates the positioning of stripline based on pix
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="20" Width="10"  
-
-IsPixelWidth="True" Background="#BCBCBC"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine Start="20" Width="10" IsPixelWidth="True" Background="#BCBCBC"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -93,13 +76,10 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()
 {
-
-    Start = 20, Width = 10,
-
+    Start = 20, 
+    Width = 10,
     IsPixelWidth = true,
-
     Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -124,25 +104,17 @@ The [`LabelHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.U
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis>              
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="10" Width="10"  
-
-Label="Stock Price" 
-
-LabelHorizontalAlignment="Center" 
-
-LabelVerticalAlignment="Top"
-
-Background="#BCBCBC"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                Start="10"
+                Width="10"
+                Label="Stock Price"
+                LabelHorizontalAlignment="Center"
+                LabelVerticalAlignment="Top"
+                Background="#BCBCBC"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -153,17 +125,12 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()
 {
-
-    Start = 20, Width = 10,
-
+    Start = 20, 
+    Width = 10,
     Label = "Stock Price",
-
     LabelHorizontalAlignment = HorizontalAlignment.Center,
-
     LabelVerticalAlignment = VerticalAlignment.Top,
-
     Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -186,23 +153,16 @@ The label can be rotated to the specified angle using [`LabelAngle`](https://hel
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis>     
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="10" Width="20"  
-
-Label="Stock Price" 
-
-LabelAngle="-45"
-
-Background="#BCBCBC"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                Start="10"
+                Width="20"
+                Label="Stock Price"
+                LabelAngle="-45"
+                Background="#BCBCBC"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -213,15 +173,11 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()
 {
-
-    Start = 20, Width = 10,
-
+    Start = 20, 
+    Width = 10,
     Label = "Stock Price",
-
     LabelAngle = -45,
-
     Background = new SolidColorBrush(Color.FromRgb(0xBC, 0xBC, 0xBC))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -245,46 +201,35 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl
 
 {% highlight xaml %}
 
- <syncfusion:SfChart x:Name="chart">
-
+<syncfusion:SfChart x:Name="chart">
     <syncfusion:SfChart.Resources>
-
         <DataTemplate x:Key="labelTemplate">
-
-                    <Border Background="Gray" CornerRadius="5" >
-
-                        <TextBlock Text="{Binding }" Foreground="White" 
-                                   
-                                   FontStyle="Normal" FontSize="10" 
-                                   
-                                   FontWeight="Bold" Margin="3"/>
-
-                    </Border>
-
+            <Border
+                Background="Gray"
+                CornerRadius="5">
+                <TextBlock
+                    Text="{Binding}"
+                    Foreground="White"
+                    FontStyle="Normal"
+                    FontSize="10"
+                    FontWeight="Bold"
+                    Margin="3"/>
+            </Border>
         </DataTemplate>
-
     </syncfusion:SfChart.Resources>
 
     <syncfusion:SfChart.PrimaryAxis>
-
-          <syncfusion:NumericalAxis>
-
-                <syncfusion:NumericalAxis.StripLines>
-
-                    <syncfusion:ChartStripLine Width="20" Start="10" 
-                                                       
-                                               Label="Stock Price" 
-                                                       
-                                                Background="#C3C3C3"
-                                                       
-                                                LabelTemplate="{StaticResource labelTemplate}"/>
-
-                </syncfusion:NumericalAxis.StripLines>
-
-            </syncfusion:NumericalAxis>
-
+        <syncfusion:NumericalAxis>
+            <syncfusion:NumericalAxis.StripLines>
+                <syncfusion:ChartStripLine
+                    Width="20"
+                    Start="10"
+                    Label="Stock Price"
+                    Background="#C3C3C3"
+                    LabelTemplate="{StaticResource labelTemplate}"/>
+            </syncfusion:NumericalAxis.StripLines>
+        </syncfusion:NumericalAxis>
     </syncfusion:SfChart.PrimaryAxis>
-
 </syncfusion:SfChart>
         
 {% endhighlight %}
@@ -292,22 +237,15 @@ N> Here, Start and Width of the stripline as adjusted based on the rotation angl
 {% highlight c# %}
 
 SfChart chart = new SfChart();
-
 chart.PrimaryAxis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()
 {
-
     Width = 20,
-
     Start = 10,
-
     Label = "Stock Price",
-
     Background =new SolidColorBrush(Color.FromRgb(0xC3,0XC3,0XC3)),
-
     LabelTemplate = chart.Resources["labelTemplate"] as DataTemplate
-
 };
 
 chart.PrimaryAxis.StripLines.Add(stripline);
@@ -328,35 +266,28 @@ You can add multiple number of striplines in the same axis like the following co
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine 
-
-SegmentStartValue="0" 
-
-Width="10" 
-
-Start="0" Label="Low" Background="#C3C3C3"/>
-
-<syncfusion:ChartStripLine 
-
-Width="10" Start="20"
-
-Label="Average" Background="#C3C3C3"/>
-
-<syncfusion:ChartStripLine 
-
-Width="10" 
-
-Start="40" Label="High" Background="#C3C3C3"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                SegmentStartValue="0"
+                Start="0"
+                Width="10"
+                Label="Low"
+                Background="#C3C3C3"/>
+
+            <syncfusion:ChartStripLine
+                Start="20"
+                Width="10"
+                Label="Average"
+                Background="#C3C3C3"/>
+
+            <syncfusion:ChartStripLine
+                Start="40"
+                Width="10"
+                Label="High"
+                Background="#C3C3C3"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -367,41 +298,31 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline1 = new ChartStripLine()
 {
-
-    SegmentStartValue = 0, Start = 0,
-
-    Width = 10, Label = "Low",
-
+    SegmentStartValue = 0, 
+    Start = 0,
+    Width = 10, 
+    Label = "Low",
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 ChartStripLine stripline2 = new ChartStripLine()
 {
-
-    Start = 20, Width = 10,
-
+    Start = 20, 
+    Width = 10,
     Label = "Average",
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 ChartStripLine stripline3 = new ChartStripLine()
 {
-
-    Start = 40,Width = 10,
-
+    Start = 40,
+    Width = 10,
     Label = "High",
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 axis.StripLines.Add(stripline1);
-
 axis.StripLines.Add(stripline2);
-
 axis.StripLines.Add(stripline3);
 
 chart.SecondaryAxis = axis;
@@ -422,15 +343,19 @@ N> This can be used to fill plot area background alternatively.
 {% highlight xaml %}
 
 <syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine RepeatEvery="20" RepeatUntil="50"
-
-Width="10"  Start="0" Background="#C3C3C3"/>
-
-<syncfusion:ChartStripLine RepeatEvery="20" RepeatUntil="50"
-
-Width="10"  Start="10" Background="#A3A3A3"/>
-
+    <syncfusion:ChartStripLine
+        RepeatEvery="20"
+        RepeatUntil="50"
+        Start="0"
+        Width="10"
+        Background="#C3C3C3"/>
+
+    <syncfusion:ChartStripLine
+        RepeatEvery="20"
+        RepeatUntil="50"
+        Start="10"
+        Width="10"
+        Background="#A3A3A3"/>
 </syncfusion:NumericalAxis.StripLines>
 
 {% endhighlight %}
@@ -440,35 +365,24 @@ Width="10"  Start="10" Background="#A3A3A3"/>
 NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline1 = new ChartStripLine()
-
 {
-
     RepeatEvery = 20,
-
     RepeatUntil = 50,
-
-    Start = 0, Width = 10,
-
+    Start = 0,
+    Width = 10,
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 ChartStripLine stripline2 = new ChartStripLine()
-
 {
-
     RepeatEvery = 20,
-
     RepeatUntil = 50,
-
-    Start = 10, Width = 10,
-
+    Start = 10,
+    Width = 10,
     Background = new SolidColorBrush(Color.FromRgb(0xA3, 0xA3, 0xA3))
-
 };
 
 axis.StripLines.Add(stripline1);
-
 axis.StripLines.Add(stripline2);
 
 chart.SecondaryAxis = axis;
@@ -493,45 +407,39 @@ The following code example demonstrates segmented striplines.
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine 
-
-IsSegmented="True" SegmentStartValue="0" 
-
-Width="10" SegmentEndValue="2"                                               
-
-SegmentAxisName="Segment1"  
-
-Start="0" Label="Low" Background="#C3C3C3"/>
-
-<syncfusion:ChartStripLine 
-
-IsSegmented="True" SegmentStartValue="2"
-
-SegmentAxisName="Segment2"  
-
-Width="10" SegmentEndValue="4" Start="20"
-
-Label="Average" Background="#C3C3C3"/>
-
-<syncfusion:ChartStripLine 
-
-IsSegmented="True" SegmentStartValue="4" 
-
-Width="10" SegmentEndValue="6" 
-
-SegmentAxisName="Segment3"  
-
-Start="40" Label="High" Background="#C3C3C3"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                IsSegmented="True"
+                SegmentStartValue="0"
+                SegmentEndValue="2"
+                SegmentAxisName="Segment1"
+                Start="0"
+                Width="10"
+                Label="Low"
+                Background="#C3C3C3"/>
+
+            <syncfusion:ChartStripLine
+                IsSegmented="True"
+                SegmentStartValue="2"
+                SegmentEndValue="4"
+                SegmentAxisName="Segment2"
+                Start="20"
+                Width="10"
+                Label="Average"
+                Background="#C3C3C3"/>
+
+            <syncfusion:ChartStripLine
+                IsSegmented="True"
+                SegmentStartValue="4"
+                SegmentEndValue="6"
+                SegmentAxisName="Segment3"
+                Start="40"
+                Width="10"
+                Label="High"
+                Background="#C3C3C3"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -542,63 +450,42 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline1 = new ChartStripLine()
 {
-
     IsSegmented = true,
-
     SegmentStartValue = 0,
-
     SegmentEndValue = 2,
-
     SegmentAxisName = "Segment1",
-
-    Start = 0, Width = 10,
-
+    Start = 0,
+    Width = 10,
     Label = "Low",
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 ChartStripLine stripline2 = new ChartStripLine()
 {
     IsSegmented = true,
-
     SegmentStartValue = 2,
-
     SegmentEndValue = 4,
-
     SegmentAxisName = "Segment2",
-
-    Start = 20, Width = 10,
-
+    Start = 20,
+    Width = 10,
     Label = "Average",
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
 };
 
 ChartStripLine stripline3 = new ChartStripLine()
 {
-
     IsSegmented = true,
-
     SegmentStartValue = 4,
-
     SegmentEndValue = 6,
-
     SegmentAxisName = "Segment3",
-
-    Start = 40, Width = 10,
-
+    Start = 40,
+    Width = 10,
     Label = "High",
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 axis.StripLines.Add(stripline1);
-
 axis.StripLines.Add(stripline2);
-
 axis.StripLines.Add(stripline3);
 
 chart.SecondaryAxis = axis;
@@ -619,23 +506,16 @@ The background, border brush and border thickness of the stripline can be modifi
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="20" Width="15"   
-
-BorderBrush="Black" 
-
-BorderThickness="2"
-
-Background="#C3C3C3"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                Start="20"
+                Width="15"
+                BorderBrush="Black"
+                BorderThickness="2"
+                Background="#C3C3C3"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 {% endhighlight %}
@@ -645,17 +525,12 @@ Background="#C3C3C3"/>
 NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()  
-
 {
-
-    Start = 20, Width = 15,
-
+    Start = 20, 
+    Width = 15,
     BorderThickness = new Thickness(2),
-
     BorderBrush = new SolidColorBrush(Colors.Black),
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -678,39 +553,27 @@ You can set the transparency for the striplines using `Opacity` property as in t
 {% highlight xaml %}
 
 <syncfusion:SfChart.SecondaryAxis>
-
-<syncfusion:NumericalAxis >
-
-<syncfusion:NumericalAxis.StripLines>
-
-<syncfusion:ChartStripLine Start="25" Width="15" 
-
-Opacity="0.4" Background="#C3C3C3"/>
-
-</syncfusion:NumericalAxis.StripLines>
-
-</syncfusion:NumericalAxis>
-
+    <syncfusion:NumericalAxis>
+        <syncfusion:NumericalAxis.StripLines>
+            <syncfusion:ChartStripLine
+                Start="25"
+                Width="15"
+                Opacity="0.4"
+                Background="#C3C3C3"/>
+        </syncfusion:NumericalAxis.StripLines>
+    </syncfusion:NumericalAxis>
 </syncfusion:SfChart.SecondaryAxis>
 
 <syncfusion:SfChart.Watermark>
-
-<syncfusion:Watermark >
-
-<syncfusion:Watermark.Content>
-
-<TextBlock Text="StockValue">
-
-<TextBlock.RenderTransform>
-
-<RotateTransform Angle="345"/>
-
-</TextBlock.RenderTransform>                        
-
-</TextBlock>
-
-</syncfusion:Watermark.Content>
-
+    <syncfusion:Watermark>
+        <syncfusion:Watermark.Content>
+            <TextBlock Text="StockValue">
+                <TextBlock.RenderTransform>
+                    <RotateTransform Angle="345"/>
+                </TextBlock.RenderTransform>
+            </TextBlock>
+        </syncfusion:Watermark.Content>
+    </syncfusion:Watermark>
 </syncfusion:SfChart.Watermark>
 
 {% endhighlight %}
@@ -721,13 +584,10 @@ NumericalAxis axis = new NumericalAxis();
 
 ChartStripLine stripline = new ChartStripLine()
 {
-
-    Start = 25,Width = 15,
-
+    Start = 25,
+    Width = 15,
     Opacity = 0.4,
-
     Background = new SolidColorBrush(Color.FromRgb(0xC3, 0xC3, 0xC3))
-
 };
 
 axis.StripLines.Add(stripline);
@@ -736,19 +596,13 @@ chart.SecondaryAxis = axis;
 
 chart.Watermark = new Watermark()
 {
-
     HorizontalAlignment = HorizontalAlignment.Center,
-
     VerticalAlignment = VerticalAlignment.Center
-
 };
 
 TextBlock textBlock = new TextBlock();
-
 textBlock.Text = "StockValue";
-
 textBlock.FontSize = 70;
-
 textBlock.RenderTransform = new RotateTransform() { Angle = 345 };
 
 chart.Watermark.Content = textBlock;
@@ -763,4 +617,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to display striplines in DateTimeAxis of WPF Chart`](https://support.syncfusion.com/kb/article/9199/how-to-display-striplines-in-datetimeaxis-of-wpf-chart)
+[`How to display striplines in DateTimeAxis of WPF Chart?`](https://support.syncfusion.com/kb/article/9199/how-to-display-striplines-in-datetimeaxis-of-wpf-chart)
diff --git a/wpf/Charts/Technical-Indicators.md b/wpf/Charts/Technical-Indicators.md
index 8bcc8f9243..6f71ad07e8 100644
--- a/wpf/Charts/Technical-Indicators.md
+++ b/wpf/Charts/Technical-Indicators.md
@@ -26,11 +26,7 @@ Here for instance, the [Accumulation Distribution](https://help.syncfusion.com/c
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:AccumulationDistributionIndicator>
-
-</chart:AccumulationDistributionIndicator>
-
+    <chart:AccumulationDistributionIndicator/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -54,11 +50,12 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:AccumulationDistributionIndicator Open="Open" Close="Close" High="High" Low="Low">                    
-
-</chart:AccumulationDistributionIndicator>
-
+    <chart:AccumulationDistributionIndicator
+        Open="Open"
+        Close="Close"
+        High="High"
+        Low="Low">
+    </chart:AccumulationDistributionIndicator>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -67,11 +64,10 @@ Next you need to bind the property path for the [`Open`](https://help.syncfusion
 
 AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator()
 {
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low"
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low"
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -87,15 +83,14 @@ chart.TechnicalIndicators.Add(indicator);
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:AccumulationDistributionIndicator Open="Open" Close="Close"      High="High" 
-
-Low="Low"  ItemsSource="{Binding StockPriceDetails}" 
-
-XBindingPath="Date">                    
-
-</chart:AccumulationDistributionIndicator>
-
+    <chart:AccumulationDistributionIndicator
+        ItemsSource="{Binding StockPriceDetails}"
+        XBindingPath="Date"
+        Open="Open"
+        Close="Close"
+        High="High"
+        Low="Low">
+    </chart:AccumulationDistributionIndicator>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -104,15 +99,12 @@ XBindingPath="Date">
 
 AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource  = new ViewModel().StockPriceDetails,
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low"
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low"
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -137,15 +129,16 @@ You can define the [`AverageTrueRangeIndicator`](https://help.syncfusion.com/cr/
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:AverageTrueRangeIndicator ItemsSource="{Binding  ViewModel1}"    
-
-Period="3" XBindingPath="Date" Volume="Volume"
-
-SignalLineColor="Black" High="High" Low="Low"
-
-Open="Open" Close="Close"/ >
-
+    <chart:AverageTrueRangeIndicator
+        ItemsSource="{Binding StockPriceDetails}"
+        Period="3"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -154,19 +147,15 @@ Open="Open" Close="Close"/ >
 
 AverageTrueRangeIndicator indicator = new AverageTrueRangeIndicator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open", 
+    Close = "Close",
+    High = "High", 
+    Low = "Low",
+    Volume ="Volume",
+    Period = 3,
     SignalLineColor = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -187,17 +176,17 @@ The following code example demonstrates the usage of [`SimpleAverageIndicator`](
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:SimpleAverageIndicator ItemsSource="{Binding  ViewModel1}"  Period="3"     
-
-SignalLineColor="Black" XBindingPath="Date" 
-
-Volume="Volume"  
-
-High="High" Low="Low" Open="Open" Close="Close" >
-
-</chart:SimpleAverageIndicator >
-
+    <chart:SimpleAverageIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        SignalLineColor="Black"
+        XBindingPath="Date"
+        Volume="Volume"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close">
+    </chart:SimpleAverageIndicator>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -206,19 +195,15 @@ High="High" Low="Low" Open="Open" Close="Close" >
 
 SimpleAverageIndicator indicator = new SimpleAverageIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource = new ViewModel().ViewModel1,
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3,
     SignalLineColor = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -243,17 +228,18 @@ To define the [`RSITechnicalIndicator`](https://help.syncfusion.com/cr/wpf/Syncf
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:RSITechnicalIndicator 
-
-ItemsSource="{Binding  ViewModel1}"  Period="3"   
-
-SignalLineColor="Black" XBindingPath="Date" Volume="Volume"  
-
-UpperLineColor="Blue" LowerLineColor="Red"                  
-
-High="High" Low="Low" Open="Open" Close="Close"/>
-
+    <chart:RSITechnicalIndicator
+        ItemsSource="{Binding StockPriceDetails}"
+        Period="3"
+        SignalLineColor="Black"
+        XBindingPath="Date"
+        Volume="Volume"
+        UpperLineColor="Blue"
+        LowerLineColor="Red"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -262,23 +248,17 @@ High="High" Low="Low" Open="Open" Close="Close"/>
 
 RSITechnicalIndicator indicator = new RSITechnicalIndicator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3,
     SignalLineColor = new SolidColorBrush(Colors.Black),
-
     UpperLineColor = new SolidColorBrush(Colors.Blue),
-
     LowerLineColor = new SolidColorBrush(Colors.Red)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -300,17 +280,21 @@ The [`MomentumLineColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.
 
 {% highlight xaml %}
 
-<chart:SfChart.TechnicalIndicators>
-
-<chart:MomentumTechnicalIndicator ItemsSource="{Binding  ViewModel1}"     
 
-Period="3" CenterLineColor="Blue" XBindingPath="Date"        
-
-Volume="Volume" MomentumLineColor="Black"
-
-High="High" Low="Low" Open="Open" Close="Close"/ >
+<chart:SfChart.TechnicalIndicators>
+    <chart:MomentumTechnicalIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        CenterLineColor="Blue"
+        XBindingPath="Date"
+        Volume="Volume"
+        MomentumLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
+</chart:SfChart.TechnicalIndicators
 
-</chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
 
@@ -318,21 +302,16 @@ High="High" Low="Low" Open="Open" Close="Close"/ >
 
 MomentumTechnicalIndicator indicator = new MomentumTechnicalIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource = new ViewModel().ViewModel1,
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3,
     MomentumLineColor = new SolidColorBrush(Colors.Black),
-
     CenterLineColor = new SolidColorBrush(Colors.Red)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -357,17 +336,21 @@ You can define stochastic technical indicator using the following code example:
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:StochasticTechnicalIndicator ItemsSource="{Binding  ViewModel1}" 
-
-Period="3" SignalLineColor="Black" KPeriod="8" DPeriod="5"
-
-XBindingPath="Date" Volume="Volume" UpperLineColor="Blue"
-
-LowerLineColor="LightBlue" PeriodLineColor="Blue"
-
-High="High" Low="Low" Open="Open" Close="Close"/>
-
+    <chart:StochasticTechnicalIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        KPeriod="8"
+        DPeriod="5"
+        SignalLineColor="Black"
+        XBindingPath="Date"
+        Volume="Volume"
+        UpperLineColor="Blue"
+        LowerLineColor="LightBlue"
+        PeriodLineColor="Blue"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -376,25 +359,20 @@ High="High" Low="Low" Open="Open" Close="Close"/>
 
 StochasticTechnicalIndicator indicator = new StochasticTechnicalIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
-    XBindingPath = "Date", Volume = "Volume",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Period = 3,KPeriod = 8,DPeriod = 5,
-
+    ItemsSource = new ViewModel().ViewModel1,
+    XBindingPath = "Date",
+    Volume = "Volume",
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Period = 3,
+    KPeriod = 8,
+    DPeriod = 5,
     SignalLineColor = new SolidColorBrush(Colors.Black),
-
     PeriodLineColor = new SolidColorBrush(Colors.Red),
-
     UpperLineColor = new SolidColorBrush(Colors.Blue),
-
     LowerLineColor = new SolidColorBrush(Colors.Purple)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -415,15 +393,16 @@ The [`ExponentialAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusio
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:ExponentialAverageIndicator  ItemsSource="{Binding  ViewModel1}"    
-
-Period="3" XBindingPath="Date" Volume="Volume"
-
-SignalLineColor="Black" High="High" Low="Low"
-
-Open="Open" Close="Close"/ >
-
+    <chart:ExponentialAverageIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -432,19 +411,15 @@ Open="Open" Close="Close"/ >
 
 ExponentialAverageIndicator indicator = new ExponentialAverageIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource = new ViewModel().ViewModel1,
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3,
     SignalLineColor = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -465,15 +440,16 @@ The [`TriangularAverageIndicator`](https://help.syncfusion.com/cr/wpf/Syncfusion
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:TriangularAverageIndicator  ItemsSource="{Binding  ViewModel1}"    
-
-Period="3" XBindingPath="Date" Volume="Volume"
-
-SignalLineColor="Black" High="High" Low="Low"
-
-Open="Open" Close="Close"/ >
-
+    <chart:TriangularAverageIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -482,19 +458,15 @@ Open="Open" Close="Close"/ >
 
 TriangularAverageIndicator indicator = new TriangularAverageIndicator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3
     SignalLineColor = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -515,19 +487,16 @@ The following code example help you to add [`AccumulationDistributionIndicator`]
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:AccumulationDistributionIndicator 
-
-ItemsSource="{Binding  ViewModel1}" 
-
-XBindingPath="Date" Volume="Volume"    
-
-SignalLineColor="Black" High="High" Low="Low" 
-
-Open="Open" Close="Close" >                 
-
-</chart:AccumulationDistributionIndicator >
-
+    <chart:AccumulationDistributionIndicator
+        ItemsSource="{Binding ViewModel1}"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close">
+    </chart:AccumulationDistributionIndicator>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -536,19 +505,14 @@ Open="Open" Close="Close" >
 
 AccumulationDistributionIndicator indicator = new AccumulationDistributionIndicator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",                
     SignalLineColor = new SolidColorBrush(Colors.Black)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -571,17 +535,18 @@ You can define the [`BollingerBandIndicator`](https://help.syncfusion.com/cr/wpf
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:BollingerBandIndicator 
-
-ItemsSource="{Binding  ViewModel1}" Period="3"  
-
-UpperLineColor="Blue" LowerLineColor="Red"
-
-XBindingPath="Date" Volume="Volume" SignalLineColor="Black" 
-
-High="High" Low="Low" Open="Open" Close="Close"/>
-
+    <chart:BollingerBandIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Period="3"
+        UpperLineColor="Blue"
+        LowerLineColor="Red"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close"/>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -590,23 +555,17 @@ High="High" Low="Low" Open="Open" Close="Close"/>
 
 BollingerBandIndicator indicator = new BollingerBandIndicator()
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource = new ViewModel().ViewModel1,
     XBindingPath = "Date",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Volume ="Volume", Period = 3,
-
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Volume = "Volume",
+    Period = 3,
     SignalLineColor = new SolidColorBrush(Colors.Black),
-
     UpperLineColor = new SolidColorBrush(Colors.Blue),
-
     LowerLineColor = new SolidColorBrush(Colors.Red)
-
 };
 
 chart.TechnicalIndicators.Add(indicator);
@@ -633,19 +592,22 @@ You can define the [`MACDTechnicalIndicator`](https://help.syncfusion.com/cr/wpf
 {% highlight xaml %}
 
 <chart:SfChart.TechnicalIndicators>
-
-<chart:MACDTechnicalIndicator ItemsSource="{Binding  ViewModel1}" 
-
-Type="Line"  ShortPeriod="2" Period="3" LongPeriod="6"
-
-ConvergenceLineColor="Red" DivergenceLineColor="Blue"
-
-XBindingPath="Date" Volume="Volume" SignalLineColor="Black" 
-
-High="High" Low="Low" Open="Open" Close="Close" >
-
-</chart:MACDTechnicalIndicator >
-
+    <chart:MACDTechnicalIndicator
+        ItemsSource="{Binding ViewModel1}"
+        Type="Line"
+        ShortPeriod="2"
+        Period="3"
+        LongPeriod="6"
+        ConvergenceLineColor="Red"
+        DivergenceLineColor="Blue"
+        XBindingPath="Date"
+        Volume="Volume"
+        SignalLineColor="Black"
+        High="High"
+        Low="Low"
+        Open="Open"
+        Close="Close">
+    </chart:MACDTechnicalIndicator>
 </chart:SfChart.TechnicalIndicators>
 
 {% endhighlight %}
@@ -654,25 +616,20 @@ High="High" Low="Low" Open="Open" Close="Close" >
 
 MACDTechnicalIndicator indicator = new MACDTechnicalIndicator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
-    XBindingPath = "Date", Volume = "Volume",
-
-    Open = "Open", Close = "Close",
-
-    High = "High", Low = "Low",
-
-    Period = 3, ShortPeriod = 2, LongPeriod = 6,
-
-    Type = MACDType.Line ,
-
+    XBindingPath = "Date",
+    Volume = "Volume",
+    Open = "Open",
+    Close = "Close",
+    High = "High",
+    Low = "Low",
+    Period = 3,
+    ShortPeriod = 2,
+    LongPeriod = 6,
+    Type = MACDType.Line,
     SignalLineColor = new SolidColorBrush(Colors.Black),
-
     ConvergenceLineColor = new SolidColorBrush(Colors.Red),
-
-    DivergenceLineColor = new SolidColorBrush(Colors.Blue),
-
+    DivergenceLineColor = new SolidColorBrush(Colors.Blue)
 };
 
 chart.TechnicalIndicators.Add(indicator);
diff --git a/wpf/Charts/Trendlines.md b/wpf/Charts/Trendlines.md
index a73a8e3a41..07193d1f51 100644
--- a/wpf/Charts/Trendlines.md
+++ b/wpf/Charts/Trendlines.md
@@ -17,49 +17,42 @@ The following code examples illustrate how to add trend lines to the chart.
 
 {% highlight xaml %}
 
-<syncfusion:ScatterSeries Interior="#4A4A4A" XBindingPath="Year" Label="Series"
-
-ItemsSource="{Binding List}" YBindingPath="India"
-
-ScatterHeight="15" ScatterWidth="15">
-
-<syncfusion:ScatterSeries.Trendlines>
-
-<syncfusion:Trendline Label="Trend" />
-
-</syncfusion:ScatterSeries.Trendlines>
+<syncfusion:ScatterSeries
+    Interior="#4A4A4A"
+    ItemsSource="{Binding List}"
+    XBindingPath="Year"
+    YBindingPath="India"
+    Label="Series"
+    ScatterHeight="15"
+    ScatterWidth="15">
+
+    <syncfusion:ScatterSeries.Trendlines>
+        <syncfusion:Trendline Label="Trend"/>
+    </syncfusion:ScatterSeries.Trendlines>
 
 </syncfusion:ScatterSeries>
 
+
 {% endhighlight %}
 
 {% highlight c# %}
 
 ScatterSeries scatterSeries = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     ScatterHeight = 15,
-
     ScatterWidth = 15,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
-
     Label = "Series"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label ="Trend"
-
 };
+
 scatterSeries.Trendlines.Add(trendline);
 
 chart.Series.Add(scatterSeries);
@@ -79,17 +72,20 @@ The visibility of the trend line is defined using [`IsTrendlineVisible`](https:/
 
 {% highlight xaml %}
 
-<syncfusion:ScatterSeries Interior="#4A4A4A" XBindingPath="Year" Label="Series"
-
-ItemsSource="{Binding List}" YBindingPath="India"
-
-ScatterHeight="15" ScatterWidth="15">
-
-<syncfusion:ScatterSeries.Trendlines>
-
-<syncfusion:Trendline Label="Trend" IsTrendlineVisible="False"/>
-
-</syncfusion:ScatterSeries.Trendlines>
+<syncfusion:ScatterSeries
+    Interior="#4A4A4A"
+    ItemsSource="{Binding List}"
+    XBindingPath="Year"
+    YBindingPath="India"
+    Label="Series"
+    ScatterHeight="15"
+    ScatterWidth="15">
+
+    <syncfusion:ScatterSeries.Trendlines>
+        <syncfusion:Trendline
+            Label="Trend"
+            IsTrendlineVisible="False"/>
+    </syncfusion:ScatterSeries.Trendlines>
 
 </syncfusion:ScatterSeries>
 
@@ -99,34 +95,22 @@ ScatterHeight="15" ScatterWidth="15">
 
 ScatterSeries scatterSeries = new ScatterSeries()
 {
-
     ItemsSource = new ViewModel().List,
-
     XBindingPath = "Year",
-
     YBindingPath = "India",
-
     ScatterHeight = 15,
-
     ScatterWidth = 15,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4A, 0x4A, 0x4A)),
-
     Label = "Series"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
-    Label ="Trend",
-
+    Label = "Trend",
     IsTrendlineVisible = true
-
 };
 
 scatterSeries.Trendlines.Add(trendline);
-
 chart.Series.Add(scatterSeries);
 
 {% endhighlight %}
@@ -162,55 +146,40 @@ The following is the code example of this trend line.
 
 {% highlight xaml %}
 
-<syncfusion:FatLineSeries XBindingPath="Date"
-
-YBindingPath="Value" 
-
-Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Linear"/>
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
 
-</syncfusion:FastLineSeries.Trendlines>
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline  Stroke="Black" Type="Linear"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
-</syncfusion:FastLineSeries>
+ </syncfusion:FastLineSeries>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
-    Stroke =new SolidColorBrush(Colors.Black),
-
+    Stroke = new SolidColorBrush(Colors.Black),
     Type = TrendlineType.Linear
-
 };
 
 fastSeries.Trendlines.Add(trendline);
 
-chart.Series.Add(fastS
+chart.Series.Add(fastSeries);
 
 {% endhighlight %}
 
@@ -242,46 +211,32 @@ Interior="#7F7F7F"
 ItemsSource="{Binding StockPriceDetails}">
 
 <syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Exponential"/>
-
+    <syncfusion:Trendline  Stroke="Black" Type="Exponential"/>
 </syncfusion:FastLineSeries.Trendlines>
 
-</syncfusion:FastLineSeries>
-
 {% endhighlight %}
 
 {% highlight c# %}
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Exponential
-
 };
 
 fastSeries.Trendlines.Add(trendline);
 
-chart.Series.Add(fastS
+chart.Series.Add(fastSeries);
 
 {% endhighlight %}
 
@@ -306,19 +261,15 @@ The following code example explains how to define the power trendline.
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date"
-
-YBindingPath="Value" 
-
-Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
+<<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
 
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Power"/>
-
-</syncfusion:FastLineSeries.Trendlines>
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline  Stroke="Black" Type="Power"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -330,31 +281,22 @@ FastLineSeries fastSeries = new FastLineSeries()
 {
 
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Power
-
 };
 
 fastSeries.Trendlines.Add(trendline);
 
-chart.Series.Add(fastS
+chart.Series.Add(fastSeries);
 
 {% endhighlight %}
 
@@ -376,19 +318,15 @@ The following code example illustrates the use of logarithmic trend line.
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date"
-
-YBindingPath="Value" 
-
-Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
 
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Logarithmic"/>
-
-</syncfusion:FastLineSeries.Trendlines>
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline  Stroke="Black" Type="Logarithmic"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -398,33 +336,23 @@ ItemsSource="{Binding StockPriceDetails}">
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Logarithmic
-
 };
 
 fastSeries.Trendlines.Add(trendline);
 
-chart.Series.Add(fastS
+chart.Series.Add(fastSeries);
 
 {% endhighlight %}
 
@@ -446,19 +374,15 @@ To define the polynomial trendline, you can use the following code example.
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date"
-
-YBindingPath="Value" 
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
 
-Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Polynomial"/>
-
-</syncfusion:FastLineSeries.Trendlines>
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline  Stroke="Black" Type="Polynomial"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -468,33 +392,23 @@ ItemsSource="{Binding StockPriceDetails}">
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Polynomial
-
 };
 
 fastSeries.Trendlines.Add(trendline);
 
-chart.Series.Add(fastS
+chart.Series.Add(fastSeries);
 
 {% endhighlight %}
 
@@ -510,21 +424,18 @@ You can set the Polynomial order for this trendline. Polynomial order calculates
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date"
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
 
-YBindingPath="Value" 
-
-Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Polynomial"
-
-PolynomialOrder="5"/>
-
-</syncfusion:FastLineSeries.Trendlines>
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline
+            Stroke="Black"
+            Type="Polynomial"
+            PolynomialOrder="5"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -534,30 +445,19 @@ PolynomialOrder="5"/>
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Polynomial,
-
     PolynomialOrder = 5
-
 };
 
 fastSeries.Trendlines.Add(trendline);
@@ -587,19 +487,20 @@ For determining the future trends (in forward direction). The following code exa
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date" YBindingPath="Value" 
-
-Label="Stock Price"   Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black"
-
-Type="Polynomial" PolynomialOrder="3" ForwardForecast="5" />
-
-</syncfusion:FastLineSeries.Trendlines>
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Label="Stock Price"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
+
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline
+            Stroke="Black"
+            Type="Polynomial"
+            PolynomialOrder="3"
+            ForwardForecast="5"/>
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -609,32 +510,20 @@ Type="Polynomial" PolynomialOrder="3" ForwardForecast="5" />
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Polynomial,
-
     PolynomialOrder = 3,
-
     ForwardForecast = 5
-
 };
 
 fastSeries.Trendlines.Add(trendline);
@@ -655,20 +544,20 @@ For determining the past trends (in backward direction). The following code exam
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date" YBindingPath="Value" 
-
-Label="Stock Price"   Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black"
-
-Type="Polynomial" PolynomialOrder="3"  BackwardForecast="5"  />
-
-</syncfusion:FastLineSeries.Trendlines>
-
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Label="Stock Price"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
+
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline
+            Stroke="Black"
+            Type="Polynomial"
+            PolynomialOrder="3"
+            BackwardForecast="5"/>
+    </syncfusion:FastLineSeries.Trendlines>
 </syncfusion:FastLineSeries>
 
 {% endhighlight %}
@@ -677,32 +566,20 @@ Type="Polynomial" PolynomialOrder="3"  BackwardForecast="5"  />
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke =new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Polynomial,
-
     PolynomialOrder = 3,
-
     BackwardForecast = 5
-
 };
 
 fastSeries.Trendlines.Add(trendline);
@@ -724,19 +601,20 @@ You can customize the trendline [`Stroke`](https://help.syncfusion.com/cr/wpf/Sy
 
 {% highlight xaml %}
 
-<syncfusion:FastLineSeries XBindingPath="Date" YBindingPath="Value" 
-
-Label="Stock Price"   Interior="#7F7F7F"
-
-ItemsSource="{Binding StockPriceDetails}">
-
-<syncfusion:FastLineSeries.Trendlines>
-
-<syncfusion:Trendline Stroke="Black" Type="Linear"  
-
-StrokeDashArray="4,4" StrokeThickness="2" />
-
-</syncfusion:FastLineSeries.Trendlines>
+<syncfusion:FastLineSeries
+    XBindingPath="Date"
+    YBindingPath="Value"
+    Label="Stock Price"
+    Interior="#7F7F7F"
+    ItemsSource="{Binding StockPriceDetails}">
+
+    <syncfusion:FastLineSeries.Trendlines>
+        <syncfusion:Trendline
+            Stroke="Black"
+            Type="Linear"
+            StrokeDashArray="4,4"
+            StrokeThickness="2" />  
+    </syncfusion:FastLineSeries.Trendlines>
 
 </syncfusion:FastLineSeries>
 
@@ -746,36 +624,23 @@ StrokeDashArray="4,4" StrokeThickness="2" />
 
 FastLineSeries fastSeries = new FastLineSeries()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     YBindingPath = "Value",
-
     Interior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
     Label = "Stock Price"
-
 };
 
 Trendline trendline = new Trendline()
 {
-
     Label = "Trend",
-
     Stroke = new SolidColorBrush(Colors.Black),
-
     Type = TrendlineType.Linear,
-
     StrokeThickness = 2,
-
     StrokeDashArray = new DoubleCollection() { 4, 4 }
-
 };
 
 fastSeries.Trendlines.Add(trendline);
-
 chart.Series.Add(fastSeries);
 
 {% endhighlight %}
@@ -788,4 +653,4 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`Chart with average line`](https://support.syncfusion.com/kb/article/2804/how-to-get-line-graph-average-for-wpf-chart-sfchart)
+[`How to show the average line in a WPF Chart (SfChart) using Trendlines?`](https://support.syncfusion.com/kb/article/2804/how-to-get-line-graph-average-for-wpf-chart-sfchart)
diff --git a/wpf/Charts/Vertical-Charts.md b/wpf/Charts/Vertical-Charts.md
index 21b7e4fbe1..f2d58f8c14 100644
--- a/wpf/Charts/Vertical-Charts.md
+++ b/wpf/Charts/Vertical-Charts.md
@@ -20,42 +20,34 @@ Allows to position the axis in the opposite direction to the default position. T
 {% highlight xaml %}
 
 <chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis   OpposedPosition="True" >
-
-</chart:CategoryAxis>
-
+    <chart:CategoryAxis OpposedPosition="True">
+    </chart:CategoryAxis>
 </chart:SfChart.PrimaryAxis>
 
 <chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis Minimum="0" Maximum="40" Interval="10"                                   
-
-OpposedPosition="True"/>
-
+    <chart:NumericalAxis
+        Minimum="0"
+        Maximum="40"
+        Interval="10"
+        OpposedPosition="True"/>
 </chart:SfChart.SecondaryAxis>
 
+
 {% endhighlight %}
 
 {% highlight c# %}
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
-     OpposedPosition = true
-
+    OpposedPosition = true
 };
 
 chart.SecondaryAxis = new NumericalAxis()
 {
-     Minimum = 0,
-
-     Maximum = 40,
-
-     Interval = 10,
-
-     OpposedPosition = true
-
+    Minimum = 0,
+    Maximum = 40,
+    Interval = 10,
+    OpposedPosition = true
 };
 
 {% endhighlight %}
@@ -73,11 +65,12 @@ This property used to switch the plotting of the series to vertical.
 
 {% highlight xaml %}
 
-<chart:LineSeries  IsTransposed="True"
-
-ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 
-
-YBindingPath="ItemsCount" >
+<chart:LineSeries
+    IsTransposed="True"
+    ItemsSource="{Binding SneakersDetail}"
+    XBindingPath="Brand"
+    YBindingPath="ItemsCount">
+</chart:LineSeries>
 
 {% endhighlight %}
 
@@ -85,15 +78,10 @@ YBindingPath="ItemsCount" >
 
 LineSeries series = new LineSeries()
 {
-
-     IsTransposed = true,
-
-     ItemsSource = new ViewModel().SneakersDetail,
-
-     XBindingPath = "Brand",
-
-     YBindingPath = "ItemsCount"
-
+    IsTransposed = true,
+    ItemsSource  = new ViewModel().SneakersDetail,
+    XBindingPath = "Brand",
+    YBindingPath = "ItemsCount"
 };
 
 {% endhighlight %}
@@ -109,70 +97,61 @@ The following example demonstrates the vertical charts.
 
 {% highlight xaml %}
 
-<chart:SfChart>
-
-<chart:SfChart.ColumnDefinitions>
-
-<chart:ChartColumnDefinition />
-
-<chart:ChartColumnDefinition/>
-
-</chart:SfChart.ColumnDefinitions>
-
-<chart:SfChart.PrimaryAxis>
-
-<chart:CategoryAxis  ShowGridLines="False“ >
-
-</chart:CategoryAxis>
-
-</chart:SfChart.PrimaryAxis>
-
-<chart:SfChart.SecondaryAxis>
-
-<chart:NumericalAxis/>
-
-</chart:SfChart.SecondaryAxis>          
-
-<chart:LineSeries   IsTransposed="True"  
-
-ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 
-
-YBindingPath="ItemsCount" >
-
-<chart:LineSeries.AdornmentsInfo>
-
-<chart:ChartAdornmentInfo  ShowMarker="True" Symbol="Ellipse" 
-
-SymbolHeight="10" SymbolInterior="#7f7f7f" SymbolWidth="10">                        
-
-</chart:ChartAdornmentInfo>                        
-
-</chart:LineSeries.AdornmentsInfo>
-
-</chart:LineSeries>
-
-<chart:LineSeries  Interior="DarkGray" IsTransposed="True"
-
-ItemsSource="{Binding SneakersDetail}"  XBindingPath="Brand" 
-
-YBindingPath="postion" >
-
-<chart:LineSeries.AdornmentsInfo>
-
-<chart:ChartAdornmentInfo ShowLabel="False" ShowMarker="True" Symbol="Ellipse" SymbolHeight="10" 
-
-SymbolInterior="DarkGray" SymbolWidth="10"></chart:ChartAdornmentInfo>
-
-</chart:LineSeries.AdornmentsInfo>
-
-<chart:LineSeries.YAxis>
-
-<chart:NumericalAxis />
-
-</chart:LineSeries.YAxis>
-
-</chart:LineSeries>
 
+<chart:SfChart>
+    <chart:SfChart.ColumnDefinitions>
+        <chart:ChartColumnDefinition />
+        <chart:ChartColumnDefinition />
+    </chart:SfChart.ColumnDefinitions>
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:CategoryAxis ShowGridLines="False">
+        </chart:CategoryAxis>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis />
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:LineSeries
+        IsTransposed="True"
+        ItemsSource="{Binding SneakersDetail}"
+        XBindingPath="Brand"
+        YBindingPath="ItemsCount">
+
+        <chart:LineSeries.AdornmentsInfo>
+            <chart:ChartAdornmentInfo
+                ShowMarker="True"
+                Symbol="Ellipse"
+                SymbolHeight="10"
+                SymbolWidth="10"
+                SymbolInterior="#7f7f7f">
+            </chart:ChartAdornmentInfo>
+        </chart:LineSeries.AdornmentsInfo>
+    </chart:LineSeries>
+
+    <chart:LineSeries
+        IsTransposed="True"
+        Interior="DarkGray"
+        ItemsSource="{Binding SneakersDetail}"
+        XBindingPath="Brand"
+        YBindingPath="position">
+
+        <chart:LineSeries.AdornmentsInfo>
+            <chart:ChartAdornmentInfo
+                ShowLabel="False"
+                ShowMarker="True"
+                Symbol="Ellipse"
+                SymbolHeight="10"
+                SymbolWidth="10"
+                SymbolInterior="DarkGray">
+            </chart:ChartAdornmentInfo>
+        </chart:LineSeries.AdornmentsInfo>
+
+        <chart:LineSeries.YAxis>
+            <chart:NumericalAxis/>
+        </chart:LineSeries.YAxis>
+    </chart:LineSeries>
 </chart:SfChart>
 
 {% endhighlight %}
@@ -182,94 +161,61 @@ SymbolInterior="DarkGray" SymbolWidth="10"></chart:ChartAdornmentInfo>
 SfChart chart = new SfChart();
 
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
-
 chart.ColumnDefinitions.Add(new ChartColumnDefinition());
 
 chart.PrimaryAxis = new CategoryAxis()
 {
-
     ShowGridLines = true
-
 };
 
 NumericalAxis axis = new NumericalAxis();
-
 chart.SecondaryAxis = axis;
-
 ChartBase.SetColumn(axis, 1);
 
 LineSeries series1 = new LineSeries()
 {
-
     IsTransposed = true,
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "ItemsCount"
-
 };
 
 ChartAdornmentInfo adornmentInfo1 = new ChartAdornmentInfo()
 {
-
     ShowMarker = true,
-
     Symbol = ChartSymbol.Ellipse,
-
     SymbolHeight = 10,
-
     SymbolWidth = 10,
-
     SymbolInterior = new SolidColorBrush(Color.FromRgb(0x7f, 0x7f, 0x7f)),
-
 };
 
 LineSeries series2 = new LineSeries()
 {
-
     IsTransposed = true,
-
     Interior = new SolidColorBrush(Colors.DarkGray),
-
     ItemsSource = new ViewModel().SneakersDetail,
-
     XBindingPath = "Brand",
-
     YBindingPath = "position",
-
     YAxis = new NumericalAxis()
-
 };
 
 ChartAdornmentInfo adornmentInfo2 = new ChartAdornmentInfo()
 {
-
     ShowLabel = false,
-
     ShowMarker = true,
-
     Symbol = ChartSymbol.Ellipse,
-
     SymbolHeight = 10,
-
     SymbolWidth = 10,
-
     SymbolInterior = new SolidColorBrush(Colors.DarkGray),
-
 };
 
 series1.AdornmentsInfo = adornmentInfo1;
-
 series2.AdornmentsInfo = adornmentInfo2;
 
 ChartBase.SetColumn(series1, 0);
-
 ChartBase.SetColumn(series2, 1);
 
 chart.Series.Add(series1);
-
 chart.Series.Add(series2);
 
 {% endhighlight %}
diff --git a/wpf/Charts/Watermark.md b/wpf/Charts/Watermark.md
index 7e82ccf2b1..6516d08327 100644
--- a/wpf/Charts/Watermark.md
+++ b/wpf/Charts/Watermark.md
@@ -24,25 +24,16 @@ The following code example explains how to set your custom text as Watermark.
 {% highlight xaml %}
 
 <chart:SfChart.Watermark>
-
-<chart:Watermark VerticalAlignment="Center"         
-
-HorizontalAlignment="Center" >
-
-<chart:Watermark.Content>
-
-<TextBlock Text="Metals"  
-
-FontSize="70"
-
-Foreground="Black" >
-
-</TextBlock>
-
-</chart:Watermark.Content>
-
-</chart:Watermark>
-
+    <chart:Watermark
+        VerticalAlignment="Center"
+        HorizontalAlignment="Center">
+        <chart:Watermark.Content>
+            <TextBlock
+                Text="Metals"
+                FontSize="70"
+                Foreground="Black"/>
+        </chart:Watermark.Content>
+    </chart:Watermark>
 </chart:SfChart.Watermark>
 
 {% endhighlight %}
@@ -51,22 +42,15 @@ Foreground="Black" >
 
 chart.Watermark = new Watermark()
 {
-
-       HorizontalAlignment = HorizontalAlignment.Center,
-
-       VerticalAlignment = VerticalAlignment.Center
-
+    HorizontalAlignment = HorizontalAlignment.Center,
+    VerticalAlignment = VerticalAlignment.Center
 };
 
 chart.Watermark.Content = new TextBlock()
 {
-
-       Text = "Metals",
-
-       FontSize = 70,
-
-       Foreground = new SolidColorBrush(Colors.Black)
-
+    Text = "Metals",
+    FontSize = 70,
+    Foreground = new SolidColorBrush(Colors.Black)
 };
 
 {% endhighlight %}
@@ -84,19 +68,16 @@ You can also set images as Watermark as in below code snippet.
 {% highlight xaml %}
 
 <chart:SfChart.Watermark>
-
-<chart:Watermark VerticalAlignment="Center"               
-
-HorizontalAlignment="Center" >
-
-<chart:Watermark.Content>
-
-<Image Source="demands.png" Height="175" Width="175"/>
-
-</chart:Watermark.Content>
-
-</chart:Watermark>
-
+    <chart:Watermark
+        VerticalAlignment="Center"
+        HorizontalAlignment="Center">
+        <chart:Watermark.Content>
+            <Image
+                Source="demands.png"
+                Height="175"
+                Width="175"/>
+        </chart:Watermark.Content>
+    </chart:Watermark>
 </chart:SfChart.Watermark>
 
 {% endhighlight %}
@@ -105,22 +86,16 @@ HorizontalAlignment="Center" >
 
 chart.Watermark = new Watermark()
 {
-
-       HorizontalAlignment = HorizontalAlignment.Center,
-
-       VerticalAlignment = VerticalAlignment.Center
-
+    HorizontalAlignment = HorizontalAlignment.Center,
+    VerticalAlignment = VerticalAlignment.Center
 };
 
 chart.Watermark.Content = new Image()
 {
-
-       Height = 175,
-
-       Width = 175,
-
-       Source = new BitmapImage(new Uri(@"demands.png", UriKind.RelativeOrAbsolute))
-
+    Height = 175,
+    Width = 175,
+    Source = new BitmapImage(
+        new Uri(@"demands.png", UriKind.RelativeOrAbsolute))
 };
 
 {% endhighlight %}
@@ -133,5 +108,5 @@ N> You can refer to our [WPF Charts](https://www.syncfusion.com/wpf-controls/cha
 
 ## See also
 
-[`How to add watermark to chart`](https://www.syncfusion.com/kb/5225/how-to-add-watermark-to-chart)
+[`How to add watermark to chart?`](https://www.syncfusion.com/kb/5225/how-to-add-watermark-to-chart)
 
diff --git a/wpf/Circular-ProgressBar/Overview.md b/wpf/Circular-ProgressBar/Overview.md
index e0fe19f52f..c91cddebe9 100644
--- a/wpf/Circular-ProgressBar/Overview.md
+++ b/wpf/Circular-ProgressBar/Overview.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: About WPF Circular ProgressBar control | Syncfusion<sup>&reg;</sup>;
+title: About WPF Circular ProgressBar control | Syncfusion
 description: Learn here all about introduction of Syncfusion<sup>&reg;</sup>; WPF Circular ProgressBar (SfCircularProgressBar) control, its elements and more details.
 platform: wpf
 control: SfCircularProgressBar
diff --git a/wpf/DataGrid/Export-To-PDF.md b/wpf/DataGrid/Export-To-PDF.md
index 3c6c950ee1..7ee89e62f6 100644
--- a/wpf/DataGrid/Export-To-PDF.md
+++ b/wpf/DataGrid/Export-To-PDF.md
@@ -289,7 +289,7 @@ document.Save("Sample.pdf");
 {% endhighlight %}
 {% endtabs %}
 
-You can refer [PDF documentation](https://help.syncfusion.com/file-formats/pdf/open-and-save-pdf-file-in-c-sharp-vb-net#saving-a-pdf-document-to-file-system). 
+You can refer [PDF documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/saving-the-pdf-document). 
 
 ### Save as stream
 
@@ -304,7 +304,7 @@ fileStream.Close();
 {% endhighlight %}
 {% endtabs %}
 
-You can refer [PDF documentation](https://help.syncfusion.com/file-formats/pdf/open-and-save-pdf-file-in-c-sharp-vb-net#saving-a-pdf-document-to-stream). 
+You can refer [PDF documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/saving-the-pdf-document). 
 
 ### Save using File dialog
 
@@ -340,7 +340,7 @@ if (sfd.ShowDialog() == true)
 
 ## Opening exported PDF without saving
 
-You can view exported PDF document without saving by using [PDFViewerControl](https://help.syncfusion.com/wpf/pdf-viewer/overview).
+You can view exported PDF document without saving by using [PDFViewerControl](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/overview).
 
 {% tabs %}
 {% highlight c# %}
diff --git a/wpf/Diagram/Getting-Started.md b/wpf/Diagram/Getting-Started.md
index cd2ec03cbc..5af1c08a55 100644
--- a/wpf/Diagram/Getting-Started.md
+++ b/wpf/Diagram/Getting-Started.md
@@ -14,7 +14,7 @@ documentation: ug
 Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfdiagram) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.
 
 You can find more details about installing the NuGet package in a WPF application in the following link:
-[How to install nuget packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages)
+[How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages)
 
 
 The following section helps you to build your application with SfDiagram.
diff --git a/wpf/Range-Selector/Getting-Started.md b/wpf/Range-Selector/Getting-Started.md
index d4de3ee935..a8b0a172be 100644
--- a/wpf/Range-Selector/Getting-Started.md
+++ b/wpf/Range-Selector/Getting-Started.md
@@ -26,7 +26,7 @@ The following section explains how to create SfDateTimeRangeNavigator.
 
 ### Add the assembly reference
 
-1. Refer to this [article](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls to Visual Studio projects in various ways. You can also refer to [this](https://help.syncfusion.com/wpf/control-dependencies) link to learn about the assemblies required for adding Chart to your project.
+1. Refer to this [article](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls to Visual Studio projects in various ways. You can also refer to this [link](https://help.syncfusion.com/wpf/control-dependencies) to learn about the assemblies required for adding Chart to your project.
 2. Add the following namespace in your XAML page:
 
 {% capture codesnippet1 %}
@@ -46,13 +46,13 @@ xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts"
 
 <Syncfusion:SfDateTimeRangeNavigator>
 
-</Syncfusion:SfDateTimeRangeNavigator >
+</Syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight  %}
 
 {% highlight c# %}
 
- SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator();
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator();
 
 {% endhighlight %}
 
@@ -66,21 +66,21 @@ Since the above steps are enough to create only empty date-time range navigator,
 
 {% highlight xaml %}
 
-<Syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding UsersList}" XBindingPath="Date"  >
 
-</Syncfusion:SfDateTimeRangeNavigator >
+<Syncfusion:SfDateTimeRangeNavigator
+    ItemsSource="{Binding UsersList}"
+    XBindingPath="Date">
+</Syncfusion:SfDateTimeRangeNavigator>
+
 
 {% endhighlight  %}
 
 {% highlight c# %}
 
-SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-
-        ItemsSource = new ViewModel().UsersList,
-
-        XBindingPath ="Date"
-
+    ItemsSource = new ViewModel().UsersList,
+    XBindingPath = "Date"
 };
 
 {% endhighlight %}
@@ -116,73 +116,57 @@ Adds any UI content inside the date-time range navigator.</td></tr>
 
 {% highlight xaml %}
 
-<Syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding UsersList}" XBindingPath="Date"  >
-
-	<Syncfusion:SfDateTimeRangeNavigator.Content>
-
-		<Syncfusion:SfChart x:Name="Chart">
-
-			<Syncfusion:SfChart.PrimaryAxis>
-
-				<Syncfusion:DateTimeAxis/>
+<Syncfusion:SfDateTimeRangeNavigator
+    ItemsSource="{Binding UsersList}"
+    XBindingPath="Date">
 
-			</Syncfusion:SfChart.PrimaryAxis>
+    <Syncfusion:SfDateTimeRangeNavigator.Content>
+        <Syncfusion:SfChart x:Name="Chart">
 
-		<Syncfusion:SfChart.SecondaryAxis>
+            <Syncfusion:SfChart.PrimaryAxis>
+                <Syncfusion:DateTimeAxis/>
+            </Syncfusion:SfChart.PrimaryAxis>
 
-    <Syncfusion:NumericalAxis/>
+            <Syncfusion:SfChart.SecondaryAxis>
+                <Syncfusion:NumericalAxis/>
+            </Syncfusion:SfChart.SecondaryAxis>
 
-</Syncfusion:SfChart.SecondaryAxis>
+            <Syncfusion:LineSeries
+                ItemsSource="{Binding UsersList}"
+                XBindingPath="Date"
+                YBindingPath="NoOfUsers"/>
 
-<Syncfusion:LineSeries 
+        </Syncfusion:SfChart>
+    </Syncfusion:SfDateTimeRangeNavigator.Content>
 
-        ItemsSource="{Binding UsersList}" 
-
-        XBindingPath="Date”
-
-        YBindingPath="NoOfUsers">
-
-</Syncfusion:LineSeries>
-
-</Syncfusion:SfChart>
-
-</Syncfusion:SfDateTimeRangeNavigator.Content >
-
-</Syncfusion:SfDateTimeRangeNavigator >
+</Syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-SfChart chart = new SfChart();
-
-chart.PrimaryAxis = new DateTimeAxis();
-
-chart.SecondaryAxis = new NumericalAxis();
-
-LineSeries series = new LineSeries()
+SfChart chart = new SfChart
 {
+    PrimaryAxis = new DateTimeAxis(),
+    SecondaryAxis = new NumericalAxis()
+};
 
-        ItemsSource = new ViewModel().UsersList,
-
-        XBindingPath = "Date",
-
-        YBindingPath = "NoOfUsers"
-
+LineSeries series = new LineSeries
+{
+    ItemsSource = new ViewModel().UsersList,
+    XBindingPath = "Date",
+    YBindingPath = "NoOfUsers"
 };
 
 chart.Series.Add(series);
 
-SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-
-        ItemsSource = new ViewModel().StockPriceDetails,
-
-        XBindingPath ="Date"
-
+    ItemsSource = new ViewModel().UsersList,
+    XBindingPath = "Date",
+    Content = chart
 };
 
-rangeNavigator.Content = chart;
 
 {% endhighlight %}
 
@@ -223,48 +207,30 @@ SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator ();
 
 {% highlight c# %}
 
-public class ItemsSource
- {
-
-   public DateTime Date { get; set; }
-
-   public double NoOfUsers { get; set; }
-
- }
-
-public class UsersViewModel
-
- {
-
- public UsersViewModel()
-
-  {
-
-   this.UsersList = new ObservableCollection<ItemsSource>();
-
-   DateTime date = DateTime.Today;
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 5000 });
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 2000 });
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 7000 });
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 6000 });
-
-   UsersList.Add(new ItemsSource { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });  }
-
- public ObservableCollection<ItemsSource> UsersList
+public class ItemsSource
+{
+    public DateTime Date { get; set; }
+    public double NoOfUsers { get; set; }
+}
 
-  {
+public class UsersViewModel
+{
+    public ObservableCollection<ItemsSource> UsersList { get; set; }
 
-    get; set;
+    public UsersViewModel()
+    {
+        this.UsersList = new ObservableCollection<ItemsSource>();
 
-  }
+        DateTime date = DateTime.Today;
 
- }
+        UsersList.Add(new ItemsSource { Date = date.AddHours(1), NoOfUsers = 3000 });
+        UsersList.Add(new ItemsSource { Date = date.AddHours(2), NoOfUsers = 5000 });
+        UsersList.Add(new ItemsSource { Date = date.AddHours(3), NoOfUsers = 2000 });
+        UsersList.Add(new ItemsSource { Date = date.AddHours(4), NoOfUsers = 7000 });
+        UsersList.Add(new ItemsSource { Date = date.AddHours(5), NoOfUsers = 6000 });
+        UsersList.Add(new ItemsSource { Date = date.AddHours(6), NoOfUsers = 3000 });
+    }
+}
 
 {% endhighlight  %}
 
@@ -277,12 +243,11 @@ N> You can set any IEnumerable collection as ItemsSource.
 {% highlight c# %}
 
 //Intialize the SfDateTimeRangNavigator.
-
-SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator ();
-
-rangenavigator.ItemsSource = UsersList;
-
-rangenavigator.XBindingPath = "Date";
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
+{
+    ItemsSource  = UsersList,
+    XBindingPath = "Date"
+};
 
 {% endhighlight %}
 
@@ -293,23 +258,22 @@ Add the content that needs to be displayed inside the date-time range navigator
 
 {% highlight c# %}
 
-//Intialize the SfChart
-
-SfChart chart = new SfChart();
-
-LineSeries series = new LineSeries();
-
-series.ItemsSource = UsersList;
-
-series.XBindingPath = "Date";
+// Initialize the SfChart
+SfChart chart = new SfChart();
 
-series.YBindingPath = "NoOfUsers";
+LineSeries series = new LineSeries
+{
+    ItemsSource  = UsersList,
+    XBindingPath = "Date",
+    YBindingPath = "NoOfUsers"
+};
 
-var content = chart.Series.add(series);
+// Add series to chart
+chart.Series.Add(series);
 
-//Add content to navigator
+// Add chart as content to the RangeNavigator
+rangeNavigator.Content = chart;
 
-rangenavigator.Content = content;
 
 {% endhighlight  %}
 
@@ -318,7 +282,7 @@ The following screenshot illustrates the result of the above code sample.
 
 ![Content in WPF Range Selector](getting-started_images/wpf-range-selector-content.png)
 
-You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-DataTimeRangeNavigator)
+You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-DataTimeRangeNavigator).
 
 N> The [`SelectedData`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_SelectedData) property of the date-time range navigator control returns the collection that represents the data between the selected ranges.
 
diff --git a/wpf/Range-Selector/Interactivity.md b/wpf/Range-Selector/Interactivity.md
index 04acf4b6e1..2f4ec9107e 100644
--- a/wpf/Range-Selector/Interactivity.md
+++ b/wpf/Range-Selector/Interactivity.md
@@ -62,7 +62,6 @@ Enables deferred scrolling and panning.</td></tr>
 Gets or sets the delay value when the EnableDeferredUpdate is enabled.</td></tr>
 </table>
 
-
 ## Events
 
 <table>
@@ -73,18 +72,18 @@ Parameters</th><th>
 Description</th></tr>
 <tr>
 <td>
-{{'[`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfRangeNavigator.html)'| markdownify }}</td><td>
+{{'[`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfRangeNavigator_ValueChanged)'| markdownify }}</td><td>
 ValueChanged (Object sender, EventArgs e)</td><td>
 This event is triggered when the position of the scrollbar is changed</td></tr>
 <tr>
 <td>
-`LowerBarLabelsCreated`<br/><br/></td><td>
+{{'[`LowerBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerBarLabelsCreated)'| markdownify }}<br/><br/></td><td>
 LowerBarLabelsCreated(Object sender, LowerBarLabelsCreatedEventArgs e)<br/><br/></td><td>
 This event is triggered when the lower bar labels gets created.<br/><br/></td></tr>
 <tr>
 <td>
-`UpperBarLabelsCreated`<br/><br/></td><td>
-UpperBarLabelsCreated(Object sender, UpperBarLabelsCreatedEventArgs e)<br/><br/></td><td>
+{{'[`HigherBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherBarLabelsCreated)'| markdownify }}<br/><br/></td><td>
+HigherBarLabelsCreated(Object sender, HigherBarLabelsCreatedEventArgs e)<br/><br/></td><td>
 This event is triggered when the upper bar labels gets created.<br/><br/></td></tr>
 </table>
 
@@ -92,66 +91,63 @@ This event is triggered when the upper bar labels gets created.<br/><br/></td></
 
 {% highlight xaml %}
 
-<chart:SfChart x:Name="financialChart">            
-
-  <chart:SfChart.PrimaryAxis>
-
-         <chart:CategoryAxis Name="axis1" ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}" 
-         
-                             ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"
-
-                             Header="Date" LabelFormat="MMM/dd" 
-
-                             LabelTemplate="{StaticResource labelTemplate}" />                
-
-  </chart:SfChart.PrimaryAxis>            
-
-  <chart:SfChart.SecondaryAxis>                
-
-                  <chart:NumericalAxis  />  
-
-</chart:SfChart.SecondaryAxis>            
-
-<chart:CandleSeries Name="series" ItemsSource="{Binding StockPriceDetails}" XBindingPath="_Date"  High="High" Open="Open" Close="Close" Low="Low"  Label="Candleseries">            
-
-</chart:CandleSeries>        
-
-</chart:SfChart>        
-
-<chart:SfDateTimeRangeNavigator x:Name="RangeNavigator" ItemsSource="{Binding StockPriceDetails}" XBindingPath="_Date" >                
-
-	<chart:SfDateTimeRangeNavigator.Content>                   
-
-		<chart:SfLineSparkline ItemsSource="{Binding StockPriceDetails}"   YBindingPath="High" > 
-
-        </chart:SfLineSparkline>                
-
-	</chart:SfDateTimeRangeNavigator.Content>            
-
+<chart:SfChart x:Name="financialChart">
+
+    <chart:SfChart.PrimaryAxis>
+        <chart:DateTimeAxis
+            Name="axis1"
+            ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
+            ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"
+            Header="Date"
+            LabelFormat="MMM/dd"
+            LabelTemplate="{StaticResource labelTemplate}"/>
+    </chart:SfChart.PrimaryAxis>
+
+    <chart:SfChart.SecondaryAxis>
+        <chart:NumericalAxis/>
+    </chart:SfChart.SecondaryAxis>
+
+    <chart:CandleSeries
+        Name="series"
+        ItemsSource="{Binding StockPriceDetails}"
+        XBindingPath="_Date"
+        High="High"
+        Open="Open"
+        Close="Close"
+        Low="Low"
+        Label="Candleseries">
+    </chart:CandleSeries>
+
+</chart:SfChart>
+
+<chart:SfDateTimeRangeNavigator
+    x:Name="RangeNavigator"
+    ItemsSource="{Binding StockPriceDetails}"
+    XBindingPath="_Date">
+
+    <chart:SfDateTimeRangeNavigator.Content>
+        <chart:SfLineSparkline
+            ItemsSource="{Binding StockPriceDetails}"
+            YBindingPath="High">
+        </chart:SfLineSparkline>
+    </chart:SfDateTimeRangeNavigator.Content>
 </chart:SfDateTimeRangeNavigator>
 
 {% endhighlight  %}
 
 {% highlight c# %}
 
-SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
-    XBindingPath = "Date",
-
+    ItemsSource       = new ViewModel().StockPriceDetails,
+    XBindingPath      = "_Date",
     VerticalAlignment = VerticalAlignment.Top
-
 };
 
-SfLineSparkline sparkline = new SfLineSparkline()
+SfLineSparkline sparkline = new SfLineSparkline
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
+    ItemsSource  = new ViewModel().StockPriceDetails,
     YBindingPath = "High"
-
 };
 
 rangeNavigator.Content = sparkline;
@@ -160,40 +156,31 @@ Grid.SetColumn(rangeNavigator, 1);
 
 SfChart chart = new SfChart();
 
-chart.PrimaryAxis = new CategoryAxis()
+chart.PrimaryAxis = new CategoryAxis
 {
-
-    PlotOffset = 25,
-
-    Header = "Date",
-
-    LabelFormat = "MMM/dd",
-
+    PlotOffset   = 25,
+    Header       = "Date",
+    LabelFormat  = "MMM/dd",
     ZoomPosition = rangeNavigator.ZoomPosition,
-
-    ZoomFactor = rangeNavigator.ZoomFactor
-
+    ZoomFactor   = rangeNavigator.ZoomFactor
 };
 
 chart.SecondaryAxis = new NumericalAxis();
 
-CandleSeries candleSeries=new CandleSeries ()
+CandleSeries candleSeries = new CandleSeries
 {
-
-    ItemsSource = new ViewModel().StockPriceDetails,
-
-    High ="High", Low = "Low",
-
-    Open ="Open", Close ="Close",
-
-    XBindingPath ="Date",
-
-    Label ="CandleSeries"
-
+    ItemsSource  = new ViewModel().StockPriceDetails,
+    XBindingPath = "_Date",
+    High         = "High",
+    Low          = "Low",
+    Open         = "Open",
+    Close        = "Close",
+    Label        = "CandleSeries"
 };
 
 chart.Series.Add(candleSeries);
 
+
 {% endhighlight %}
 
 {% endtabs %}
@@ -220,33 +207,29 @@ SfDateTimeRangeNavigator [LeftThumbStyle](https://help.syncfusion.com/cr/wpf/Syn
 {% highlight xaml %}
 
 <syncfusion:SfDateTimeRangeNavigator x:Name="navigator">
-
     <syncfusion:SfRangeNavigator.Resources>
-
         <DataTemplate x:Key="symbolTemplate">
-
             <Grid>
-
-                <Ellipse Height="40" Width="40"  Fill="Green" Stroke="Black"
-                                 
-                                 VerticalAlignment="Center" StrokeThickness="2"/>
-
-                <Ellipse Height="7" Width="7" Fill="White" 
-
-                         VerticalAlignment="Center"/>
-                        
+                <Rectangle
+                    Height="30"
+                    Width="40"
+                    Fill="Green"
+                    Stroke="Black"
+                    StrokeThickness="2"
+                    VerticalAlignment="Center"/>
+
+                <Ellipse
+                    Height="7"
+                    Width="7"
+                    Fill="White"
+                    VerticalAlignment="Center"/>
             </Grid>
-
         </DataTemplate>
-
     </syncfusion:SfRangeNavigator.Resources>
 
     <syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
-
         <syncfusion:ThumbStyle SymbolTemplate="{StaticResource symbolTemplate}"/>
-
     </syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
-
 </syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight %}
@@ -255,20 +238,14 @@ SfDateTimeRangeNavigator [LeftThumbStyle](https://help.syncfusion.com/cr/wpf/Syn
 
 ThumbStyle thumbStyle = new ThumbStyle()
 {
-
     SymbolTemplate = grid.Resources["symbolTemplate"] as DataTemplate
-
 };
 
 SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     RightThumbStyle = thumbStyle
-
 };
 
 {% endhighlight %}
@@ -288,47 +265,29 @@ The following screenshot illustrates the control after customizing the right thu
 {% highlight xaml %}
 
 <Grid x:Name="grid">
-
-<Grid.Resources>
-
-    <Style TargetType="Line" x:Key="lineStyle1">
-
-        <Setter Property="Stroke" Value="Red"></Setter>
-
-        <Setter Property="StrokeThickness" Value="3"></Setter>
-
-        <Setter Property="StrokeDashArray" Value="2,1"></Setter>
-
-    </Style>
-
-    <Style TargetType="Line" x:Key="lineStyle2">
-
-        <Setter Property="Stroke" Value="Red"></Setter>
-
-        <Setter Property="StrokeThickness" Value="3"></Setter>
-
-        <Setter Property="StrokeDashArray" Value="2,1"></Setter>
-
-    </Style>
-
-</Grid.Resources>
-
-<syncfusion:SfDateTimeRangeNavigator>
-
-    <syncfusion:SfDateTimeRangeNavigator.LeftThumbStyle>
-
-        <syncfusion:ThumbStyle LineStyle="{StaticResource lineStyle1}"/>
-
-     </syncfusion:SfDateTimeRangeNavigator.LeftThumbStyle>
-
-    <syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
-
-        <syncfusion:ThumbStyle LineStyle="{StaticResource lineStyle2}"/>
-
-    </syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
-
-</syncfusion:SfDateTimeRangeNavigator>
-
+    <Grid.Resources>
+        <Style TargetType="Line" x:Key="lineStyle1">
+            <Setter Property="Stroke" Value="Red"></Setter>
+            <Setter Property="StrokeThickness" Value="3"></Setter>
+            <Setter Property="StrokeDashArray" Value="2,1"></Setter>
+        </Style>
+
+        <Style TargetType="Line" x:Key="lineStyle2">
+            <Setter Property="Stroke" Value="Red"></Setter>
+            <Setter Property="StrokeThickness" Value="3"></Setter>
+            <Setter Property="StrokeDashArray" Value="2,1"></Setter>
+        </Style>
+    </Grid.Resources>
+    
+    <syncfusion:SfDateTimeRangeNavigator>
+        <syncfusion:SfDateTimeRangeNavigator.LeftThumbStyle>
+            <syncfusion:ThumbStyle LineStyle="{StaticResource lineStyle1}"/>
+        </syncfusion:SfDateTimeRangeNavigator.LeftThumbStyle>
+
+        <syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
+            <syncfusion:ThumbStyle LineStyle="{StaticResource lineStyle2}"/>
+        </syncfusion:SfDateTimeRangeNavigator.RightThumbStyle>
+    </syncfusion:SfDateTimeRangeNavigator>
 </Grid>
 
 {% endhighlight %}
@@ -337,25 +296,18 @@ The following screenshot illustrates the control after customizing the right thu
 
 ThumbStyle thumbLineStyle1 = new ThumbStyle()
 {
-
     LineStyle = grid.Resources["lineStyle1"] as DataTemplate
-
 };
 
 ThumbStyle thumbLineStyle2 = new ThumbStyle()
 {
-
     LineStyle = grid.Resources["lineStyle2"] as DataTemplate
-
 };
 
 SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
 {
-
     LineStyle = thumbLineStyle1,
-
     LineStyle = thumbLineStyle2
-
 };
 
 {% endhighlight %}
diff --git a/wpf/Range-Selector/Label-Customization.md b/wpf/Range-Selector/Label-Customization.md
index a313312010..6359bd2499 100644
--- a/wpf/Range-Selector/Label-Customization.md
+++ b/wpf/Range-Selector/Label-Customization.md
@@ -36,40 +36,33 @@ Gets or sets string collection to set the label format for the navigator labels.
 
 {% highlight xaml %}
 
-<syncfusion:SfDateTimeRangeNavigator x:Name="rangepicker" ItemsSource="{Binding power}"  XBindingPath="Date" >
-
-	<syncfusion:SfDateTimeRangeNavigator.Intervals> 
-
-		<syncfusion:Interval IntervalType="Quarter"/>
-
-		<syncfusion:Interval IntervalType="Month"/>
-
-	</syncfusion:SfDateTimeRangeNavigator.Intervals>
-
-	<syncfusion:SfDateTimeRangeNavigator.Content>
-
-		<syncfusion:SfChart>
-
-			<syncfusion:SfChart.PrimaryAxis>
-
-				<syncfusion:CategoryAxis Visibility="Collapsed" />
-
-			</syncfusion:SfChart.PrimaryAxis>
-
-			<syncfusion:SfChart.SecondaryAxis>
-
-				<syncfusion:NumericalAxis Visibility="Collapsed" />
-
-			</syncfusion:SfChart.SecondaryAxis>
-
-			<syncfusion:FastLineBitmapSeries XBindingPath="Date" ItemsSource="{Binding power}" YBindingPath="Value">
-
-				</syncfusion:FastLineBitmapSeries>
-
-		</syncfusion:SfChart>
-
-		</syncfusion:SfDateTimeRangeNavigator.Content>
-
+<syncfusion:SfDateTimeRangeNavigator
+    x:Name="rangepicker"
+    ItemsSource="{Binding Power}"
+    XBindingPath="Date">
+
+    <syncfusion:SfDateTimeRangeNavigator.Intervals>
+        <syncfusion:Interval IntervalType="Quarter"/>
+        <syncfusion:Interval IntervalType="Month"/>
+    </syncfusion:SfDateTimeRangeNavigator.Intervals>
+
+    <syncfusion:SfDateTimeRangeNavigator.Content>
+        <syncfusion:SfChart>
+            <syncfusion:SfChart.PrimaryAxis>
+                <syncfusion:CategoryAxis Visibility="Collapsed"/>
+            </syncfusion:SfChart.PrimaryAxis>
+
+            <syncfusion:SfChart.SecondaryAxis>
+                <syncfusion:NumericalAxis Visibility="Collapsed"/>
+            </syncfusion:SfChart.SecondaryAxis>
+
+            <syncfusion:FastLineBitmapSeries
+                ItemsSource="{Binding Power}"
+                XBindingPath="Date"
+                YBindingPath="Value">
+            </syncfusion:FastLineBitmapSeries>
+        </syncfusion:SfChart>
+    </syncfusion:SfDateTimeRangeNavigator.Content>
 </syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight  %}
@@ -78,35 +71,36 @@ Gets or sets string collection to set the label format for the navigator labels.
 
 SfChart chart = new SfChart();
 
-chart.PrimaryAxis = new CategoryAxis() { Visibility = Visibility.Collapsed };
-
-chart.SecondaryAxis = new NumericalAxis() { Visibility = Visibility.Collapsed };
-
-FastLineBitmapSeries candleSeries = new FastLineBitmapSeries()
+chart.PrimaryAxis = new CategoryAxis
 {
+    Visibility = Visibility.Collapsed
+};
 
-	ItemsSource = new ViewModel().Power,
-
-	XBindingPath = "Date",
-
-	YBindingPath = "Value"
+chart.SecondaryAxis = new NumericalAxis
+{
+    Visibility = Visibility.Collapsed
+};
 
+FastLineBitmapSeries candleSeries = new FastLineBitmapSeries
+{
+    ItemsSource = new ViewModel().Power,
+    XBindingPath = "Date",
+    YBindingPath = "Value"
 };
 
 chart.Series.Add(candleSeries);
 
-SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-
-	ItemsSource = new ViewModel().Power,
-
-	XBindingPath = "Date"
-
+    ItemsSource = new ViewModel().Power,
+    XBindingPath = "Date"
 };
 
-rangeNavigator.Intervals.Add(new Interval() { IntervalType = NavigatorIntervalType.Quarter });
+rangeNavigator.Intervals.Add(
+    new Interval { IntervalType = NavigatorIntervalType.Quarter });
 
-rangeNavigator.Intervals.Add(new Interval() { IntervalType = NavigatorIntervalType.Month });
+rangeNavigator.Intervals.Add(
+    new Interval { IntervalType = NavigatorIntervalType.Month });
 
 rangeNavigator.Content = chart;
 
@@ -172,7 +166,7 @@ Property</th><th>
 Description</th></tr>
 <tr>
 <td>
-LabelBarStyle</td><td>
+{{'[`LabelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelBarStyle.html)'| markdownify }}</td><td>
 Allows to customize the label style using the LabelBarStyle property, and this property can be applied to the {{'[`HigherLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherLevelBarStyle)'| markdownify }} or {{'[`LowerLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerLevelBarStyle)'| markdownify }}.</td></tr>
 <tr>
 <td>
@@ -189,27 +183,18 @@ Positions the upper and lower labels inside or outside the label bar.</td></tr>
 {% highlight xaml %}
 
 <syncfusion:SfDateTimeRangeNavigator x:Name="navigator">
-
-    <syncfusion:SfRangeNavigator.Resources>
-
-        <Style TargetType="TextBlock" x:Key="labelStyle">
-
-            <Setter Property="FontSize" Value="10"/>
-
-        </Style>
-                
-    </syncfusion:SfRangeNavigator.Resources>
-
-    <syncfusion:SfDateTimeRangeNavigator.HigherLevelBarStyle>
-
-            <syncfusion:LabelBarStyle Background="Red" 
-                                          
-                                      LabelHorizontalAlignment="Left"  
-                                          
-                                      SelectedLabelStyle="{StaticResource labelStyle}"/>
-
-    </syncfusion:SfDateTimeRangeNavigator.HigherLevelBarStyle>
-
+	<syncfusion:SfRangeNavigator.Resources>
+		<Style TargetType="TextBlock" x:Key="labelStyle">
+			<Setter Property="FontSize" Value="10"/>
+		</Style>
+	</syncfusion:SfRangeNavigator.Resources>
+
+	<syncfusion:SfDateTimeRangeNavigator.HigherLevelBarStyle>
+		<syncfusion:LabelBarStyle 
+			Background="Red" 
+			LabelHorizontalAlignment="Left" 
+			SelectedLabelStyle="{StaticResource labelStyle}"/>
+	</syncfusion:SfDateTimeRangeNavigator.HigherLevelBarStyle>
 </syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight %}
@@ -218,21 +203,14 @@ Positions the upper and lower labels inside or outside the label bar.</td></tr>
 
 LabelBarStyle barStyle = new LabelBarStyle()
 {
-
 	LabelHorizontalAlignment = HorizontalAlignment.Left,
-
 	Background = new SolidColorBrush(Colors.Red),
-
 	SelectedLabelStyle = grid.Resources["labelStyle"] as Style
-
 };
 
-
 SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
 {
-
 	HigherLevelBarStyle = barStyle
-
 };
 
 {% endhighlight %}
@@ -264,17 +242,15 @@ The following screenshot demonstrates a [`RangePadding`](https://help.syncfusion
 
 {% highlight xaml %}
 
-<Syncfusion:SfDateTimeRangeNavigator RangePadding="None">
-
-</Syncfusion:SfDateTimeRangeNavigator >
+<Syncfusion:SfDateTimeRangeNavigator RangePadding="None"></Syncfusion:SfDateTimeRangeNavigator >
 
 {% endhighlight  %}
 
 {% highlight c# %}
 
- SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-    RangePadding = NavigatorRangePadding.None
+	RangePadding = NavigatorRangePadding.None
 };
 
 {% endhighlight %}
@@ -291,17 +267,15 @@ When the value of [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion
 
 {% highlight xaml %}
 
-<Syncfusion:SfDateTimeRangeNavigator RangePadding="Round">
-
-</Syncfusion:SfDateTimeRangeNavigator >
+<Syncfusion:SfDateTimeRangeNavigator RangePadding="Round"></Syncfusion:SfDateTimeRangeNavigator>
 
 {% endhighlight  %}
 
 {% highlight c# %}
 
- SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
+SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator
 {
-    RangePadding = NavigatorRangePadding.Round
+	RangePadding = NavigatorRangePadding.Round
 };
 
 {% endhighlight %}
diff --git a/wpf/Range-Selector/ToolTip-Support.md b/wpf/Range-Selector/ToolTip-Support.md
index f91a4559d6..d1a404c096 100644
--- a/wpf/Range-Selector/ToolTip-Support.md
+++ b/wpf/Range-Selector/ToolTip-Support.md
@@ -44,45 +44,36 @@ Sets the data template for the right tooltip.</td></tr>
 
 {% highlight xaml %}
 
-<chart:SfDateTimeRangeNavigator x:Name="RangeNavigator" 
+<chart:SfDateTimeRangeNavigator
+    x:Name="RangeNavigator"
+    ItemsSource="{Binding StockPriceDetails}"
+    XBindingPath="Date"
+    ShowToolTip="true"
+    ToolTipLabelFormat="MMM/dd/yyyy">
 
-ItemsSource="{Binding StockPriceDetails}" XBindingPath="_Date" 
+    <chart:SfDateTimeRangeNavigator.LeftToolTipTemplate>
+        <DataTemplate>
 
-ShowToolTip="true" ToolTipLabelFormat ="MMM/dd/yyyy">
+            -----------------------
 
-<chart:SfDateTimeRangeNavigator.LeftToolTipTemplate>
+        </DataTemplate>
+    </chart:SfDateTimeRangeNavigator.LeftToolTipTemplate>
 
-<DataTemplate>
-
------------------------
-
-</DataTemplate>
-
-</chart:SfDateTimeRangeNavigator.LeftToolTipTemplate>
-
-<chart:SfDateTimeRangeNavigator.Content>
-
-</chart:SfDateTimeRangeNavigator.Content>
+    <chart:SfDateTimeRangeNavigator.Content>
 
+    </chart:SfDateTimeRangeNavigator.Content>
 </chart:SfDateTimeRangeNavigator>
-
 {% endhighlight %}
 
 {% highlight c# %}
 
 SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator()
 {
-
     ItemsSource = new ViewModel().StockPriceDetails,
-
     XBindingPath = "Date",
-
     ShowToolTip = true,
-
     ToolTipLabelFormat = "yyyy/MMM/dd",
-
     LeftToolTipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate
-
 };
 
 {% endhighlight %}
diff --git a/wpf/Release-notes/v33.2.4.md b/wpf/Release-notes/v33.2.4.md
new file mode 100644
index 0000000000..283736c9a6
--- /dev/null
+++ b/wpf/Release-notes/v33.2.4.md
@@ -0,0 +1,96 @@
+---
+title: Essential Studio® for  WPF Release Notes - v33.2.4
+description: Learn here about the controls in the Essential Studio® for  WPF Weekly Nuget Release - Release Notes - v33.2.4
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio® for  WPF - v33.2.4 Release Notes
+
+{% include release-info.html date="April 28, 2026" version="v33.2.4" passed="30830" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|----------------|------------|--------|--------|---------|
+| Accordion | 48 | 48 | 0 | All Passed |
+| AI AssistView | 85 | 85 | 0 | All Passed |
+| AutoComplete | 37 | 37 | 0 | All Passed |
+| AvatarView | 229 | 229 | 0 | All Passed |
+| Badge | 7 | 7 | 0 | All Passed |
+| BreadCrumb | 8 | 8 | 0 | All Passed |
+| Bullet Graph | 151 | 151 | 0 | All Passed |
+| Busy Indicator | 10 | 10 | 0 | All Passed |
+| Button | 21 | 21 | 0 | All Passed |
+| Calendar | 63 | 63 | 0 | All Passed |
+| Card View | 27 | 27 | 0 | All Passed |
+| Carousel | 30 | 30 | 0 | All Passed |
+| Charts | 381 | 381 | 0 | All Passed |
+| CheckedListBox | 150 | 150 | 0 | All Passed |
+| Chromeless Window | 151 | 151 | 0 | All Passed |
+| Circular Gauge | 305 | 305 | 0 | All Passed |
+| Color Picker | 132 | 132 | 0 | All Passed |
+| Color Picker Palette | 102 | 102 | 0 | All Passed |
+| ComboBox | 127 | 127 | 0 | All Passed |
+| Currency TextBox | 139 | 139 | 0 | All Passed |
+| DataGrid | 5008 | 5008 | 0 | All Passed |
+| DataPager | 16 | 16 | 0 | All Passed |
+| DatePicker | 118 | 118 | 0 | All Passed |
+| DateTimePicker | 170 | 170 | 0 | All Passed |
+| Docking | 1101 | 1101 | 0 | All Passed |
+| DocumentContainer | 41 | 41 | 0 | All Passed |
+| Domain Updown | 295 | 295 | 0 | All Passed |
+| Double TextBox | 345 | 345 | 0 | All Passed |
+| Dropdown Button | 21 | 21 | 0 | All Passed |
+| Excel-like Grid | 15 | 15 | 0 | All Passed |
+| Gantt | 2549 | 2549 | 0 | All Passed |
+| GridDataControl | 549 | 549 | 0 | All Passed |
+| GridSplitter | 19 | 19 | 0 | All Passed |
+| GridTreeControl | 223 | 223 | 0 | All Passed |
+| Image Editor | 177 | 177 | 0 | All Passed |
+| Integer TextBox | 29 | 29 | 0 | All Passed |
+| Kanban Board | 112 | 112 | 0 | All Passed |
+| Linear Gauge | 27 | 27 | 0 | All Passed |
+| Maps | 1677 | 1677 | 0 | All Passed |
+| MaskedTextBox | 125 | 125 | 0 | All Passed |
+| Menu | 17 | 17 | 0 | All Passed |
+| Multi Column Dropdown | 189 | 189 | 0 | All Passed |
+| Navigation Drawer | 60 | 60 | 0 | All Passed |
+| Navigation Pane | 66 | 66 | 0 | All Passed |
+| Percent TextBox | 121 | 121 | 0 | All Passed |
+| Pivot Grid | 113 | 113 | 0 | All Passed |
+| PropertyGrid | 150 | 150 | 0 | All Passed |
+| Pulsing Tile | 12 | 12 | 0 | All Passed |
+| Radial Menu | 54 | 54 | 0 | All Passed |
+| Radial Slider | 17 | 17 | 0 | All Passed |
+| Range slider | 11 | 11 | 0 | All Passed |
+| Ribbon | 2321 | 2321 | 0 | All Passed |
+| Scheduler | 5001 | 5001 | 0 | All Passed |
+| SfTextBoxExt | 21 | 21 | 0 | All Passed |
+| Skin Manager | 274 | 274 | 0 | All Passed |
+| Smith Chart | 976 | 976 | 0 | All Passed |
+| SpellChecker | 83 | 83 | 0 | All Passed |
+| Split Button | 15 | 15 | 0 | All Passed |
+| Surface Chart | 191 | 191 | 0 | All Passed |
+| Syntax Editor | 197 | 197 | 0 | All Passed |
+| Tab Navigation | 9 | 9 | 0 | All Passed |
+| Tab Splitter | 11 | 11 | 0 | All Passed |
+| TabControl | 131 | 131 | 0 | All Passed |
+| TaskBar | 9 | 9 | 0 | All Passed |
+| Text InputLayout | 333 | 333 | 0 | All Passed |
+| Tile View | 133 | 133 | 0 | All Passed |
+| TimePicker | 126 | 126 | 0 | All Passed |
+| TimeSpan Editor | 21 | 21 | 0 | All Passed |
+| ToolBar | 31 | 31 | 0 | All Passed |
+| Tree Navigator | 49 | 49 | 0 | All Passed |
+| TreeGrid | 3021 | 3021 | 0 | All Passed |
+| TreeMap | 741 | 741 | 0 | All Passed |
+| TreeView | 1212 | 1212 | 0 | All Passed |
+| TreeViewAdv | 284 | 284 | 0 | All Passed |
+| Wizard Control | 10 | 10 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/Release-notes/v33.2.5.md b/wpf/Release-notes/v33.2.5.md
new file mode 100644
index 0000000000..44f1e1afa6
--- /dev/null
+++ b/wpf/Release-notes/v33.2.5.md
@@ -0,0 +1,97 @@
+---
+title: Essential Studio® for  WPF Release Notes - v33.2.5
+description: Learn here about the controls in the Essential Studio® for  WPF Weekly Nuget Release - Release Notes - v33.2.5
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio® for  WPF - v33.2.5 Release Notes
+
+{% include release-info.html date="May 05, 2026" version="v33.2.5" passed="32448" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|----------------|------------|--------|--------|---------|
+| Accordion | 48 | 48 | 0 | All Passed |
+| AI AssistView | 85 | 85 | 0 | All Passed |
+| AutoComplete | 37 | 37 | 0 | All Passed |
+| AvatarView | 229 | 229 | 0 | All Passed |
+| Badge | 7 | 7 | 0 | All Passed |
+| BreadCrumb | 8 | 8 | 0 | All Passed |
+| Bullet Graph | 151 | 151 | 0 | All Passed |
+| Busy Indicator | 10 | 10 | 0 | All Passed |
+| Button | 21 | 21 | 0 | All Passed |
+| Calendar | 63 | 63 | 0 | All Passed |
+| Card View | 27 | 27 | 0 | All Passed |
+| Carousel | 30 | 30 | 0 | All Passed |
+| Charts | 1547 | 1547 | 0 | All Passed |
+| CheckedListBox | 150 | 150 | 0 | All Passed |
+| Chromeless Window | 151 | 151 | 0 | All Passed |
+| Circular Gauge | 305 | 305 | 0 | All Passed |
+| Color Picker | 132 | 132 | 0 | All Passed |
+| Color Picker Palette | 102 | 102 | 0 | All Passed |
+| ComboBox | 252 | 252 | 0 | All Passed |
+| Currency TextBox | 139 | 139 | 0 | All Passed |
+| DataGrid | 5059 | 5059 | 0 | All Passed |
+| DataPager | 16 | 16 | 0 | All Passed |
+| DatePicker | 118 | 118 | 0 | All Passed |
+| DateTimePicker | 170 | 170 | 0 | All Passed |
+| Docking | 1225 | 1225 | 0 | All Passed |
+| DocumentContainer | 41 | 41 | 0 | All Passed |
+| Domain Updown | 295 | 295 | 0 | All Passed |
+| Double TextBox | 345 | 345 | 0 | All Passed |
+| Dropdown Button | 21 | 21 | 0 | All Passed |
+| Excel-like Grid | 15 | 15 | 0 | All Passed |
+| Gantt | 2549 | 2549 | 0 | All Passed |
+| GridDataControl | 549 | 549 | 0 | All Passed |
+| GridSplitter | 19 | 19 | 0 | All Passed |
+| GridTreeControl | 223 | 223 | 0 | All Passed |
+| Image Editor | 177 | 177 | 0 | All Passed |
+| Integer TextBox | 29 | 29 | 0 | All Passed |
+| Kanban Board | 112 | 112 | 0 | All Passed |
+| Linear Gauge | 27 | 27 | 0 | All Passed |
+| Maps | 1677 | 1677 | 0 | All Passed |
+| MaskedTextBox | 125 | 125 | 0 | All Passed |
+| Menu | 17 | 17 | 0 | All Passed |
+| Multi Column Dropdown | 189 | 189 | 0 | All Passed |
+| Navigation Drawer | 60 | 60 | 0 | All Passed |
+| Navigation Pane | 66 | 66 | 0 | All Passed |
+| Percent TextBox | 121 | 121 | 0 | All Passed |
+| Pivot Grid | 113 | 113 | 0 | All Passed |
+| PropertyGrid | 151 | 151 | 0 | All Passed |
+| Pulsing Tile | 12 | 12 | 0 | All Passed |
+| Radial Menu | 54 | 54 | 0 | All Passed |
+| Radial Slider | 17 | 17 | 0 | All Passed |
+| Range slider | 11 | 11 | 0 | All Passed |
+| Ribbon | 2322 | 2322 | 0 | All Passed |
+| Scheduler | 5001 | 5001 | 0 | All Passed |
+| SfTextBoxExt | 21 | 21 | 0 | All Passed |
+| Skin Manager | 274 | 274 | 0 | All Passed |
+| Smith Chart | 976 | 976 | 0 | All Passed |
+| SpellChecker | 83 | 83 | 0 | All Passed |
+| Split Button | 15 | 15 | 0 | All Passed |
+| Sunburst Chart | 119 | 119 | 0 | All Passed |
+| Surface Chart | 191 | 191 | 0 | All Passed |
+| Syntax Editor | 197 | 197 | 0 | All Passed |
+| Tab Navigation | 9 | 9 | 0 | All Passed |
+| Tab Splitter | 11 | 11 | 0 | All Passed |
+| TabControl | 131 | 131 | 0 | All Passed |
+| TaskBar | 9 | 9 | 0 | All Passed |
+| Text InputLayout | 333 | 333 | 0 | All Passed |
+| Tile View | 133 | 133 | 0 | All Passed |
+| TimePicker | 126 | 126 | 0 | All Passed |
+| TimeSpan Editor | 21 | 21 | 0 | All Passed |
+| ToolBar | 31 | 31 | 0 | All Passed |
+| Tree Navigator | 49 | 49 | 0 | All Passed |
+| TreeGrid | 3052 | 3052 | 0 | All Passed |
+| TreeMap | 741 | 741 | 0 | All Passed |
+| TreeView | 1212 | 1212 | 0 | All Passed |
+| TreeViewAdv | 284 | 284 | 0 | All Passed |
+| Wizard Control | 10 | 10 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/Release-notes/v33.2.6.md b/wpf/Release-notes/v33.2.6.md
new file mode 100644
index 0000000000..a49097c667
--- /dev/null
+++ b/wpf/Release-notes/v33.2.6.md
@@ -0,0 +1,97 @@
+---
+title: Essential Studio® for  WPF Release Notes - v33.2.6
+description: Learn here about the controls in the Essential Studio® for  WPF Weekly Nuget Release - Release Notes - v33.2.6
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio® for  WPF - v33.2.6 Release Notes
+
+{% include release-info.html date="May 12, 2026" version="v33.2.6" passed="32140" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.6 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|----------------|------------|--------|--------|---------|
+| Accordion | 48 | 48 | 0 | All Passed |
+| AI AssistView | 85 | 85 | 0 | All Passed |
+| AutoComplete | 37 | 37 | 0 | All Passed |
+| AvatarView | 229 | 229 | 0 | All Passed |
+| Badge | 7 | 7 | 0 | All Passed |
+| BreadCrumb | 8 | 8 | 0 | All Passed |
+| Bullet Graph | 151 | 151 | 0 | All Passed |
+| Busy Indicator | 10 | 10 | 0 | All Passed |
+| Button | 21 | 21 | 0 | All Passed |
+| Calendar | 63 | 63 | 0 | All Passed |
+| Card View | 25 | 25 | 0 | All Passed |
+| Carousel | 32 | 32 | 0 | All Passed |
+| Charts | 1428 | 1428 | 0 | All Passed |
+| CheckedListBox | 150 | 150 | 0 | All Passed |
+| Chromeless Window | 151 | 151 | 0 | All Passed |
+| Circular Gauge | 305 | 305 | 0 | All Passed |
+| Color Picker | 132 | 132 | 0 | All Passed |
+| Color Picker Palette | 103 | 103 | 0 | All Passed |
+| ComboBox | 127 | 127 | 0 | All Passed |
+| Currency TextBox | 139 | 139 | 0 | All Passed |
+| DataGrid | 5067 | 5067 | 0 | All Passed |
+| DataPager | 16 | 16 | 0 | All Passed |
+| DatePicker | 119 | 119 | 0 | All Passed |
+| DateTimePicker | 170 | 170 | 0 | All Passed |
+| Docking | 1079 | 1079 | 0 | All Passed |
+| DocumentContainer | 42 | 42 | 0 | All Passed |
+| Domain Updown | 295 | 295 | 0 | All Passed |
+| Double TextBox | 345 | 345 | 0 | All Passed |
+| Dropdown Button | 21 | 21 | 0 | All Passed |
+| Excel-like Grid | 17 | 17 | 0 | All Passed |
+| Gantt | 2549 | 2549 | 0 | All Passed |
+| GridDataControl | 549 | 549 | 0 | All Passed |
+| GridSplitter | 19 | 19 | 0 | All Passed |
+| GridTreeControl | 227 | 227 | 0 | All Passed |
+| Image Editor | 177 | 177 | 0 | All Passed |
+| Integer TextBox | 29 | 29 | 0 | All Passed |
+| Kanban Board | 112 | 112 | 0 | All Passed |
+| Linear Gauge | 27 | 27 | 0 | All Passed |
+| Maps | 1677 | 1677 | 0 | All Passed |
+| MaskedTextBox | 125 | 125 | 0 | All Passed |
+| Menu | 17 | 17 | 0 | All Passed |
+| Multi Column Dropdown | 189 | 189 | 0 | All Passed |
+| Navigation Drawer | 60 | 60 | 0 | All Passed |
+| Navigation Pane | 66 | 66 | 0 | All Passed |
+| Percent TextBox | 121 | 121 | 0 | All Passed |
+| Pivot Grid | 113 | 113 | 0 | All Passed |
+| PropertyGrid | 151 | 151 | 0 | All Passed |
+| Pulsing Tile | 12 | 12 | 0 | All Passed |
+| Radial Menu | 54 | 54 | 0 | All Passed |
+| Radial Slider | 17 | 17 | 0 | All Passed |
+| Range slider | 11 | 11 | 0 | All Passed |
+| Ribbon | 2321 | 2321 | 0 | All Passed |
+| Scheduler | 5001 | 5001 | 0 | All Passed |
+| SfTextBoxExt | 21 | 21 | 0 | All Passed |
+| Skin Manager | 274 | 274 | 0 | All Passed |
+| Smith Chart | 976 | 976 | 0 | All Passed |
+| SpellChecker | 83 | 83 | 0 | All Passed |
+| Split Button | 15 | 15 | 0 | All Passed |
+| SunBurstChart | 185 | 185 | 0 | All Passed |
+| Surface Chart | 191 | 191 | 0 | All Passed |
+| Syntax Editor | 198 | 198 | 0 | All Passed |
+| Tab Navigation | 9 | 9 | 0 | All Passed |
+| Tab Splitter | 11 | 11 | 0 | All Passed |
+| TabControl | 131 | 131 | 0 | All Passed |
+| TaskBar | 9 | 9 | 0 | All Passed |
+| Text InputLayout | 333 | 333 | 0 | All Passed |
+| Tile View | 131 | 131 | 0 | All Passed |
+| TimePicker | 126 | 126 | 0 | All Passed |
+| TimeSpan Editor | 21 | 21 | 0 | All Passed |
+| ToolBar | 31 | 31 | 0 | All Passed |
+| Tree Navigator | 49 | 49 | 0 | All Passed |
+| TreeGrid | 3052 | 3052 | 0 | All Passed |
+| TreeMap | 741 | 741 | 0 | All Passed |
+| TreeView | 1212 | 1212 | 0 | All Passed |
+| TreeViewAdv | 285 | 285 | 0 | All Passed |
+| Wizard Control | 10 | 10 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/SfChart3D/3DSeries.md b/wpf/SfChart3D/3DSeries.md
index 0a2f9effa5..d90f70e5cc 100644
--- a/wpf/SfChart3D/3DSeries.md
+++ b/wpf/SfChart3D/3DSeries.md
@@ -39,19 +39,22 @@ Eight types of chart [`Series`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}"  
-        XBindingPath="Year" YBindingPath="Metal"></chart:ColumnSeries3D>
+<chart:ColumnSeries3D 
+    ItemsSource="{Binding CategoricalData}"         
+    XBindingPath="Year" 
+    YBindingPath="Metal">
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new CategoryDataViewModel().CategoricalData,
-            XBindingPath = "Year",
-            YBindingPath = "Metal"
-        };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Metal"
+};
 
 chart3D.Series.Add(series);
 
@@ -69,19 +72,22 @@ chart3D.Series.Add(series);
 
 {% highlight xaml %}
 
-        <chart:BarSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-        YBindingPath="Plastic"></chart:BarSeries3D>
+<chart:BarSeries3D 
+    ItemsSource="{Binding CategoricalData}" 
+    XBindingPath="Year"       
+    YBindingPath="Plastic">
+</chart:BarSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    BarSeries3D series = new BarSeries3D()
-        {
-            ItemsSource = new CategoryDataViewModel().CategoricalData,
-            XBindingPath = "Year",
-            YBindingPath = "Plastic"
-        };
+BarSeries3D series = new BarSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
 chart3D.Series.Add(series);
 
@@ -99,20 +105,25 @@ chart3D.Series.Add(series);
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D chart:ChartSeriesBase.Spacing="0.6" ItemsSource="{Binding CategoricalData}"  
-        XBindingPath="Year" YBindingPath="Plastic"></chart:ColumnSeries3D>
+<chart:ColumnSeries3D 
+    chart:ChartSeriesBase.Spacing="0.6" 
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year" 
+    YBindingPath="Plastic">
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new CategoryDataViewModel().CategoricalData,
-            XBindingPath = "Year",
-            YBindingPath = "Plastic"
-        };
-    ChartSeriesBase.SetSpacing(series, 0.6);
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
+
+ChartSeriesBase.SetSpacing(series, 0.6);
 
 chart3D.Series.Add(series);
 
@@ -130,35 +141,41 @@ chart3D.Series.Add(series);
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D SegmentSpacing="0.6" ItemsSource="{Binding CategoricalData}"  
-        XBindingPath="Year" YBindingPath="Plastic"></chart:ColumnSeries3D>
+<chart:ColumnSeries3D
+    SegmentSpacing="0.6"
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic"/>
 
-        <chart:ColumnSeries3D SegmentSpacing="0.6" ItemsSource="{Binding CategoricalData}"  
-        XBindingPath="Year" YBindingPath="Iron"></chart:ColumnSeries3D>
+<chart:ColumnSeries3D
+    SegmentSpacing="0.6"
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Iron"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new CategoryDataViewModel().CategoricalData,
-            XBindingPath = "Year",
-            YBindingPath = "Plastic"
-            SegmentSpacing = 0.6,
-        };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+    SegmentSpacing = 0.6,
+};
+
+ColumnSeries3D series1 = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron",
+    SegmentSpacing = 0.6,
+};
 
-    ColumnSeries3D series1 = new ColumnSeries3D()
-        {
-            ItemsSource = new CategoryDataViewModel().CategoricalData,
-            XBindingPath = "Year",
-            YBindingPath = "Iron"
-            SegmentSpacing = 0.6,
-        };
-       
-    chart3D.Series.Add(series);
-    chart3D.Series.Add(series1);
+chart3D.Series.Add(series);
+chart3D.Series.Add(series1);
 
 {% endhighlight %}
 
@@ -173,19 +190,22 @@ chart3D.Series.Add(series);
 
 {% highlight xaml %}
 
-        <chart:LineSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-        YBindingPath="Metal"></chart:LineSeries3D>
+<chart:LineSeries3D 
+    ItemsSource="{Binding CategoricalData}" 
+    XBindingPath="Year"
+    YBindingPath="Metal">
+</chart:LineSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        LineSeries3D line = new LineSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Metal"
-            };
+LineSeries3D line = new LineSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Metal"
+};
 
 chart3D.Series.Add(series);
 
@@ -208,22 +228,25 @@ This size can be defined by using below properties.
 
 {% highlight xaml %}
 
-      <chart:ScatterSeries3D  ItemsSource="{Binding DataPoints}"  
-            XBindingPath="Year" YBindingPath="Germany"></chart:ScatterSeries3D>
+<chart:ScatterSeries3D  
+    ItemsSource="{Binding DataPoints}"  
+    XBindingPath="Year" 
+    YBindingPath="Germany">
+</chart:ScatterSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 
-        ScatterSeries3D series = new ScatterSeries3D()
-            {
-                ItemsSource = new ViewModel().DataPoints,
-                XBindingPath = "Year",
-                YBindingPath = "Germany"
-            };
+ScatterSeries3D series = new ScatterSeries3D()
+{
+    ItemsSource = new ViewModel().DataPoints,
+    XBindingPath = "Year",
+    YBindingPath = "Germany"
+};
 
-        chart3D.Series.Add(series);
+chart3D.Series.Add(series);
 
 {% endhighlight %}
 
@@ -238,22 +261,24 @@ This size can be defined by using below properties.
 
 {% highlight xaml %}
 
-        <chart:AreaSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-        YBindingPath="Plastic"></chart:AreaSeries3D>
+<chart:AreaSeries3D 
+    ItemsSource="{Binding CategoricalData}"  
+    XBindingPath="Year"        
+    YBindingPath="Plastic">
+</chart:AreaSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
+AreaSeries3D series = new AreaSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        AreaSeries3D series = new AreaSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
-
-        chart3D.Series.Add(series);
+chart3D.Series.Add(series);
 
 {% endhighlight %}
 
@@ -263,7 +288,6 @@ This size can be defined by using below properties.
 
 
 ## Stacking Charts
-
 ### Stacking Column
 [`StackingColumnSeries3D`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.StackingColumnSeries3D.html#) resembles multiple types of ColumnSeries3D. Each series is vertically stacked one above the other. When there is only one series, then it is ColumnSeries. 
 
@@ -273,43 +297,49 @@ The following code example illustrates how to use StackingColumnSeries3D:
 
 {% highlight xaml %}
 
-        <chart:StackingColumnSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Plastic"></chart:StackingColumnSeries3D>
+<chart:StackingColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic"/>
 
-        <chart:StackingColumnSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Iron"></chart:StackingColumnSeries3D>
+<chart:StackingColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Iron"/>
 
-        <chart:StackingColumnSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Metal"></chart:StackingColumnSeries3D>
+<chart:StackingColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Metal"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        StackingColumnSeries3D stack1 = new StackingColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+StackingColumnSeries3D stack1 = new StackingColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        StackingColumnSeries3D stack2 = new StackingColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron"
-            };
+StackingColumnSeries3D stack2 = new StackingColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron"
+};
 
-        StackingColumnSeries3D stack3 = new StackingColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Metal"
-            };
+StackingColumnSeries3D stack3 = new StackingColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Metal"
+};
 
-        chart3D.Series.Add(stack1);
-        chart3D.Series.Add(stack2);
-        chart3D.Series.Add(stack3);
+chart3D.Series.Add(stack1);
+chart3D.Series.Add(stack2);
+chart3D.Series.Add(stack3);
 
 {% endhighlight %}
 
@@ -327,32 +357,40 @@ The following code example illustrates how to use StackingColumn100Series3D:
 
 {% highlight xaml %}
 
-        <chart:StackingColumn100Series3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-        YBindingPath="Plastic"></chart:StackingColumn100Series3D>
-            
-        <chart:StackingColumn100Series3D Interior="Brown" ItemsSource="{Binding CategoricalData}"  XBindingPath="Year" YBindingPath="Iron"></chart:StackingColumn100Series3D>
+<chart:StackingColumn100Series3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+</chart:StackingColumn100Series3D>
+
+<chart:StackingColumn100Series3D
+    Interior="Brown"
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Iron">
+</chart:StackingColumn100Series3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        StackingColumn100Series3D stack1 = new StackingColumn100Series3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+StackingColumn100Series3D stack1 = new StackingColumn100Series3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        StackingColumn100Series3D stack2 = new StackingColumn100Series3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron",
-                Interior=new SolidColorBrush(Colors.Brown)
-            };
+StackingColumn100Series3D stack2 = new StackingColumn100Series3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron",
+    Interior = new SolidColorBrush(Colors.Brown)
+};
 
-        chart3D.Series.Add(stack1);
-        chart3D.Series.Add(stack2);
+chart3D.Series.Add(stack1);
+chart3D.Series.Add(stack2);
 
 {% endhighlight %}
 
@@ -370,43 +408,49 @@ The following code example illustrates how to use StackingBarSeries3D:
 
 {% highlight xaml %}
 
-            <chart:StackingBarSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Plastic"></chart:StackingBarSeries3D>
+<chart:StackingBarSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic"/>
 
-            <chart:StackingBarSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Iron"></chart:StackingBarSeries3D>
+<chart:StackingBarSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Iron"/>
 
-            <chart:StackingBarSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-                YBindingPath="Metal"></chart:StackingBarSeries3D>
+<chart:StackingBarSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Metal"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-         StackingBarSeries3D stack1 = new StackingBarSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+StackingBarSeries3D stack1 = new StackingBarSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        StackingBarSeries3D stack2 = new StackingBarSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron"
-            };
+StackingBarSeries3D stack2 = new StackingBarSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron"
+};
 
-        StackingBarSeries3D stack3 = new StackingBarSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Metal"
-            };
+StackingBarSeries3D stack3 = new StackingBarSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Metal"
+};
 
-        chart3D.Series.Add(stack1);
-        chart3D.Series.Add(stack2);
-        chart3D.Series.Add(stack3);
+chart3D.Series.Add(stack1);
+chart3D.Series.Add(stack2);
+chart3D.Series.Add(stack3);
 
 {% endhighlight %}
 
@@ -424,32 +468,36 @@ The following code example illustrates how to use StackingBar100Series3D:
 
 {% highlight xaml %}
 
-            <chart:StackingBar100Series3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-            YBindingPath="Plastic"></chart:StackingBar100Series3D>
+<chart:StackingBar100Series3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic"/>
 
-            <chart:StackingBar100Series3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-            YBindingPath="Iron"></chart:StackingBar100Series3D>
+<chart:StackingBar100Series3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Iron"/>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        StackingBar100Series3D stack1 = new StackingBar100Series3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+StackingBar100Series3D stack1 = new StackingBar100Series3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        StackingBar100Series3D stack2 = new StackingBar100Series3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron"
-            };
+StackingBar100Series3D stack2 = new StackingBar100Series3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron"
+};
 
-        chart3D.Series.Add(stack1);
-        chart3D.Series.Add(stack2);
+chart3D.Series.Add(stack1);
+chart3D.Series.Add(stack2);
 
 {% endhighlight %}
 
@@ -467,22 +515,25 @@ The following code example illustrates the PieSeries3D.
 
 {% highlight xaml %}
 
-        <chart:PieSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"
-        YBindingPath="Iron"></chart:PieSeries3D>
+<chart:PieSeries3D 
+    ItemsSource="{Binding CategoricalData}"  
+    XBindingPath="Year"        
+    YBindingPath="Iron">
+</chart:PieSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 
-        PieSeries3D series = new PieSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron"
-            };
+PieSeries3D series = new PieSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron"
+};
 
-        chart3D.Series.Add(series);
+chart3D.Series.Add(series);
 
 {% endhighlight %}
 
@@ -501,20 +552,24 @@ The DoughnutSeries3D can be added to chart as in below code example:
 
 {% highlight xaml %}
 
-        <chart:DoughnutSeries3D ItemsSource="{Binding CategoricalData}"  XBindingPath="Year"                        YBindingPath="Iron"> </chart:DoughnutSeries3D>
+<chart:DoughnutSeries3D 
+    ItemsSource="{Binding CategoricalData}"  
+    XBindingPath="Year" 
+    YBindingPath="Iron">
+</chart:DoughnutSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        DoughnutSeries3D series = new DoughnutSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron"
-            };
+DoughnutSeries3D series = new DoughnutSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron"
+};
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -530,22 +585,26 @@ The [`DoughnutCoefficient`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
 
 {% highlight xaml %}
 
-        <chart:DoughnutSeries3D ItemsSource="{Binding CategoricalData}" DoughnutCoefficient="0.5"   
-        XBindingPath="Year" YBindingPath="Iron"> </chart:DoughnutSeries3D>
+<chart:DoughnutSeries3D 
+    ItemsSource="{Binding CategoricalData}" 
+    DoughnutCoefficient="0.5"         
+    XBindingPath="Year" 
+    YBindingPath="Iron">
+</chart:DoughnutSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        DoughnutSeries3D series = new DoughnutSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron",
-                DoughnutCoefficient=0.5
-            };
+DoughnutSeries3D series = new DoughnutSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron",
+    DoughnutCoefficient=0.5
+};
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -561,24 +620,30 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.
 
 {% highlight xaml %}
 
-        <chart:DoughnutSeries3D StartAngle="180" EndAngle="360" ItemsSource="{Binding CategoricalData}" 
-        DoughnutCoefficient="0.7" XBindingPath="Year" YBindingPath="Iron"> </chart:DoughnutSeries3D>
+<chart:DoughnutSeries3D 
+    StartAngle="180" 
+    EndAngle="360" 
+    ItemsSource="{Binding CategoricalData}"
+    DoughnutCoefficient="0.7" 
+    XBindingPath="Year" 
+    YBindingPath="Iron">
+</chart:DoughnutSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        DoughnutSeries3D series = new DoughnutSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron",
-                DoughnutCoefficient=0.7,
-                StartAngle=180,
-                EndAngle=360
-            };
+DoughnutSeries3D series = new DoughnutSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron",
+    DoughnutCoefficient=0.7,
+    StartAngle=180,
+    EndAngle=360
+};
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -591,24 +656,28 @@ By using custom [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.
 
 {% highlight xaml %}
 
-        <chart:PieSeries3D StartAngle="180" EndAngle="360" ItemsSource="{Binding CategoricalData}" 
-        CircleCoefficient="0.7" XBindingPath="Year" YBindingPath="Iron"> </chart:DoughnutSeries3D>
+<chart:PieSeries3D
+    StartAngle="180"
+    EndAngle="360"
+    ItemsSource="{Binding CategoricalData}"
+    CircleCoefficient="0.7"
+    XBindingPath="Year"
+    YBindingPath="Iron">
+</chart:PieSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        PieSeries3D series = new PieSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Iron",
-                CircleCoefficient=0.7,
-                StartAngle=180,
-                EndAngle=360
-            };
+DoughnutSeries3D series = new DoughnutSeries3D()
+{
+    ItemsSource = new UsersViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Iron",
+    DoughnutCoefficient = 0.5
+};
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -627,22 +696,32 @@ The following code example illustrates how to enable dynamic explode for circula
 
 {% highlight xaml %}
 
-    <chart:SfChart3D EnableRotation="True"  Tilt="-30" Rotation="45"
-            Depth="30" PerspectiveAngle="90" Width="500" Height="500">
-
-            <!--PrimaryAxis-->
-            <chart:SfChart3D.PrimaryAxis>
-                <chart:CategoryAxis3D Header="Year"/>
-            </chart:SfChart3D.PrimaryAxis>
-            <!--SecondaryAxis-->
-            <chart:SfChart3D.SecondaryAxis>
-                <chart:NumericalAxis3D Header="Metal"/>
-            </chart:SfChart3D.SecondaryAxis>           
-
-            <!--PieSeries3D - Dynamic explode-->
-            <chart:PieSeries3D  ExplodeOnMouseClick="True" ItemsSource="{Binding CategoricalData}"  XBindingPath="Year" YBindingPath="Iron"></chart:PieSeries3D>
-
-    </chart:SfChart3D>
+<chart:SfChart3D
+    EnableRotation="True"
+    Tilt="-30"
+    Rotation="45"
+    Depth="30"
+    PerspectiveAngle="90"
+    Width="500"
+    Height="500">
+
+    <!-- PrimaryAxis -->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:CategoryAxis3D Header="Year"/>
+    </chart:SfChart3D.PrimaryAxis>
+
+    <!-- SecondaryAxis -->
+    <chart:SfChart3D.SecondaryAxis>
+        <chart:NumericalAxis3D Header="Metal"/>
+    </chart:SfChart3D.SecondaryAxis>
+
+    <!-- PieSeries3D - Dynamic explode -->
+    <chart:PieSeries3D
+        ExplodeOnMouseClick="True"
+        ItemsSource="{Binding CategoricalData}"
+        XBindingPath="Year"
+        YBindingPath="Iron"/>   
+</chart:SfChart3D>
 
 {% endhighlight %}
 
diff --git a/wpf/SfChart3D/Adornments/DataMarkers.md b/wpf/SfChart3D/Adornments/DataMarkers.md
index 9ed0a73461..c457ad1ee6 100644
--- a/wpf/SfChart3D/Adornments/DataMarkers.md
+++ b/wpf/SfChart3D/Adornments/DataMarkers.md
@@ -24,29 +24,38 @@ The following code example illustrates how to initialize the adornment.
 
 {% highlight xaml %}
 
-    <chart:ColumnSeries3D ItemsSource="{Binding CategoricalDatas}" XBindingPath="Year" YBindingPath="Plastic">
-                <!--AdornmentsInfo-->
-        <chart:ColumnSeries3D.AdornmentsInfo>
-            <chart:ChartAdornmentInfo3D UseSeriesPalette="True" BorderBrush="White" BorderThickness="1" ShowLabel="True" ></chart:ChartAdornmentInfo3D>
-        </chart:ColumnSeries3D.AdornmentsInfo>
-    </chart:ColumnSeries3D>
+<chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year" YBindingPath="Plastic">
+
+    <!--AdornmentsInfo-->
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D 
+            UseSeriesPalette="True" 
+            BorderBrush="White" 
+            BorderThickness="1" 
+            ShowLabel="True">
+        </chart:ChartAdornmentInfo3D>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new ViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"                
-            };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new ViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() { ShowLabel = true };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D() 
+{ 
+    ShowLabel = true 
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
diff --git a/wpf/SfChart3D/Adornments/Labels.md b/wpf/SfChart3D/Adornments/Labels.md
index af7a4ac59a..e59b6a0563 100644
--- a/wpf/SfChart3D/Adornments/Labels.md
+++ b/wpf/SfChart3D/Adornments/Labels.md
@@ -20,34 +20,36 @@ To enable the marker in adornments you have to set the [`ShowLabel`](https://hel
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-            YBindingPath="Plastic">
-                <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowLabel="True" SegmentLabelContent="DateTime" AdornmentsPosition="Top"></chart:ChartAdornmentInfo3D>
-                </chart:ColumnSeries3D.AdornmentsInfo>
-        </chart:ColumnSeries3D>  
+<chart:ColumnSeries3D 
+    ItemsSource="{Binding CategoricalData}" 
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D ShowLabel="True" SegmentLabelContent="DateTime" AdornmentsPosition="Top"/>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D> 
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                SegmentLabelContent=LabelContent.DateTime,
-                AdornmentsPosition=AdornmentsPosition.Top
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    SegmentLabelContent=LabelContent.DateTime,
+    AdornmentsPosition=AdornmentsPosition.Top
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -81,40 +83,49 @@ The following code example demonstrates the customization of label using the abo
 
 {% highlight xaml %}
 
-            <chart:ColumnSeries3D  ItemsSource="{Binding Demands}" XBindingPath="Category"
-            YBindingPath="Value">                 
-                    <chart:ColumnSeries3D.AdornmentsInfo>
-                        <chart:ChartAdornmentInfo3D  ShowLabel="True" FontStyle="Italic" FontFamily="Segoe UI" Background="DarkGray" BorderBrush="LightGray" Foreground="White" BorderThickness="1">                   
-                    </chart:ChartAdornmentInfo3D>
-                    </chart:ColumnSeries3D.AdornmentsInfo>
-            </chart:ColumnSeries3D>
+<chart:ColumnSeries3D  
+    ItemsSource="{Binding Demands}" 
+    XBindingPath="Category"
+    YBindingPath="Value">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D  
+            ShowLabel="True" 
+            FontStyle="Italic" 
+            FontFamily="Segoe UI" 
+            Background="DarkGray" 
+            BorderBrush="LightGray" 
+            Foreground="White" 
+            BorderThickness="1">
+        </chart:ChartAdornmentInfo3D>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new StockViewModel().Demands,
-                XBindingPath = "Category",
-                YBindingPath = "Value",
-            };
-
-           ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                LabelPosition = AdornmentsLabelPosition.Outer,
-                Foreground = new SolidColorBrush(Colors.White),
-                BorderBrush = new SolidColorBrush(Colors.LightGray),
-                Background = new SolidColorBrush(Colors.DarkGray),
-                BorderThickness = new Thickness(1),
-                FontStyle = FontStyles.Italic,
-                FontFamily = new FontFamily("Segoe UI"),
-            };
-
-        series.AdornmentsInfo = adornmentInfo;
-
-        chart.Series.Add(series);
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new StockViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+};
+
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    LabelPosition = AdornmentsLabelPosition.Outer,
+    Foreground = new SolidColorBrush(Colors.White),
+    BorderBrush = new SolidColorBrush(Colors.LightGray),
+    Background = new SolidColorBrush(Colors.DarkGray),
+    BorderThickness = new Thickness(1),
+    FontStyle = FontStyles.Italic,
+    FontFamily = new FontFamily("Segoe UI"),
+};
+
+series.AdornmentsInfo = adornmentInfo;
+
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -130,37 +141,44 @@ The following code example demonstrates the customization of label using the abo
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D  ItemsSource="{Binding Demands}" XBindingPath="Category"
-        YBindingPath="Value">                
-                <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D LabelRotationAngle="45" UseSeriesPalette="True" ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
-                </chart:ColumnSeries3D.AdornmentsInfo>
-        </chart:ColumnSeries3D>
+<chart:ColumnSeries3D
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Category"
+    YBindingPath="Value">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            LabelRotationAngle="45"
+            UseSeriesPalette="True"
+            ShowLabel="True"
+            BorderBrush="White"
+            BorderThickness="1"/>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new StockViewModel().Demands,
-                XBindingPath = "Category",
-                YBindingPath = "Value",
-            };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new StockViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                LabelRotationAngle=45,
-                LabelPosition=AdornmentsLabelPosition.Outer,
-                UseSeriesPalette=true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                BorderThickness = new Thickness(1),
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    LabelRotationAngle=45,
+    LabelPosition=AdornmentsLabelPosition.Outer,
+    UseSeriesPalette=true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    BorderThickness = new Thickness(1),
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -179,35 +197,42 @@ The following code example demonstrates the label having three decimal digits:
 
 {% highlight xaml %}
 
-<chart:ColumnSeries3D  ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-            YBindingPath="Plastic">                
-                    <chart:ColumnSeries3D.AdornmentsInfo>
-                        <chart:ChartAdornmentInfo3D ShowLabel="True" LabelPosition="Outer"
-                        SegmentLabelFormat="#.###" ></chart:ChartAdornmentInfo3D>
-                    </chart:ColumnSeries3D.AdornmentsInfo>
-        </chart:ColumnSeries3D>
+<chart:ColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            ShowLabel="True"
+            LabelPosition="Outer"
+            SegmentLabelFormat="#.###"/>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+
+</chart:ColumnSeries3D>
+
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-            };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic",
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                AdornmentsPosition = AdornmentsPosition.Top,
-                SegmentLabelFormat = "#.###"
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    AdornmentsPosition = AdornmentsPosition.Top,
+    SegmentLabelFormat = "#.###"
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -227,38 +252,49 @@ The following code example shows the how to add connector line:
 
 {% highlight xaml %}
 
-        <chart:PieSeries3D ItemsSource="{Binding Demands}" XBindingPath="Category"
-            YBindingPath="Value" LabelPosition="OutsideExtended">
-                <chart:PieSeries3D.AdornmentsInfo>
-                   <chart:ChartAdornmentInfo3D ShowConnectorLine="True" ConnectorHeight="15" UseSeriesPalette="True" ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
-                </chart:PieSeries3D.AdornmentsInfo>
-        </chart:PieSeries3D>  
+<chart:PieSeries3D
+    ItemsSource="{Binding Demands}"
+    XBindingPath="Category"
+    YBindingPath="Value"
+    LabelPosition="OutsideExtended">
+
+    <chart:PieSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            ShowConnectorLine="True"
+            ConnectorHeight="15"
+            UseSeriesPalette="True"
+            ShowLabel="True"
+            BorderBrush="White"
+            BorderThickness="1"/>
+    </chart:PieSeries3D.AdornmentsInfo>
+
+</chart:PieSeries3D> 
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-                pie.LabelPosition=CircularSeriesLabelPosition.OutsideExtended
-            };
+PieSeries3D series = new PieSeries3D()
+{
+    ItemsSource = new StockViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+    LabelPosition = CircularSeriesLabelPosition.OutsideExtended
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,              
-                ShowConnectorLine = true,
-                ConnectorHeight = 15,
-                UseSeriesPalette=true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                BorderThickness = new Thickness(1)
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowConnectorLine = true,
+    ConnectorHeight = 15,
+    UseSeriesPalette = true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    BorderThickness = new Thickness(1)
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -276,35 +312,39 @@ The following code example shows the how to specify connector type:
 
 {% highlight xaml %}
 
-         <chart:PieSeries3D Palette="BlueChrome" ItemsSource="{Binding DataPoints}"  
-            XBindingPath="Year" ConnectorType="Line" LabelPosition="OutsideExtended" YBindingPath="India">
-                <chart:PieSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowConnectorLine="True"
-                                                UseSeriesPalette="True" ShowLabel="True" ></chart:ChartAdornmentInfo3D>
-                </chart:PieSeries3D.AdornmentsInfo>
-            </chart:PieSeries3D>
+<chart:PieSeries3D 
+    Palette="BlueChrome" 
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year" 
+    ConnectorType="Line" 
+    LabelPosition="OutsideExtended" 
+    YBindingPath="Plastic">
+    <chart:PieSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D ShowConnectorLine="True" UseSeriesPalette="True" ShowLabel="True"/>
+    </chart:PieSeries3D.AdornmentsInfo>
+</chart:PieSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        PieSeries3D series = new PieSeries3D()
-            {
-                ItemsSource = new ViewModel().DataPoints,
-                XBindingPath = "Year",
-                YBindingPath = "India",
-                LabelPosition=CircularSeriesLabelPosition.OutsideExtended,
-                ConnectorType=ConnectorMode.Line
-            };
+PieSeries3D series = new PieSeries3D()
+{
+    ItemsSource = new ViewModel().DataPoints,
+    XBindingPath = "Year",
+    YBindingPath = "India",
+    LabelPosition=CircularSeriesLabelPosition.OutsideExtended,
+    ConnectorType=ConnectorMode.Line
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                ShowConnectorLine = true
-             };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowConnectorLine = true
+    };
 
-        series.AdornmentsInfo = adornmentInfo;
-        chart.Series.Add(series);
+series.AdornmentsInfo = adornmentInfo;
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -324,22 +364,30 @@ You can define the style for the connector line using [`ConnectorLineStyle`](htt
 
 {% highlight xaml %}
 
-        <Window.Resources>
-
-            <Style TargetType="Path" x:Key="lineStyle">
-                <Setter Property="StrokeDashArray" Value="10,7,5"/>
-                <Setter Property="Stroke" Value="Black"/>
-            </Style>
-        
-        </Window.Resources>
-
-        <chart:PieSeries3D ItemsSource="{Binding CategoricalData}" ConnectorType="Line" LabelPosition="Outside" XBindingPath="Year"
-            YBindingPath="Plastic">
-                <chart:PieSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowLabel="True" ConnectorLineStyle="{StaticResource lineStyle}" 
-                           ConnectorHeight="60" ShowConnectorLine="True" LabelPosition="Outer"></chart:ChartAdornmentInfo3D>
-                </chart:PieSeries3D.AdornmentsInfo>
-        </chart:PieSeries3D>
+<Window.Resources>
+    <Style x:Key="lineStyle" TargetType="Path">  
+        <Setter Property="StrokeDashArray" Value="10,7,5"/>
+        <Setter Property="Stroke" Value="Black"/>
+    </Style>
+</Window.Resources>
+
+<chart:PieSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    ConnectorType="Line"
+    LabelPosition="Outside"
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+
+    <chart:PieSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            ShowLabel="True"
+            ShowConnectorLine="True"
+            ConnectorHeight="60"
+            LabelPosition="Outer"
+            ConnectorLineStyle="{StaticResource lineStyle}"/>
+    </chart:PieSeries3D.AdornmentsInfo>
+
+</chart:PieSeries3D>
   
 {% endhighlight %}
 
@@ -357,19 +405,22 @@ For Accumulation like Pie, Doughnut, Funnel and Pyramid the segment interior col
 
 {% highlight xaml %}
       
-        <chart:ChartAdornmentInfo3D ShowLabel="True" LabelPosition="Outer"
-                UseSeriesPalette="True" ></chart:ChartAdornmentInfo3D>
+<chart:ChartAdornmentInfo3D 
+    ShowLabel="True" 
+    LabelPosition="Outer"
+    UseSeriesPalette="True">
+</chart:ChartAdornmentInfo3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                LabelPosition = AdornmentsLabelPosition.Outer,
-                UseSeriesPalette=true
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    LabelPosition = AdornmentsLabelPosition.Outer,
+    UseSeriesPalette=true
+};
 
 {% endhighlight %}
 
@@ -385,39 +436,53 @@ The following code example demonstrates the EnableSmartLabels property:
 
 {% highlight xaml %}
 
-        <chart:PieSeries3D  ItemsSource="{Binding CategoricalData}" ConnectorType="Bezier" XBindingPath="Year"
-            YBindingPath="Plastic" EnableSmartLabels="True" LabelPosition="OutsideExtended" ExplodeAll="True" ExplodeRadius="3">
-                <chart:PieSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowLabel="True" HorizontalAlignment="Center" VerticalAlignment="Center" ShowConnectorLine="True"></chart:ChartAdornmentInfo3D>
-                </chart:PieSeries3D.AdornmentsInfo>
-        </chart:PieSeries3D>
+<chart:PieSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    ConnectorType="Bezier"
+    XBindingPath="Year"
+    YBindingPath="Plastic"
+    EnableSmartLabels="True"
+    LabelPosition="OutsideExtended"
+    ExplodeAll="True"
+    ExplodeRadius="3">
+
+    <chart:PieSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            ShowLabel="True"
+            ShowConnectorLine="True"
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"/>
+    </chart:PieSeries3D.AdornmentsInfo>
+
+</chart:PieSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        PieSeries3D series = new PieSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-                LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
-                ConnectorType = ConnectorMode.StraightLine,                
-                EnableSmartLabels = true,
-                ExplodeAll=true,
-                ExplodeRadius=3
-            };
-
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowLabel = true,
-                ShowConnectorLine = true,
-                HorizontalAlignment=HorizontalAlignment.Center,
-                VerticalAlignment=VerticalAlignment.Center
-            };
-
-        series.AdornmentsInfo = adornmentInfo;
-        chart.Series.Add(series);
+PieSeries3D series = new PieSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic",
+    LabelPosition = CircularSeriesLabelPosition.OutsideExtended,
+    ConnectorType = ConnectorMode.StraightLine,
+    EnableSmartLabels = true,
+    ExplodeAll=true,
+    ExplodeRadius=3
+};
+
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowConnectorLine = true,
+    HorizontalAlignment=HorizontalAlignment.Center,
+    VerticalAlignment=VerticalAlignment.Center
+};
+
+series.AdornmentsInfo = adornmentInfo;
+
+chart.Series.Add(series);
 
 {% endhighlight %}
 
diff --git a/wpf/SfChart3D/Adornments/Marker.md b/wpf/SfChart3D/Adornments/Marker.md
index 4a14156f10..7642208d24 100644
--- a/wpf/SfChart3D/Adornments/Marker.md
+++ b/wpf/SfChart3D/Adornments/Marker.md
@@ -22,36 +22,41 @@ The following code example demonstrates the column series with [`Diamond`](https
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-            YBindingPath="Plastic">
-            <chart:ColumnSeries3D.AdornmentsInfo>
-                   <chart:ChartAdornmentInfo3D SymbolStroke="White" Symbol="Diamond" 
-                        UseSeriesPalette="True" ShowMarker="True"></chart:ChartAdornmentInfo3D>
-            </chart:ColumnSeries3D.AdornmentsInfo>
-        </chart:ColumnSeries3D>  
-
+<chart:ColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            SymbolStroke="White"
+            Symbol="Diamond"
+            UseSeriesPalette="True"
+            ShowMarker="True">
+        </chart:ChartAdornmentInfo3D>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                SymbolInterior = new SolidColorBrush(Colors.White),
-                Symbol = ChartSymbol.Diamond,
-                UseSeriesPalette=true
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowMarker = true,
+    SymbolInterior = new SolidColorBrush(Colors.White),
+    Symbol = ChartSymbol.Diamond,
+    UseSeriesPalette=true
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -75,39 +80,47 @@ The following code example demonstrates the basic customization of symbol size a
 
 {% highlight xaml %}
 
-        <chart:LineSeries3D ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-            YBindingPath="Plastic">
-            <chart:LineSeries3D.AdornmentsInfo>
-                <chart:ChartAdornmentInfo3D AdornmentsPosition="Top" ShowMarker="True" SymbolHeight="15" SymbolWidth="15" 
-                          SymbolInterior="Brown" SymbolStroke="DarkGray" Symbol="Triangle" />
-            </chart:LineSeries3D.AdornmentsInfo>
-        </chart:LineSeries3D>  
+<chart:ColumnSeries3D
+    ItemsSource="{Binding CategoricalData}"
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D
+            AdornmentsPosition="Top"
+            ShowMarker="True"
+            SymbolHeight="15"
+            SymbolWidth="15"
+            SymbolInterior="Brown"
+            SymbolStroke="DarkGray"
+            Symbol="Diamond"/>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        LineSeries3D series = new LineSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic"
-            };
+ColumnSeries series = new ColumnSeries()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic"
+};
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                SymbolInterior = new SolidColorBrush(Colors.Brown),
-                SymbolStroke=new SolidColorBrush(Colors.White),
-                Symbol = ChartSymbol.Triangle,
-                AdornmentsPosition = AdornmentsPosition.Top,
-                SymbolHeight = 15,
-                SymbolWidth = 15,
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowMarker = true,
+    SymbolInterior = new SolidColorBrush(Colors.Brown),
+    SymbolStroke = new SolidColorBrush(Colors.White),
+    Symbol = ChartSymbol.Diamond,
+    AdornmentsPosition = AdornmentsPosition.Top,
+    SymbolHeight = 15,
+    SymbolWidth = 15,
+};
 
-        series.AdornmentsInfo = adornmentInfo;
+series.AdornmentsInfo = adornmentInfo;
 
-        chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -124,58 +137,72 @@ The following code example demonstrates how to use SymbolTemplate.
 {% highlight xaml %}
 
 <Window.Resources>
-        <DataTemplate x:Key="symbolTemplate">
-            <Grid>
-                <Grid Name="backgroundGrid" Width="24" Height="24" Visibility="Visible">
-                    <Ellipse Fill="#FFE2DBDB" Name="Fill" Visibility="Visible" />
-                </Grid>
-
-                <Path Stretch="Uniform" Fill="Brown" Stroke="Green" Width="24" Height="24" RenderTransformOrigin="0.5,0.5">
-                    <Path.Data>
-                        <PathGeometry FillRule="Nonzero" Figures="M23.9296875,10.6165618896484L20.759765625,11.2200794219971 18.09375,
-                            13.0306243896484 16.283203125,15.6966400146484 15.6796875,18.8665618896484 16.283203125,
-                            22.0423431396484 18.09375,24.7259368896484 20.759765625,26.5540618896484 23.9296875,27.1634368896484 27.1025371551514,
-                            26.5540618896484 29.77734375,24.7259368896484 31.5966796875,22.0423431396484 32.203125,18.8665618896484 31.5966796875,
-                            15.6966400146484 29.77734375,13.0306243896484 27.1025371551514,11.2200794219971 23.9296875,10.6165618896484z M25.265625,
-                            7.35874938964844L26.6953125,9.86656188964844 29.3671875,8.64781188964844 29.765625,11.4837493896484 32.7421875,
-                            11.2728118896484 32.015625,14.1790618896484 34.921875,14.9759368896484 33.1875,17.4134368896484 35.578125,
-                            19.1478118896484 33.140625,20.7884368896484 34.640625,23.3665618896484 31.8046875,23.9759368896484 32.3203125,
-                            26.9759368896484 29.4375,26.5540618896484 28.921875,29.4837493896484 26.25,27.9603118896484 24.75,
-                            30.4681243896484 22.8046875,28.2181243896484 20.5078125,30.0228118896484 19.5703125,27.1634368896484 16.640625,
-                            28.0306243896484 16.875,25.1009368896484 13.875,24.7728118896484 15.140625,22.1478118896484 12.421875,
-                            20.7415618896484 14.5546875,18.6790618896484 12.4921875,16.5228118896484 15.2578125,15.3040618896484 14.203125,
-                            12.5384368896484 17.1328125,12.3978118896484 17.1328125,9.42124938964844 19.921875,10.4056243896484 21.046875,
-                            7.61656188964844 23.296875,9.49156188964844 25.265625,7.35874938964844z" />
-                    </Path.Data>
-                    <Path.RenderTransform>
-                        <TransformGroup>
-                            <TransformGroup.Children>
-                                <RotateTransform Angle="0" />
-                                <ScaleTransform ScaleX="1" ScaleY="1" />
-                            </TransformGroup.Children>
-                        </TransformGroup>
-                    </Path.RenderTransform>
-                </Path>
+    <DataTemplate x:Key="symbolTemplate">
+        <Grid>
+            <Grid 
+                Name="backgroundGrid" 
+                Width="24" 
+                Height="24" 
+                Visibility="Visible">
+                <Ellipse Fill="#FFE2DBDB" Name="Fill" Visibility="Visible"/>
             </Grid>
+            <Path 
+                Stretch="Uniform" 
+                Fill="Brown" 
+                Stroke="Green" 
+                Width="24" 
+                Height="24" 
+                RenderTransformOrigin="0.5,0.5">
+                <Path.Data>
+                    <PathGeometry 
+                        FillRule="Nonzero" 
+                        Figures="M23.9296875,10.6165618896484L20.759765625,11.2200794219971 18.09375,
+                        13.0306243896484 16.283203125,15.6966400146484 15.6796875,18.8665618896484 16.283203125,
+                        22.0423431396484 18.09375,24.7259368896484 20.759765625,26.5540618896484 23.9296875,27.1634368896484 27.1025371551514,
+                        26.5540618896484 29.77734375,24.7259368896484 31.5966796875,22.0423431396484 32.203125,18.8665618896484 31.5966796875,
+                        15.6966400146484 29.77734375,13.0306243896484 27.1025371551514,11.2200794219971 23.9296875,10.6165618896484z M25.265625,
+                        7.35874938964844L26.6953125,9.86656188964844 29.3671875,8.64781188964844 29.765625,11.4837493896484 32.7421875,
+                        11.2728118896484 32.015625,14.1790618896484 34.921875,14.9759368896484 33.1875,17.4134368896484 35.578125,
+                        19.1478118896484 33.140625,20.7884368896484 34.640625,23.3665618896484 31.8046875,23.9759368896484 32.3203125,
+                        26.9759368896484 29.4375,26.5540618896484 28.921875,29.4837493896484 26.25,27.9603118896484 24.75,
+                        30.4681243896484 22.8046875,28.2181243896484 20.5078125,30.0228118896484 19.5703125,27.1634368896484 16.640625,
+                        28.0306243896484 16.875,25.1009368896484 13.875,24.7728118896484 15.140625,22.1478118896484 12.421875,
+                        20.7415618896484 14.5546875,18.6790618896484 12.4921875,16.5228118896484 15.2578125,15.3040618896484 14.203125,
+                        12.5384368896484 17.1328125,12.3978118896484 17.1328125,9.42124938964844 19.921875,10.4056243896484 21.046875,
+                        7.61656188964844 23.296875,9.49156188964844 25.265625,7.35874938964844z"/>
+                </Path.Data>
+                <Path.RenderTransform>
+                    <TransformGroup>
+                        <TransformGroup.Children>
+                            <RotateTransform Angle="0"/>
+                            <ScaleTransform ScaleX="1" ScaleY="1"/>
+                        </TransformGroup.Children>
+                    </TransformGroup>
+                </Path.RenderTransform>
+            </Path>
+        </Grid>
+    </DataTemplate>
+</Window.Resources>
 
-        </DataTemplate>
-
-    </Window.Resources>
-    
 <Grid>
-        <chart:SfChart3D  Width="500" Height="500" >
-
-    ...
-        <chart:ColumnSeries3D  ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
+    <chart:SfChart3D  
+        Width="500" 
+        Height="500">
+        ...
+        <chart:ColumnSeries3D  
+            ItemsSource="{Binding CategoricalData}" 
+            XBindingPath="Year"
             YBindingPath="Plastic">
-                <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D AdornmentsPosition="Top" ShowMarker="True"
-                        SymbolTemplate="{StaticResource symbolTemplate}" ></chart:ChartAdornmentInfo3D>
-                </chart:ColumnSeries3D.AdornmentsInfo>
+            <chart:ColumnSeries3D.AdornmentsInfo>
+                <chart:ChartAdornmentInfo3D 
+                    AdornmentsPosition="Top" 
+                    ShowMarker="True"
+                    SymbolTemplate="{StaticResource symbolTemplate}">                    
+                </chart:ChartAdornmentInfo3D>
+            </chart:ColumnSeries3D.AdornmentsInfo>
         </chart:ColumnSeries3D>
-
-    ...
-        </chart:SfChart3D>
+        ...
+    </chart:SfChart3D>
 </Grid>
 
 {% endhighlight %}
diff --git a/wpf/SfChart3D/Adornments/Positioning-Adornments.md b/wpf/SfChart3D/Adornments/Positioning-Adornments.md
index f7a02c9808..350cc7b2e4 100644
--- a/wpf/SfChart3D/Adornments/Positioning-Adornments.md
+++ b/wpf/SfChart3D/Adornments/Positioning-Adornments.md
@@ -23,33 +23,43 @@ The following code example shows the how to specify connector type:
 
 {% highlight xaml %}
 
-        <chart:ColumnSeries3D  ItemsSource="{Binding CategoricalData}" XBindingPath="Year"
-            YBindingPath="Plastic">
-                <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowMarker="True" SymbolHeight="10" SymbolWidth="10" Symbol="Diamond" AdornmentsPosition="TopAndBottom" SymbolInterior="#FF64B5F6"></chart:ChartAdornmentInfo3D>
-                </chart:ColumnSeries3D.AdornmentsInfo>
-        </chart:ColumnSeries3D>
+<chart:ColumnSeries3D  
+    ItemsSource="{Binding CategoricalData}" 
+    XBindingPath="Year"
+    YBindingPath="Plastic">
+    <chart:ColumnSeries3D.AdornmentsInfo>
+        <chart:ChartAdornmentInfo3D 
+            ShowMarker="True" 
+            SymbolHeight="10" 
+            SymbolWidth="10" 
+            Symbol="Diamond" 
+            AdornmentsPosition="TopAndBottom" 
+            SymbolInterior="#FF64B5F6">
+        </chart:ChartAdornmentInfo3D>
+    </chart:ColumnSeries3D.AdornmentsInfo>
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new CategoryDataViewModel().CategoricalData,
-                XBindingPath = "Year",
-                YBindingPath = "Plastic",
-            };
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                AdornmentsPosition=AdornmentsPosition.TopAndBottom,
-                SymbolHeight=10,
-                SymbolWidth=10
-            };
-
-        series.AdornmentsInfo = adornmentInfo;
-        chart.Series.Add(series);
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new CategoryDataViewModel().CategoricalData,
+    XBindingPath = "Year",
+    YBindingPath = "Plastic",
+};
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowMarker = true,
+    AdornmentsPosition=AdornmentsPosition.TopAndBottom,
+    SymbolHeight=10,
+    SymbolWidth=10
+};
+
+series.AdornmentsInfo = adornmentInfo;
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -71,21 +81,26 @@ The [`Auto`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adornm
 
 {% highlight xaml %}
 
-         <chart:ChartAdornmentInfo3D  UseSeriesPalette="True" LabelPosition="Auto"
-            ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
+<chart:ChartAdornmentInfo3D  
+    UseSeriesPalette="True" 
+    LabelPosition="Auto"
+    ShowLabel="True" 
+    BorderBrush="White" BorderThickness="1">
+</chart:ChartAdornmentInfo3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                LabelPosition=AdornmentsLabelPosition.Auto,
-                UseSeriesPalette=true,              
-                BorderThickness = new Thickness(1),
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowMarker = true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    LabelPosition=AdornmentsLabelPosition.Auto,
+    UseSeriesPalette=true,
+    BorderThickness = new Thickness(1),
+};
 
 {% endhighlight %}
 
@@ -103,21 +118,26 @@ The [`Inner`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn
 
 {% highlight xaml %}
 
-         <chart:ChartAdornmentInfo3D  UseSeriesPalette="True" LabelPosition="Inner"
-            ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
+<chart:ChartAdornmentInfo3D  
+    UseSeriesPalette="True" 
+    LabelPosition="Inner"
+    ShowLabel="True" 
+    BorderBrush="White" BorderThickness="1">
+</chart:ChartAdornmentInfo3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                LabelPosition=AdornmentsLabelPosition.Inner,
-                UseSeriesPalette=true,              
-                BorderThickness = new Thickness(1),
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowMarker = true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    LabelPosition=AdornmentsLabelPosition.Inner,
+    UseSeriesPalette=true,              
+    BorderThickness = new Thickness(1),
+};
 
 {% endhighlight %}
 
@@ -135,21 +155,26 @@ The [`Outer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Adorn
 
 {% highlight xaml %}
 
-         <chart:ChartAdornmentInfo3D  UseSeriesPalette="True" LabelPosition="Outer"
-            ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
+<chart:ChartAdornmentInfo3D  
+    UseSeriesPalette="True" 
+    LabelPosition="Outer"
+    ShowLabel="True" 
+    BorderBrush="White" BorderThickness="1">
+</chart:ChartAdornmentInfo3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                LabelPosition=AdornmentsLabelPosition.Outer,
-                UseSeriesPalette=true,              
-                BorderThickness = new Thickness(1),
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowMarker = true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    LabelPosition=AdornmentsLabelPosition.Outer,
+    UseSeriesPalette=true,              
+    BorderThickness = new Thickness(1),
+};
 
 {% endhighlight %}
 
@@ -167,21 +192,26 @@ The [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.Ador
 
 {% highlight xaml %}
 
-         <chart:ChartAdornmentInfo3D  UseSeriesPalette="True" LabelPosition="Center"
-            ShowLabel="True" BorderBrush="White" BorderThickness="1"></chart:ChartAdornmentInfo3D>
+<chart:ChartAdornmentInfo3D  
+    UseSeriesPalette="True" 
+    LabelPosition="Center"
+    ShowLabel="True" 
+    BorderBrush="White" BorderThickness="1">
+</chart:ChartAdornmentInfo3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-        ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
-            {
-                ShowMarker = true,
-                BorderBrush = new SolidColorBrush(Colors.White),
-                LabelPosition=AdornmentsLabelPosition.Center,
-                UseSeriesPalette=true,              
-                BorderThickness = new Thickness(1),
-            };
+ChartAdornmentInfo3D adornmentInfo = new ChartAdornmentInfo3D()
+{
+    ShowLabel = true,
+    ShowMarker = true,
+    BorderBrush = new SolidColorBrush(Colors.White),
+    LabelPosition=AdornmentsLabelPosition.Center,
+    UseSeriesPalette=true,              
+    BorderThickness = new Thickness(1),
+};
 
 {% endhighlight %}
 
diff --git a/wpf/SfChart3D/Appearance.md b/wpf/SfChart3D/Appearance.md
index 103ffd1ae2..7b47d10a72 100644
--- a/wpf/SfChart3D/Appearance.md
+++ b/wpf/SfChart3D/Appearance.md
@@ -39,13 +39,13 @@ Each palette applies a set of predefined brushes to the series in a predefined o
 
 {% highlight xaml %}
 
-    <chart:SfChart3D Height="250" Width="350" Palette="Metro"  >
+<chart:SfChart3D Height="250" Width="350" Palette="Metro">
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    chart.Palette = ChartColorPalette.Metro;
+chart.Palette = ChartColorPalette.Metro;
 
 {% endhighlight %}
 
@@ -59,13 +59,13 @@ The following code example defined the palette as a [`BlueChrome`](https://help.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D Height="250" Width="350" Palette="BlueChrome">
+<chart:SfChart3D Height="250" Width="350" Palette="BlueChrome">
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    chart.Palette = ChartColorPalette.BlueChrome;
+chart.Palette = ChartColorPalette.BlueChrome;
 
 {% endhighlight %}
 
@@ -82,24 +82,26 @@ Each palette applies a set of predefined brushes to the segment in a predefined
 
 {% highlight xaml %}
 
-    <syncfusion:ColumnSeries3D ItemsSource="{Binding Data}"
-                           XBindingPath="XValue"
-                           YBindingPath="YValue"
-                           Palette="Metro"/>
+<syncfusion:ColumnSeries3D 
+    ItemsSource="{Binding Data}"
+    XBindingPath="XValue"
+    YBindingPath="YValue"
+    Palette="Metro">
+</syncfusion:ColumnSeries3D>
 						   
 {% endhighlight %}
 						   
 {% highlight c# %}
 
-    ColumnSeries3D columnSeries = new ColumnSeries3D()
-    {
-        ItemsSource = viewModel.Data,
-        XBindingPath = "XValue",
-        YBindingPath = "YValue",
-        Palette = ChartColorPalette.Metro
-    };
+ColumnSeries3D columnSeries = new ColumnSeries3D()
+{
+    ItemsSource = viewModel.Data,
+    XBindingPath = "XValue",
+    YBindingPath = "YValue",
+    Palette = ChartColorPalette.Metro
+};
 
-    chart.Series.Add(columnSeries);
+chart.Series.Add(columnSeries);
 
 {% endhighlight %}
 
@@ -113,24 +115,26 @@ The following code example defined the palette as an **AutumnBrights**.
 
 {% highlight xaml %}
 
-    <syncfusion:ColumnSeries3D ItemsSource="{Binding Data}"
-                           XBindingPath="XValue"
-                           YBindingPath="YValue"
-                           Palette="AutumnBrights"/>
+<syncfusion:ColumnSeries3D 
+    ItemsSource="{Binding Data}"
+    XBindingPath="XValue"
+    YBindingPath="YValue"
+    Palette="AutumnBrights">
+</syncfusion:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ColumnSeries3D columnSeries = new ColumnSeries3D()
-    {
-        ItemsSource = viewModel.Data,
-        XBindingPath = "XValue",
-        YBindingPath = "YValue",
-        Palette = ChartColorPalette.AutumnBrights
-    };
+ColumnSeries3D columnSeries = new ColumnSeries3D()
+{
+    ItemsSource = viewModel.Data,
+    XBindingPath = "XValue",
+    YBindingPath = "YValue",
+    Palette = ChartColorPalette.AutumnBrights
+};
 
-    chart.Series.Add(series);
+chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -149,54 +153,42 @@ SfChart3D provides an option that enables you to define your own color brushes w
 
 {% highlight xaml %}
 
-    <chart:DoughnutSeries3D  YBindingPath="Percentage" Palette="Custom"
-
-    XBindingPath="Category" ItemsSource="{Binding Tax}" >   
-
+<chart:DoughnutSeries3D  
+    YBindingPath="Percentage" 
+    Palette="Custom" 
+    XBindingPath="Category" 
+    ItemsSource="{Binding Tax}">
+    
     <chart:DoughnutSeries3D.ColorModel>
-
-    <chart:ChartColorModel>
-
-    <chart:ChartColorModel.CustomBrushes>
-
-    <SolidColorBrush Color="Cyan"/>
-
-    <SolidColorBrush Color="DarkCyan"/>                                                
-
-    </chart:ChartColorModel.CustomBrushes>
-
-    </chart:ChartColorModel>
-
+        <chart:ChartColorModel>
+            <chart:ChartColorModel.CustomBrushes>
+                <SolidColorBrush Color="Cyan"/>
+                <SolidColorBrush Color="DarkCyan"/>
+            </chart:ChartColorModel.CustomBrushes>
+        </chart:ChartColorModel>
     </chart:DoughnutSeries3D.ColorModel>
-
-    </chart:DoughnutSeries3D>
+    
+</chart:DoughnutSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ChartColorModel colorModel = new ChartColorModel();
-
-    colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan));
-
-    colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan));
-
-    DoughnutSeries3D series = new DoughnutSeries3D()
-    {
-
-        ItemsSource = new ViewModel().Tax,
-
-        XBindingPath = "Category",
+ChartColorModel colorModel = new ChartColorModel();
 
-        YBindingPath = "Percentage",
+colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Cyan));
+colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.DarkCyan));
 
-        Palette = ChartColorPalette.Custom,
+DoughnutSeries3D series = new DoughnutSeries3D()
+{
+	ItemsSource = new ViewModel().Tax,
+	XBindingPath = "Category",
+	YBindingPath = "Percentage",
+	Palette = ChartColorPalette.Custom,
+	ColorModel = colorModel
+};
 
-        ColorModel = colorModel
-
-    };
-
-    chart.Series.Add(series);
+ chart.Series.Add(series);
 
 {% endhighlight %}
 
@@ -210,43 +202,31 @@ You can define the custom palette for the series as shown in the following code
 
 {% highlight xaml %}
 
-    <chart:SfChart3D Height="250" Width="350" Palette="Custom">
-
+<chart:SfChart3D Height="250" Width="350" Palette="Custom">
     <chart:SfChart3D.ColorModel>
-
-    <chart:ChartColorModel>
-
-    <chart:ChartColorModel.CustomBrushes>
-
-    <SolidColorBrush Color="BlueViolet"/>
-
-    <SolidColorBrush Color="PeachPuff"/>
-
-    <SolidColorBrush Color="Purple"/>
-
-    </chart:ChartColorModel.CustomBrushes>
-
-    </chart:ChartColorModel>
-
+        <chart:ChartColorModel>
+            <chart:ChartColorModel.CustomBrushes>
+                <SolidColorBrush Color="BlueViolet"/>
+                <SolidColorBrush Color="PeachPuff"/>
+                <SolidColorBrush Color="Purple"/>
+            </chart:ChartColorModel.CustomBrushes>
+        </chart:ChartColorModel>
     </chart:SfChart3D.ColorModel>
-
-    </chart:SfChart3D>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    chart.Palette = ChartColorPalette.Custom;
+chart.Palette = ChartColorPalette.Custom;
 
-    ChartColorModel colorModel = new ChartColorModel();
+ChartColorModel colorModel = new ChartColorModel();
 
-    colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet));
+colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.BlueViolet));
+colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff));
+colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple));
 
-    colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.PeachPuff));
-
-    colorModel.CustomBrushes.Add(new SolidColorBrush(Colors.Purple));
-
-    chart.ColorModel = colorModel;
+chart.ColorModel = colorModel;
 
 {% endhighlight %}
 
@@ -263,31 +243,31 @@ The color for the chart segments can be bound from its items source collection b
 
 {% highlight xaml %}
 
-    <chart:ColumnSeries3D ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue" SegmentColorPath="ColorPath">
-
-    </chart:ColumnSeries3D>
+<chart:ColumnSeries3D
+    ItemsSource="{Binding Data}"
+    XBindingPath="XValue"
+    YBindingPath="YValue"
+    SegmentColorPath="ColorPath">
+</chart:ColumnSeries3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ColumnSeries3D series = new ColumnSeries3D()
- 
-    {
-        
-        ItemsSource = viewModel.Data,
-        XBindingPath = "XValue",
-        YBindingPath = "YValue",
-        SegmentColorPath = "ColorPath"
-            
-    };
-
-    Data = new ObservableCollection<Model>();
-    Data.Add(new Model() { XValue = "Jan", YValue = 10, ColorPath = new SolidColorBrush(Colors.Cyan) });
-    Data.Add(new Model() { XValue = "Feb", YValue = 24, ColorPath = new SolidColorBrush(Colors.Pink) });
-    Data.Add(new Model() { XValue = "Mar", YValue = 18, ColorPath = new SolidColorBrush(Colors.Red) });
-    Data.Add(new Model() { XValue = "Apr", YValue = 16, ColorPath = new SolidColorBrush(Colors.Orange) });
-    Data.Add(new Model() { XValue = "May", YValue = 28, ColorPath = new SolidColorBrush(Colors.LightGreen) });
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = viewModel.Data,
+    XBindingPath = "XValue",
+    YBindingPath = "YValue",
+    SegmentColorPath = "ColorPath" 
+};
+
+Data = new ObservableCollection<Model>();
+Data.Add(new Model() { XValue = "Jan", YValue = 10, ColorPath = new SolidColorBrush(Colors.Cyan) });
+Data.Add(new Model() { XValue = "Feb", YValue = 24, ColorPath = new SolidColorBrush(Colors.Pink) });
+Data.Add(new Model() { XValue = "Mar", YValue = 18, ColorPath = new SolidColorBrush(Colors.Red) });
+Data.Add(new Model() { XValue = "Apr", YValue = 16, ColorPath = new SolidColorBrush(Colors.Orange) });
+Data.Add(new Model() { XValue = "May", YValue = 28, ColorPath = new SolidColorBrush(Colors.LightGreen) });
 
 
 {% endhighlight %}
diff --git a/wpf/SfChart3D/Axis.md b/wpf/SfChart3D/Axis.md
index e14bd684f8..744bf3e365 100644
--- a/wpf/SfChart3D/Axis.md
+++ b/wpf/SfChart3D/Axis.md
@@ -38,28 +38,27 @@ ChartAxis supports the following types.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D>
-            <!--PrimaryAxis-->
-            <chart:SfChart3D.PrimaryAxis>
-                <chart:NumericalAxis3D/>
-            </chart:SfChart3D.PrimaryAxis>
-
-            <!--SecondaryAxis-->
-            <chart:SfChart3D.SecondaryAxis>
-                <chart:NumericalAxis3D />
-            </chart:SfChart3D.SecondaryAxis>
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--PrimaryAxis-->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:NumericalAxis3D/>
+    </chart:SfChart3D.PrimaryAxis>
+
+    <!--SecondaryAxis-->
+    <chart:SfChart3D.SecondaryAxis>
+        <chart:NumericalAxis3D/>
+    </chart:SfChart3D.SecondaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-        SfChart3D Chart3D = new SfChart3D()
-            {
-                PrimaryAxis = new NumericalAxis3D(),
-
-                SecondaryAxis = new NumericalAxis3D()               
-            };
+SfChart3D Chart3D = new SfChart3D()
+{
+    PrimaryAxis = new NumericalAxis3D(),
+    SecondaryAxis = new NumericalAxis3D()
+};
 
 {% endhighlight %}
 
@@ -73,21 +72,21 @@ ChartAxis supports the following types.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D>
-            <!--PrimaryAxis-->
-            <chart:SfChart3D.PrimaryAxis>
-                <chart:CategoryAxis3D/>
-            </chart:SfChart3D.PrimaryAxis>
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--PrimaryAxis-->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:CategoryAxis3D/>
+    </chart:SfChart3D.PrimaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-        SfChart3D Chart3D = new SfChart3D()
-            {
-                PrimaryAxis = new CategoryAxis3D()               
-            };
+SfChart3D Chart3D = new SfChart3D()
+{
+    PrimaryAxis = new CategoryAxis3D()
+};
 
 {% endhighlight %}
 
@@ -101,21 +100,21 @@ ChartAxis supports the following types.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D>
-            <!--PrimaryAxis-->
-            <chart:SfChart3D.PrimaryAxis>
-                <chart:DateTimeAxis3D/>
-            </chart:SfChart3D.PrimaryAxis>
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--PrimaryAxis-->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:DateTimeAxis3D/>
+    </chart:SfChart3D.PrimaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-        SfChart3D Chart3D = new SfChart3D()
-            {
-                PrimaryAxis = new DateTimeAxis3D()               
-            };
+SfChart3D Chart3D = new SfChart3D()
+{
+    PrimaryAxis = new DateTimeAxis3D()
+};
 
 {% endhighlight %}
 
@@ -129,21 +128,21 @@ ChartAxis supports the following types.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D>
-            <!--SecondaryAxis-->
-            <chart:SfChart3D.SecondaryAxis>
-                <chart:LogarithmicAxis3D />
-            </chart:SfChart3D.SecondaryAxis>
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--SecondaryAxis-->
+    <chart:SfChart3D.SecondaryAxis>
+        <chart:LogarithmicAxis3D />
+    </chart:SfChart3D.SecondaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-       SfChart3D Chart3D = new SfChart3D()
-            {
-                SecondaryAxis = new LogarithmicAxis3D()               
-            };
+SfChart3D Chart3D = new SfChart3D()
+{
+    SecondaryAxis = new LogarithmicAxis3D()
+}
 
 {% endhighlight %}
 
@@ -157,21 +156,21 @@ ChartAxis supports the following types.
 
 {% highlight xaml %}
 
-    <chart:SfChart3D>
-            <!--PrimaryAxis-->
-            <chart:SfChart3D.PrimaryAxis>
-                <chart:TimeSpanAxis3D/>
-            </chart:SfChart3D.PrimaryAxis>
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--PrimaryAxis-->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:TimeSpanAxis3D/>
+    </chart:SfChart3D.PrimaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-        SfChart3D Chart3D = new SfChart3D()
-            {
-                PrimaryAxis = new TimeSpanAxis3D()               
-            };
+SfChart3D Chart3D = new SfChart3D()
+{
+    PrimaryAxis = new TimeSpanAxis3D()
+};
 
 {% endhighlight %}
 
@@ -189,40 +188,48 @@ The following code example illustrates how to create Depth Axis.
 
 {% highlight xaml %}
 
-        <chart:SfChart3D Margin="120,20,120,30" x:Name="chart" Rotation="43" Tilt="10"
-                         EnableRotation="True" PerspectiveAngle="100">
-                . . .
-            <chart:SfChart3D.DepthAxis>
-                <chart:NumericalAxis3D Interval="1"/>
-            </chart:SfChart3D.DepthAxis>
-            <chart:ColumnSeries3D XBindingPath="XValue"                                
-                                  YBindingPath="YValue"
-                                  ZBindingPath="ZValue"
-                                  ItemsSource="{Binding Data}"/>
-        </chart:SfChart3D>
+<chart:SfChart3D 
+    Margin="120,20,120,30"
+    Rotation="43"
+    Tilt="10"
+    EnableRotation="True"
+    PerspectiveAngle="100">
+    ...
+    <chart:SfChart3D.DepthAxis>
+        <chart:NumericalAxis3D 
+            Interval="1"
+            Header="Depth (Z)"/>
+    </chart:SfChart3D.DepthAxis>
+
+    <chart:ColumnSeries3D 
+        XBindingPath="XValue"
+        YBindingPath="YValue"
+        ZBindingPath="ZValue"
+        ItemsSource="{Binding Data}"/>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %} 
 
-            SfChart3D chart = new SfChart3D();
-            chart.Rotation = 43;
-            chart.Tilt = 10;
-            chart.Margin = new Thickness(120, 20, 120, 30);
-            chart.PerspectiveAngle = 100;
-            chart.EnableRotation = true;
-
-            NumericalAxis3D depthAxis = new NumericalAxis3D();
-            depthAxis.Interval = 1;
-            chart.DepthAxis = depthAxis;
-
-            ColumnSeries3D series1 = new ColumnSeries3D();
-            series1.ItemsSource = (new ViewModel()).Data;
-            series1.XBindingPath = "XValue";
-            series1.YBindingPath = "YValue";
-            series1.ZBindingPath = "ZValue";
-            chart.Series.Add(series1);
-            this.Content = chart;
+SfChart3D chart = new SfChart3D();
+chart.Rotation = 43;
+chart.Tilt = 10;
+chart.Margin = new Thickness(120, 20, 120, 30);
+chart.PerspectiveAngle = 100;
+chart.EnableRotation = true;
+
+NumericalAxis3D depthAxis = new NumericalAxis3D();
+depthAxis.Interval = 1;
+chart.DepthAxis = depthAxis;
+
+ColumnSeries3D series1 = new ColumnSeries3D();
+series1.ItemsSource = (new ViewModel()).Data;
+series1.XBindingPath = "XValue";
+series1.YBindingPath = "YValue";
+series1.ZBindingPath = "ZValue";
+chart.Series.Add(series1);
+this.Content = chart;
 
 {% endhighlight %}
 
@@ -238,54 +245,67 @@ In this type of chart, multiple series can be plotted in [`DepthAxis`](https://h
 
 {% highlight xaml %}
 
-<chart:SfChart3D x:Name="chart" Rotation="43" >
-          . . . 
-            <chart:SfChart3D.DepthAxis>
-                <chart:NumericalAxis3D Interval="1"/>
-            </chart:SfChart3D.DepthAxis>
+<chart:SfChart3D
+    x:Name="chart"
+    Rotation="43">
+    ...
+    <chart:SfChart3D.DepthAxis>
+        <chart:NumericalAxis3D Interval="1"/>
+    </chart:SfChart3D.DepthAxis>
+
+    <chart:LineSeries3D
+        XBindingPath="XValue"
+        YBindingPath="YValue"
+        ItemsSource="{Binding Data1}"
+        Label="First"/>
 
-            <chart:LineSeries3D XBindingPath="XValue"                                
-                                YBindingPath="YValue"                         
-                                ItemsSource="{Binding Data1}" 
-                                Label="First"/>
+    <chart:LineSeries3D
+        XBindingPath="XValue"
+        YBindingPath="YValue"
+        ItemsSource="{Binding Data2}"
+        Label="Second"/>
 
-            <chart:LineSeries3D XBindingPath="XValue"                                
-                                YBindingPath="YValue"                         
-                                ItemsSource="{Binding Data2}" 
-                                Label="Second"/>
-        </chart:SfChart3D>
+</chart:SfChart3D>
 
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 300, Width = 500  };
+SfChart3D chart = new SfChart3D()
+{
+    Header = "Chart",
+    Height = 300,
+    Width  = 500
+};
 
-            chart.Rotation = 43;
-            . . . 
+chart.Rotation = 43;
 
-            NumericalAxis3D depthAxis = new NumericalAxis3D();
-            depthAxis.Interval = 1;
-            chart.DepthAxis = depthAxis;
+NumericalAxis3D depthAxis = new NumericalAxis3D();
+depthAxis.Interval = 1;
 
+chart.DepthAxis = depthAxis;
 
-            LineSeries3D series1 = new LineSeries3D();
-            series1.ItemsSource = (new ViewModel()).Data1;
-            series1.XBindingPath = "XValue";
-            series1.YBindingPath = "YValue";
-            series1.Label = "First";
+LineSeries3D series1 = new LineSeries3D()
+{
+    ItemsSource  = (new ViewModel()).Data1,
+    XBindingPath = "XValue",
+    YBindingPath = "YValue",
+    Label        = "First"
+};
 
+LineSeries3D series2 = new LineSeries3D()
+{
+    ItemsSource  = (new ViewModel()).Data2,
+    XBindingPath = "XValue",
+    YBindingPath = "YValue",
+    Label        = "Second"
+};
 
-            LineSeries3D series2 = new LineSeries3D();
-            series2.ItemsSource = (new ViewModel()).Data2;
-            series2.XBindingPath = "XValue";
-            series2.YBindingPath = "YValue";
-            series2.Label = "Second";
+chart.Series.Add(series1);
+chart.Series.Add(series2);
 
-            chart.Series.Add(series1);
-            chart.Series.Add(series2);
-            this.Content = chart;
+this.Content = chart;
 
 {% endhighlight %}
 
diff --git a/wpf/SfChart3D/GettingStarted.md b/wpf/SfChart3D/GettingStarted.md
index e750b89cbe..c9c830c4c5 100644
--- a/wpf/SfChart3D/GettingStarted.md
+++ b/wpf/SfChart3D/GettingStarted.md
@@ -41,29 +41,28 @@ Then initialize an empty chart with [PrimaryAxis](https://help.syncfusion.com/cr
 
 {% highlight xaml %}
 
-    <chart:SfChart3D >
-            
-        <!--PrimaryAxis-->
-        <chart:SfChart3D.PrimaryAxis>
-            <chart:DateTimeAxis3D/>
-        </chart:SfChart3D.PrimaryAxis>
-        <!--SecondaryAxis-->
-        <chart:SfChart3D.SecondaryAxis>
-            <chart:NumericalAxis3D/>
-        </chart:SfChart3D.SecondaryAxis>
-
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    <!--PrimaryAxis-->
+    <chart:SfChart3D.PrimaryAxis>
+        <chart:DateTimeAxis3D/>
+    </chart:SfChart3D.PrimaryAxis>
+    
+    <!--SecondaryAxis-->
+    <chart:SfChart3D.SecondaryAxis>
+        <chart:NumericalAxis3D/>
+    </chart:SfChart3D.SecondaryAxis>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %}
 
-     SfChart3D Chart3D = new SfChart3D()
-        {
-            PrimaryAxis = new DateTimeAxis3D(),
+SfChart3D Chart3D = new SfChart3D()
+{
+    PrimaryAxis = new DateTimeAxis3D(),
 
-            SecondaryAxis = new NumericalAxis3D(),
-        };
+    SecondaryAxis = new NumericalAxis3D(),
+};
 
 {% endhighlight %}
 
@@ -78,11 +77,11 @@ Since, the above step will produce only an empty column 3D chart, plotting data
 
 {% highlight C# %}
 
-    public class UserProfile
-    {
-        public DateTime TimeStamp { get; set; }
-        public double NoOfUsers { get; set; }
-    }
+public class UserProfile
+{
+    public DateTime TimeStamp { get; set; }
+    public double NoOfUsers { get; set; }
+}
 
 {% endhighlight %}
 
@@ -90,24 +89,23 @@ Next, create a view model class and initialize a list of `UserProfile` objects a
 
 {% highlight C# %}
 
-    public class UsersViewModel
+public class UsersViewModel
+{
+    public ObservableCollection<UserProfile> UsersList { get; set; }
+    public UsersViewModel()
     {
-        public UsersViewModel()
-        {
-            this.UsersList = new ObservableCollection<UserProfile>();
+        UsersList = new ObservableCollection<UserProfile>();
 
-            DateTime date = DateTime.Today;
-
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 1000 });
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 5000 });
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1.5), NoOfUsers = 3000 });
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 4000 });
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2.5), NoOfUsers = 2000 });
-            UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = 1000 });
-        }
-        public ObservableCollection<UserProfile> UsersList { get; set; }
+        DateTime date = DateTime.Today;
 
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 1000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 5000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1.5), NoOfUsers = 3000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 4000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2.5), NoOfUsers = 2000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = 1000 });
     }
+}
 
 {% endhighlight %}
 
@@ -158,40 +156,47 @@ As we are going to visualize the comparison of heights in the data model, add [`
 
 {% highlight xaml %}
 
-  <chart:SfChart3D x:Name="Chart3D" Width="500" Height="500">
-            
-        <!--PrimaryAxis-->
-        <chart:SfChart3D.PrimaryAxis>
-            <chart:DateTimeAxis3D/>
-        </chart:SfChart3D.PrimaryAxis>
-        <!--SecondaryAxis-->
-        <chart:SfChart3D.SecondaryAxis>
-            <chart:NumericalAxis3D/>
-        </chart:SfChart3D.SecondaryAxis>
-
-        <chart:ColumnSeries3D ItemsSource="{Binding UsersList}" XBindingPath="TimeStamp"
-            YBindingPath="NoOfUsers"></chart:ColumnSeries3D>
-            
-    </chart:SfChart3D>
+ <chart:SfChart3D
+     x:Name="Chart3D"
+     Width="500"
+     Height="500">
+
+     <!-- PrimaryAxis -->
+     <chart:SfChart3D.PrimaryAxis>
+         <chart:DateTimeAxis3D />
+     </chart:SfChart3D.PrimaryAxis>
+
+     <!-- SecondaryAxis -->
+     <chart:SfChart3D.SecondaryAxis>
+         <chart:NumericalAxis3D />
+     </chart:SfChart3D.SecondaryAxis>
+
+     <chart:ColumnSeries3D
+         ItemsSource="{Binding UsersList}"
+         XBindingPath="TimeStamp"
+         YBindingPath="NoOfUsers">   
+     </chart:ColumnSeries3D>
+
+ </chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    SfChart3D chart3D = new SfChart3D();
+SfChart3D chart3D = new SfChart3D();
 
-    chart3D.PrimaryAxis = new CategoryAxis3D();
+chart3D.PrimaryAxis = new DateTimeAxis3D();
 
-    chart3D.SecondaryAxis = new NumericalAxis3D();
+chart3D.SecondaryAxis = new NumericalAxis3D();
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new UsersViewModel().UsersList,
-            XBindingPath = "TimeStamp",
-            YBindingPath = "NoOfUsers"
-        };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new UsersViewModel().UsersList,
+    XBindingPath = "TimeStamp",
+    YBindingPath = "NoOfUsers"
+};
 
-    Chart3D.Series.Add(series);
+chart3D.Series.Add(series);
 
 {% endhighlight %}
 
@@ -206,18 +211,16 @@ The header of the chart acts as the title to provide quick information to the us
 {% highlight xaml %}
 
 <Grid>
-
-   <chart:SfChart3D Header="Chart"> 
-   </chart:SfChart3D> 
-
+    <chart:SfChart3D Header="Chart"></chart:SfChart3D>
 </Grid>
 
 {% endhighlight %}
 
 {% highlight C# %} 
 
-    SfChart3D chart3D = new SfChart3D();
-    chart3D.Header = "Chart";
+SfChart3D chart3D = new SfChart3D();
+
+chart3D.Header = "Chart";
 
 {% endhighlight %}
 
@@ -231,28 +234,29 @@ You can add data labels to improve the readability of the chart and it can be en
 
 {% highlight xaml %}
 
-    <Grid>
-        <chart:SfChart3D >
-
+<Grid>
+    <chart:SfChart3D>
         ...
-        
-            <chart:ColumnSeries3D ItemsSource="{Binding UsersList}" XBindingPath="TimeStamp"
+        <chart:ColumnSeries3D 
+            ItemsSource="{Binding UsersList}" 
+            XBindingPath="TimeStamp"
             YBindingPath="NoOfUsers">
-                <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D></chart:ChartAdornmentInfo3D>
-                </chart:ColumnSeries3D.AdornmentsInfo>
-            </chart:ColumnSeries3D>
+            <chart:ColumnSeries3D.AdornmentsInfo>
+                <chart:ChartAdornmentInfo3D></chart:ChartAdornmentInfo3D>
+            </chart:ColumnSeries3D.AdornmentsInfo>
+        </chart:ColumnSeries3D>    
         ...
-
-        </chart:SfChart3D>
-
-    </Grid>
+    </chart:SfChart3D>
+</Grid>
 
 {% endhighlight %}
 
 {% highlight C# %} 
 
-series.AdornmentsInfo = new ChartAdornmentInfo3D (){ ShowLabel = true }; 
+series.AdornmentsInfo = new ChartAdornmentInfo3D() 
+{ 
+    ShowLabel = true 
+};
 
 {% endhighlight %}
 
@@ -268,20 +272,16 @@ You can enable legend using the [`Legend`](https://help.syncfusion.com/cr/wpf/Sy
 
 {% highlight xaml %}
 
- <Grid>
-        <chart:SfChart3D >
-
+<Grid>
+    <chart:SfChart3D>
         ...
-        
         <!--Legend-->
         <chart:SfChart3D.Legend>
             <chart:ChartLegend></chart:ChartLegend>
         </chart:SfChart3D.Legend>
         ...
-
-        </chart:SfChart3D>
-
-    </Grid>
+    </chart:SfChart3D>
+</Grid>
 
 {% endhighlight %}
 
@@ -299,30 +299,28 @@ Additionally, you need to set label for each series using the [`Label`](https://
 
 {% highlight xaml %}
 
-    <chart:SfChart3D >
-
-	...
-
-        <chart:ColumnSeries3D Label="UserProfile" ItemsSource="{Binding UsersList}" XBindingPath="TimeStamp"
-            YBindingPath="NoOfUsers" >
-
-        </chart:ColumnSeries3D>
-
-	...
-
-    </chart:SfChart3D>
+<chart:SfChart3D>
+    ...
+    <chart:ColumnSeries3D 
+        Label="UserProfile" 
+        ItemsSource="{Binding UsersList}" 
+        XBindingPath="TimeStamp"           
+        YBindingPath="NoOfUsers">
+    </chart:ColumnSeries3D>
+    ...
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %} 
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new UsersViewModel().UsersList,
-            XBindingPath = "TimeStamp",
-            YBindingPath = "NoOfUsers",
-            Label = "UserProfile"
-        };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new UsersViewModel().UsersList,
+    XBindingPath = "TimeStamp",
+    YBindingPath = "NoOfUsers",
+    Label = "UserProfile"
+};
 
 {% endhighlight %}
 
@@ -336,31 +334,30 @@ Tooltips are used to show information about the segment, when you click the segm
 
 {% highlight xaml %}
 
-    <chart:SfChart3D >
-
-	...
-
-        <chart:ColumnSeries3D Label="UserProfile" ItemsSource="{Binding UsersList}" XBindingPath="TimeStamp"
-            YBindingPath="NoOfUsers" ShowTooltip="True" >
-
-        </chart:ColumnSeries3D>
-
-	...
-
-    </chart:SfChart3D> 
+<chart:SfChart3D>
+    ...
+    <chart:ColumnSeries3D 
+        Label="UserProfile" 
+        ItemsSource="{Binding UsersList}" 
+        XBindingPath="TimeStamp"            
+        YBindingPath="NoOfUsers" 
+        ShowTooltip="True">
+    </chart:ColumnSeries3D>
+    ...
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight C# %} 
 
-    ColumnSeries3D series = new ColumnSeries3D()
-        {
-            ItemsSource = new UsersViewModel().UsersList,
-            XBindingPath = "TimeStamp",
-            YBindingPath = "NoOfUsers",
-            Label = "UserProfile",
-            ShowTooltip = true,            
-        };
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new UsersViewModel().UsersList,
+    XBindingPath = "TimeStamp",
+    YBindingPath = "NoOfUsers",
+    Label = "UserProfile",
+    ShowTooltip = true,            
+};
 
 
 {% endhighlight %}
@@ -374,21 +371,25 @@ The following code example gives you the complete code of above configurations.
 {% highlight xaml %}
 
 <Window x:Class="GettingStarted_3DCharts.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
-        xmlns:local="clr-namespace:GettingStarted_3DCharts"
-        mc:Ignorable="d"
-        Title="MainWindow" Height="450" Width="800">
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
+    xmlns:local="clr-namespace:GettingStarted_3DCharts"
+    mc:Ignorable="d"
+    Title="MainWindow" Height="450" Width="800">
     
     <Window.DataContext>
         <local:UsersViewModel/>
     </Window.DataContext>
     
     <Grid>
-        <chart:SfChart3D x:Name="Chart3D" Width="500" Height="500" Header="Chart">
+        <chart:SfChart3D 
+            x:Name="Chart3D" 
+            Width="500" 
+            Height="500" 
+            Header="Chart">
 
             <!--PrimaryAxis-->
             <chart:SfChart3D.PrimaryAxis>
@@ -398,23 +399,25 @@ The following code example gives you the complete code of above configurations.
             <chart:SfChart3D.SecondaryAxis>
                 <chart:NumericalAxis3D/>
             </chart:SfChart3D.SecondaryAxis>
-            
+
             <!--Legend-->
             <chart:SfChart3D.Legend>
-                <chart:ChartLegend></chart:ChartLegend>
+                <chart:ChartLegend/>
             </chart:SfChart3D.Legend>
 
-            <chart:ColumnSeries3D Label="UserProfile" ItemsSource="{Binding UsersList}" XBindingPath="TimeStamp"
-            YBindingPath="NoOfUsers" ShowTooltip="True">
+            <chart:ColumnSeries3D 
+                Label="UserProfile" 
+                ItemsSource="{Binding UsersList}" 
+                XBindingPath="TimeStamp"            
+                YBindingPath="NoOfUsers"
+                ShowTooltip="True">
 
                 <!--Adornments-->
                 <chart:ColumnSeries3D.AdornmentsInfo>
-                    <chart:ChartAdornmentInfo3D ShowLabel="True"></chart:ChartAdornmentInfo3D>
+                    <chart:ChartAdornmentInfo3D ShowLabel="True"/>
                 </chart:ColumnSeries3D.AdornmentsInfo>
-            </chart:ColumnSeries3D>           
-
+            </chart:ColumnSeries3D>
         </chart:SfChart3D>
-
     </Grid>
 </Window>
 
@@ -422,40 +425,45 @@ The following code example gives you the complete code of above configurations.
 
 {% highlight C# %}
 
-        SfChart3D chart = new SfChart3D() { Header = "Chart", Height = 500, Width = 500 };
-
-            //Adding horizontal axis to the chart 
-            CategoryAxis3D primaryAxis = new CategoryAxis3D();
-            primaryAxis.Header = "Time";
-            primaryAxis.FontSize = 14;
-            chart.PrimaryAxis = primaryAxis;
-
-            //Adding vertical axis to the chart 
-            NumericalAxis3D secondaryAxis = new NumericalAxis3D();
-            secondaryAxis.Header = "Users";
-            secondaryAxis.FontSize = 14;
-            chart.SecondaryAxis = secondaryAxis;
-
-            //Adding Legends for the chart
-            ChartLegend legend = new ChartLegend();
-            chart.Legend = legend;
-
-            //Initializing column series
-            ColumnSeries3D series = new ColumnSeries3D();
-            series.ItemsSource = new UsersViewModel().UsersList;
-            series.XBindingPath = "TimeStamp";
-            series.YBindingPath = "NoOfUsers";
-            series.Label = "UserProfile";
-            //Enable Tooltip
-            series.ShowTooltip = true;
-                       
-
-            //Setting adornment to the chart series
-            series.AdornmentsInfo = new ChartAdornmentInfo3D() { ShowLabel = true };
-
-            //Adding Series to the Chart Series Collection
-            chart.Series.Add(series);
-            this.Content = chart;
+SfChart3D chart = new SfChart3D() 
+{ 
+    Header = "Chart", 
+    Height = 500, 
+    Width = 500 
+};
+
+//Adding horizontal axis to the chart 
+DateTimeAxis3D primaryAxis = new DateTimeAxis3D();
+primaryAxis.Header = "Time";
+primaryAxis.FontSize = 14;
+chart.PrimaryAxis = primaryAxis;
+
+//Adding vertical axis to the chart 
+NumericalAxis3D secondaryAxis = new NumericalAxis3D();
+secondaryAxis.Header = "Users";
+secondaryAxis.FontSize = 14;
+chart.SecondaryAxis = secondaryAxis;
+
+//Adding Legends for the chart
+ChartLegend legend = new ChartLegend();
+chart.Legend = legend;
+
+//Initializing column series
+ColumnSeries3D series = new ColumnSeries3D();
+series.ItemsSource = new UsersViewModel().UsersList;
+series.XBindingPath = "TimeStamp";
+series.YBindingPath = "NoOfUsers";
+series.Label = "UserProfile";
+//Enable Tooltip
+series.ShowTooltip = true;
+            
+
+//Setting adornment to the chart series
+series.AdornmentsInfo = new ChartAdornmentInfo3D() { ShowLabel = true };
+
+//Adding Series to the Chart Series Collection
+chart.Series.Add(series);
+this.Content = chart;
 
 {% endhighlight %}
 
@@ -463,7 +471,7 @@ The following code example gives you the complete code of above configurations.
 
 ![Chart 3D support in WPF](3D-Charts_images/Chart-3D-GettingStarted.png)
 
-You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-SfChart3D)
+You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-SfChart3D).
 
 ## Theme
 
diff --git a/wpf/SfChart3D/InteractiveFeatures.md b/wpf/SfChart3D/InteractiveFeatures.md
index ddcc52f26d..621a34e028 100644
--- a/wpf/SfChart3D/InteractiveFeatures.md
+++ b/wpf/SfChart3D/InteractiveFeatures.md
@@ -37,39 +37,50 @@ The following code example illustrates how to set the selection brush for indivi
 
 {% highlight xaml %}
 
-   <chart:SfChart3D EnableRotation="True"  PerspectiveAngle="50"   Rotation="29" Depth="100" Palette="BlueChrome" Width="300" Height="280">            
-            <chart:ColumnSeries3D SegmentSelectionBrush="SkyBlue" ItemsSource="{Binding DataPoints}"  
-            XBindingPath="Year" YBindingPath="India">               
-            </chart:ColumnSeries3D>
- </chart:SfChart3D>
+<chart:SfChart3D
+    EnableRotation="True"
+    PerspectiveAngle="50"
+    Rotation="29"
+    Depth="100"
+    Palette="BlueChrome"
+    Width="300"
+    Height="280">
+
+    <chart:ColumnSeries3D
+        SegmentSelectionBrush="SkyBlue"
+        ItemsSource="{Binding DataPoints}"
+        XBindingPath="Year"
+        YBindingPath="India">
+    </chart:ColumnSeries3D>
+</chart:SfChart3D>
 	
 {% endhighlight %}
 
 {% highlight c# %}
 
-        SfChart3D chart3D = new SfChart3D()
-            {
-                EnableSeriesSelection=true,
-                EnableRotation=true,
-                PerspectiveAngle=50,
-                SeriesSelectedIndex=0,
-                Rotation=29,
-                Depth=100,
-                Palette=ChartColorPalette.BlueChrome,
-                Width=300,
-                Height=280
-            };
-
-            ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new StockViewModel().DataPoints,
-                XBindingPath = "Year",
-                YBindingPath = "India",
-                SegmentSelectionBrush = new SolidColorBrush(Colors.SkyBlue),
-                SegmentSpacing = 0.5
-            };
-            
-            chart3D.Series.Add(series);
+SfChart3D chart3D = new SfChart3D()
+{
+    EnableSegmentSelection = true,
+    EnableRotation = true,
+    PerspectiveAngle = 50,
+    SeriesSelectedIndex = 0,
+    Rotation = 29,
+    Depth = 100,
+    Palette = ChartColorPalette.BlueChrome,
+    Width = 300,
+    Height = 280
+};
+
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new StockViewModel().DataPoints,
+    XBindingPath = "Year",
+    YBindingPath = "India",
+    SegmentSelectionBrush = new SolidColorBrush(Colors.SkyBlue),
+    SegmentSpacing = 0.5
+};
+
+chart3D.Series.Add(series);
 
 {% endhighlight %}
 
@@ -89,56 +100,71 @@ The following code example can be used to set series selection in a SfChart3D.
 
 {% highlight xaml %}
 
-            <chart:SfChart3D EnableRotation="True"  PerspectiveAngle="50" 
-                                EnableSeriesSelection="True" SeriesSelectedIndex="0"
-                                 Rotation="29" Depth="100" Palette="BlueChrome" Width="300" Height="280">
-          
-            <chart:ColumnSeries3D SeriesSelectionBrush="LightGreen" SegmentSpacing="0.5" ItemsSource="{Binding Demands}"  XBindingPath="Category" YBindingPath="Value">
-            </chart:ColumnSeries3D>
-
-            <chart:ColumnSeries3D SegmentSpacing="0.5" SeriesSelectionBrush="SkyBlue" 
-            ItemsSource="{Binding Demands}"  XBindingPath="Category" YBindingPath="Value">
-            </chart:ColumnSeries3D>
-
-     </chart:SfChart3D>
+<chart:SfChart3D
+    EnableRotation="True"
+    PerspectiveAngle="50"
+    EnableSeriesSelection="True"
+    SeriesSelectedIndex="0"
+    Rotation="29"
+    Depth="100"
+    Palette="BlueChrome"
+    Width="300"
+    Height="280">
+
+    <chart:ColumnSeries3D
+        ItemsSource="{Binding Demands}"
+        XBindingPath="Category"
+        YBindingPath="Value"
+        SegmentSpacing="0.5"
+        SeriesSelectionBrush="LightGreen">
+    </chart:ColumnSeries3D>
+
+    <chart:ColumnSeries3D
+        ItemsSource="{Binding Demands}"
+        XBindingPath="Category"
+        YBindingPath="Value"
+        SegmentSpacing="0.5"
+        SeriesSelectionBrush="SkyBlue">
+    </chart:ColumnSeries3D>
+</chart:SfChart3D>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
         SfChart3D chart3D = new SfChart3D()
-            {
-                EnableSeriesSelection=true,
-                EnableRotation=true,
-                PerspectiveAngle=50,
-                SeriesSelectedIndex=0,
-                Rotation=29,
-                Depth=100,
-                Palette=ChartColorPalette.BlueChrome,
-                Width=300,
-                Height=280
-            };
-
-        ColumnSeries3D series = new ColumnSeries3D()
-            {
-                ItemsSource = new StockViewModel().Demands,
-                XBindingPath = "Category",
-                YBindingPath = "Value",
-                SeriesSelectionBrush = new SolidColorBrush(Colors.LightGreen),
-                SegmentSpacing = 0.5
-            };
-
-        ColumnSeries3D series1 = new ColumnSeries3D()
-            {
-                ItemsSource = new StockViewModel().Demands,
-                XBindingPath = "Category",
-                YBindingPath = "Value",
-                SeriesSelectionBrush = new SolidColorBrush(Colors.SkyBlue),
-                SegmentSpacing = 0.5
-            };
-
-        chart3D.Series.Add(series);
-        chart3D.Series.Add(series1);
+{
+    EnableSeriesSelection = true,
+    EnableRotation = true,
+    PerspectiveAngle = 50,
+    SeriesSelectedIndex = 0,
+    Rotation = 29,
+    Depth = 100,
+    Palette = ChartColorPalette.BlueChrome,
+    Width = 300,
+    Height = 280
+};
+
+ColumnSeries3D series = new ColumnSeries3D()
+{
+    ItemsSource = new StockViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+    SeriesSelectionBrush = new SolidColorBrush(Colors.LightGreen),
+    SegmentSpacing = 0.5
+};
+
+ColumnSeries3D series1 = new ColumnSeries3D()
+{
+    ItemsSource = new StockViewModel().Demands,
+    XBindingPath = "Category",
+    YBindingPath = "Value",
+    SeriesSelectionBrush = new SolidColorBrush(Colors.SkyBlue),
+    SegmentSpacing = 0.5
+};
+
+chart3D.Series.Add(series);
+chart3D.Series.Add(series1);
 
 {% endhighlight %}
 
diff --git a/wpf/Sparkline/Customize-segment-brush.md b/wpf/Sparkline/Customize-segment-brush.md
index d633a8eb3f..f0093efa39 100644
--- a/wpf/Sparkline/Customize-segment-brush.md
+++ b/wpf/Sparkline/Customize-segment-brush.md
@@ -15,15 +15,18 @@ We can able to customize the first, last, negative, high and low point brushes a
 
 {% highlight xaml %}
 
-<Syncfusion:SfColumnSparkline ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
-
-            <Syncfusion:SfColumnSparkline.SegmentTemplateSelector>
-
-                <Syncfusion:SegmentTemplateSelector FirstPointBrush="Yellow" LastPointBrush="Yellow" HighPointBrush="Red"/>
-
-            </Syncfusion:SfColumnSparkline.SegmentTemplateSelector>
-
-        </Syncfusion:SfColumnSparkline>
+ <Syncfusion:SfColumnSparkline
+     ItemsSource="{Binding UsersList}"
+     YBindingPath="NoOfUsers">
+     
+     <Syncfusion:SfColumnSparkline.SegmentTemplateSelector>
+         <Syncfusion:SegmentTemplateSelector
+             FirstPointBrush="Yellow"
+             LastPointBrush="Yellow"
+             HighPointBrush="Red"/>
+     </Syncfusion:SfColumnSparkline.SegmentTemplateSelector>
+
+ </Syncfusion:SfColumnSparkline>
 		
 {% endhighlight  %}
 
@@ -31,22 +34,15 @@ We can able to customize the first, last, negative, high and low point brushes a
 
 SfColumnSparkline sparkline = new SfColumnSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers"
-
 };
 
 SegmentTemplateSelector selector = new SegmentTemplateSelector()
 {
-
     FirstPointBrush = new SolidColorBrush(Colors.Yellow),
-
     LastPointBrush = new SolidColorBrush(Colors.Yellow),
-
     HighPointBrush = new SolidColorBrush(Colors.Red)
-
 };
 
 sparkline.SegmentTemplateSelector = selector;
@@ -55,6 +51,6 @@ sparkline.SegmentTemplateSelector = selector;
 
 {% endtabs %}
 
-Following is the snapshot for customize segment,
+The following is a snapshot of the customize segment.
 
 ![Customize-segment-brush_img1](Customize-segment-brush_images/Customize-segment-brush_img1.png)
diff --git a/wpf/Sparkline/Getting-started.md b/wpf/Sparkline/Getting-started.md
index 096ea56a96..196edec110 100644
--- a/wpf/Sparkline/Getting-started.md
+++ b/wpf/Sparkline/Getting-started.md
@@ -66,48 +66,26 @@ Since the above step will produce only an empty sparkline, we need to add some d
 {% highlight c# %}
 
 public class UserProfile
-
- {
-
-   public DateTime TimeStamp { get; set; }
-
-   public double NoOfUsers { get; set; }
-
- } 
+{
+    public DateTime TimeStamp { get; set; }
+    public double NoOfUsers { get; set; }
+}
 
 public class UsersViewModel
-
- {
-
- public UsersViewModel()
-
-  {
-
-   this.UsersList = new ObservableCollection<UserProfile>();
-
-   DateTime date = DateTime.Today;
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 5000 });
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = -3000 });
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = -4000 });
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 2000 });
-
-   UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });  }
-
- public ObservableCollection<UserProfile> UsersList
-
-  {
-
-    get; set;
-
-  }
-
- }
+{
+    public ObservableCollection<UserProfile> UsersList { get; set; }
+    public UsersViewModel()
+    {
+        this.UsersList = new ObservableCollection<UserProfile>();
+        DateTime date = DateTime.Today;
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 5000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = -3000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = -4000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 2000 });
+        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(0.5), NoOfUsers = 3000 });
+    }
+}
 
 {% endhighlight  %}
 
@@ -123,18 +101,13 @@ We need to add the above UsersViewModel to the DataContext of the sparkline, bin
 {% highlight xaml %}
 
 <Grid.DataContext>
-
-	<local:UsersViewModel/>
-
+    <local:UsersViewModel/>
 </Grid.DataContext>
 
-<Syncfusion:SfLineSparkline 
-
-		ItemsSource="{Binding UsersList}" 
-
-		YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
 {% endhighlight  %}
 
@@ -142,11 +115,8 @@ We need to add the above UsersViewModel to the DataContext of the sparkline, bin
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
   ItemsSource = new SparkViewModel().UsersList,
-
   YBindingPath = "NoOfUsers"
-
 };
 
 {% endhighlight %}
@@ -159,7 +129,7 @@ The following illustrates the result of the above code sample,
 
 ![Binding Data to WPF sparkline](Getting-started_images/Getting-started_img1.png)
 
-You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-Sparkline)
+You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-Sparkline).
 
 ## Theme
 
diff --git a/wpf/Sparkline/Getting-started_images/Getting-started_img1.png b/wpf/Sparkline/Getting-started_images/Getting-started_img1.png
index 96505717ac..4104e61c1a 100644
Binary files a/wpf/Sparkline/Getting-started_images/Getting-started_img1.png and b/wpf/Sparkline/Getting-started_images/Getting-started_img1.png differ
diff --git a/wpf/Sparkline/Highlight-Segment.md b/wpf/Sparkline/Highlight-Segment.md
index fbdba7f4c5..a8a7198e09 100644
--- a/wpf/Sparkline/Highlight-Segment.md
+++ b/wpf/Sparkline/Highlight-Segment.md
@@ -15,8 +15,10 @@ This feature enable to highlight the column segments on mouse move and this is a
 
 {% highlight xaml %}
 
-<Syncfusion:SfColumnSparkline HighlightSegment="True" ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
-
+<Syncfusion:SfColumnSparkline
+    HighlightSegment="True"
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
 </Syncfusion:SfColumnSparkline>
 		
 {% endhighlight %}  
@@ -25,19 +27,15 @@ This feature enable to highlight the column segments on mouse move and this is a
 
 SfColumnSparkline sparkline = new SfColumnSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers",
-
     HighlightSegment = true
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for highlight segment,
+The following is a snapshot of the highlight segment.
 
 ![Highlight-Segment_img1](Highlight-Segment_images/Highlight-Segment_img1.png)
diff --git a/wpf/Sparkline/How-To/Add-labels-for-track-ball.md b/wpf/Sparkline/How-To/Add-labels-for-track-ball.md
index f2cfc66c45..ed3c2b80e0 100644
--- a/wpf/Sparkline/How-To/Add-labels-for-track-ball.md
+++ b/wpf/Sparkline/How-To/Add-labels-for-track-ball.md
@@ -15,49 +15,42 @@ We can add labels for track ball to show the corresponding values. In order to a
 
 {% highlight xaml %}
 
-<Page.DataContext>
-
-	<local:UsersViewModel/>
-
-</Page.DataContext>
-
-<Syncfusion:SfLineSparkline ShowTrackBall="True" OnSparklineMouseMove="SfLineSparkline_OnSparklineMouseMove" x:Name="sparkline" ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
-
+<Window.DataContext>
+    <local:UsersViewModel/>
+</Window.DataContext>
+
+<Syncfusion:SfLineSparkline 
+    ShowTrackBall="True" 
+    OnSparklineMouseMove="SfLineSparkline_OnSparklineMouseMove" 
+    x:Name="sparkline" 
+    ItemsSource="{Binding UsersList}" 
+    YBindingPath="NoOfUsers">
 </Syncfusion:SfLineSparkline>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-    ContentPresenter info;
-
-        private void SfLineSparkline_OnSparklineMouseMove(object src, SparklineMouseMoveEventArgs args)
-
-        {
-
-            if (!args.RootPanel.Children.Contains(info))
-
-            {
-
-                info=new ContentPresenter();
-
-                args.RootPanel.Children.Add(info);
-
-                TextBlock.SetForeground(info, new SolidColorBrush(Colors.Red)); 
-                
-                TextBlock.SetFontSize(info, 25); 
-            }
-
-            info.Content = args.Value.Y;
-
-            info.Arrange(new Rect(args.Coordinate.X,args.Coordinate.Y,info.ActualWidth,info.ActualHeight));
-
-        }
+ContentPresenter info;
+private void SfLineSparkline_OnSparklineMouseMove(object src, SparklineMouseMoveEventArgs args)
+{
+    if(!args.RootPanel.Children.Contains(info))
+    {
+        info = new ContentPresenter();
+        args.RootPanel.Children.Add(info);
+        TextBlock.SetForeground(info, new SolidColorBrush(Colors.Red));
+        TextBlock.SetFontSize(info, 25);
+    }
+
+    info.Content = args.Value.Y;
+
+    info.Arrange(new Rect(args.Coordinate.X, args.Coordinate.Y, info.ActualWidth, info.ActualHeight));
+}
 		
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for track ball labels,
+The following is a snapshot of the track ball labels.
 
 ![custom label in Sparkline track ball](Add-labels-for-track-ball_images/Add-labels-for-track-ball_img1.png)
\ No newline at end of file
diff --git a/wpf/Sparkline/How-To/Add-labels-for-track-ball_images/Add-labels-for-track-ball_img1.png b/wpf/Sparkline/How-To/Add-labels-for-track-ball_images/Add-labels-for-track-ball_img1.png
index 9ad5c136fd..f2534a5f39 100644
Binary files a/wpf/Sparkline/How-To/Add-labels-for-track-ball_images/Add-labels-for-track-ball_img1.png and b/wpf/Sparkline/How-To/Add-labels-for-track-ball_images/Add-labels-for-track-ball_img1.png differ
diff --git a/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point.md b/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point.md
index 30aa6e41f2..e7f54fab14 100644
--- a/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point.md
+++ b/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point.md
@@ -15,13 +15,15 @@ We can customize the marker for specific data point with custom template for Lin
 
 {% highlight xaml %}
 
-<Syncfusion:SfLineSparkline x:Name="sparkline" MarkerVisibility="Visible" ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
+<Syncfusion:SfLineSparkline
+    x:Name="sparkline"
+    MarkerVisibility="Visible"
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
 
-	<Syncfusion:SfLineSparkline.MarkerTemplateSelector>
-
-		<local:CustomMarkersTemplateSelector MarkerHeight="10" MarkerWidth="10"/>
-
-	</Syncfusion:SfLineSparkline.MarkerTemplateSelector>
+    <Syncfusion:SfLineSparkline.MarkerTemplateSelector>
+        <local:CustomMarkersTemplateSelector MarkerHeight="10" MarkerWidth="10"/>
+    </Syncfusion:SfLineSparkline.MarkerTemplateSelector>
 
 </Syncfusion:SfLineSparkline>
 		
@@ -30,30 +32,20 @@ We can customize the marker for specific data point with custom template for Lin
 
 {% highlight c# %}
 
- public class CustomMarkersTemplateSelector : MarkerTemplateSelector
-
+public class CustomMarkersTemplateSelector : MarkerTemplateSelector
 {
-
-	protected override DataTemplate SelectTemplate(double x, double y)
-
-	{
-
-		if (y == MaximumY)    
-
-	{
-
-			DataTemplate markerTemplate = Application.Current.Resources["markerTemplate"] as DataTemplate;
-
-			return markerTemplate;
-
-		}
-
-		else
-
-			return base.SelectTemplate(x, y);
-
-	}
-
+    protected override DataTemplate SelectTemplate(double x, double y)
+    {
+        if (y == MaximumY)
+        {
+            DataTemplate markerTemplate = Application.Current.Resources["markerTemplate"] as DataTemplate;
+            return markerTemplate;
+        }
+        else
+        {
+            return base.SelectTemplate(x, y);
+        }
+    }
 }
 
 {% endhighlight %}
@@ -62,6 +54,6 @@ We can customize the marker for specific data point with custom template for Lin
 
 
 
-Following is the snapshot for custom marker position,
+The following is a snapshot of the custom marker position.
 
 ![Customize-the-marker-for-specific-data-point_img1](Customize-the-marker-for-specific-data-point_images/Customize-the-marker-for-specific-data-point_img1.png)
diff --git a/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point_images/Customize-the-marker-for-specific-data-point_img1.png b/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point_images/Customize-the-marker-for-specific-data-point_img1.png
index 50df405a75..9192507520 100644
Binary files a/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point_images/Customize-the-marker-for-specific-data-point_img1.png and b/wpf/Sparkline/How-To/Customize-the-marker-for-specific-data-point_images/Customize-the-marker-for-specific-data-point_img1.png differ
diff --git a/wpf/Sparkline/Marker-Customization.md b/wpf/Sparkline/Marker-Customization.md
index 3ca786029e..17c45669bf 100644
--- a/wpf/Sparkline/Marker-Customization.md
+++ b/wpf/Sparkline/Marker-Customization.md
@@ -15,23 +15,21 @@ We can customize the markers by initializing the marker template selector class,
 
 {% highlight xaml %}
 
-<Syncfusion:SfLineSparkline 
-
-		    ItemsSource="{Binding UsersList}" 
-
-			MarkerVisibility="Visible" Padding="20"
-
-		    YBindingPath="NoOfUsers">
-
-<Syncfusion:SfLineSparkline.MarkerTemplateSelector>
-
-	<Syncfusion:MarkerTemplateSelector FirstPointBrush="Yellow" LastPointBrush="Yellow" 
-    
-                                       HighPointBrush="Red" MarkerHeight="15" MarkerWidth="15"/>
-
-	</Syncfusion:SfLineSparkline.MarkerTemplateSelector>
-
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+    ItemsSource="{Binding UsersList}"
+    MarkerVisibility="Visible"
+    Padding="20"
+    YBindingPath="NoOfUsers">
+
+    <Syncfusion:SfLineSparkline.MarkerTemplateSelector>
+        <Syncfusion:MarkerTemplateSelector
+            FirstPointBrush="Yellow"
+            LastPointBrush="Yellow"
+            HighPointBrush="Red"
+            MarkerHeight="15"
+            MarkerWidth="15"/>
+    </Syncfusion:SfLineSparkline.MarkerTemplateSelector>
+</Syncfusion:SfLineSparkline>
   
 {% endhighlight  %}
 
@@ -39,30 +37,19 @@ We can customize the markers by initializing the marker template selector class,
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
-	ItemsSource = new SparkViewModel().Data,
-
-	YBindingPath = "Day",
-
-	MarkerVisibility = Visibility.Visible,
-
-	Padding = new Thickness(20)
-
+    ItemsSource = new UsersViewModel().UsersList,
+    YBindingPath = "NoOfUsers",
+    MarkerVisibility = Visibility.Visible,
+    Padding = new Thickness(20)
 };
 
-SegmentTemplateSelector selector = new SegmentTemplateSelector()
+MarkerTemplateSelector selector = new MarkerTemplateSelector()
 {
-
-	FirstPointBrush = new SolidColorBrush(Colors.Yellow),
-
-	LastPointBrush = new SolidColorBrush(Colors.Yellow),
-
-	HighPointBrush = new SolidColorBrush(Colors.Red),
-
-	MarkerHeight = 15,
-
+    FirstPointBrush = new SolidColorBrush(Colors.Yellow),
+    LastPointBrush = new SolidColorBrush(Colors.Yellow),
+    HighPointBrush = new SolidColorBrush(Colors.Red),
+    MarkerHeight = 15,
     MarkerWidth = 15
-
 };
 
 sparkline.MarkerTemplateSelector = selector;
@@ -71,7 +58,7 @@ sparkline.MarkerTemplateSelector = selector;
 
 {% endtabs %}
 
-Following is the snapshot above code,
+The following is a snapshot of the above code.
 
 ![Marker-Customization_img1](Marker-Customization_images/Marker-Customization_img1.png)
 
@@ -85,49 +72,39 @@ The following code shows how to apply the template for the Marker.
 
 {% highlight xaml %}
 
-<syncfusion:SfLineSparkline Interior="#4a4a4a"  
-
-                            BorderBrush="DarkGray"
-                                        
-                            MarkerVisibility="Visible"   
-
-                            BorderThickness="1"
-                                        
-                            ItemsSource="{Binding UsersList}"  
-
-                            YBindingPath="NoOfUsers">
-
-        <syncfusion:SfLineSparkline.Resources>
-
-            <DataTemplate x:Key="markerTemplate">
-
-                 <Grid>
-
-                    <Ellipse Height="15" Width="15" 
-                                             
-                             Fill="LightGoldenrodYellow"
-                                             
-                             Stroke="Black" StrokeDashArray="1,1" 
-                                             
-                             StrokeThickness="1" />
-
-                    <Ellipse Height="12" Width="12" Fill="Blue" Stroke="Black"   
-                                             
-                             StrokeDashArray="1,1" 
-                                             
-                             StrokeThickness="1"/>
-
-                    </Grid>
-
-                </DataTemplate>
-                
-        </syncfusion:SfLineSparkline.Resources>
-
-        <syncfusion:SfLineSparkline.MarkerTemplateSelector>
-
-                <syncfusion:MarkerTemplateSelector MarkerTemplate="{StaticResource markerTemplate}"/>
-
-         </syncfusion:SfLineSparkline.MarkerTemplateSelector>
+<syncfusion:SfLineSparkline
+    Interior="#4a4a4a"
+    BorderBrush="DarkGray"
+    MarkerVisibility="Visible"
+    BorderThickness="1"
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
+
+    <syncfusion:SfLineSparkline.Resources>
+        <DataTemplate x:Key="markerTemplate">
+            <Grid>
+                <Ellipse
+                    Height="15"
+                    Width="15"
+                    Fill="LightGoldenrodYellow"
+                    Stroke="Black"
+                    StrokeDashArray="1,1"
+                    StrokeThickness="1"/>
+
+                <Ellipse
+                    Height="12"
+                    Width="12"
+                    Fill="Blue"
+                    Stroke="Black"
+                    StrokeDashArray="1,1"
+                    StrokeThickness="1"/>
+            </Grid>
+        </DataTemplate>
+    </syncfusion:SfLineSparkline.Resources>
+
+    <syncfusion:SfLineSparkline.MarkerTemplateSelector>
+        <syncfusion:MarkerTemplateSelector MarkerTemplate="{StaticResource markerTemplate}"/>
+    </syncfusion:SfLineSparkline.MarkerTemplateSelector>
 
 </syncfusion:SfLineSparkline>
 
@@ -137,26 +114,17 @@ The following code shows how to apply the template for the Marker.
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
-	ItemsSource = new SparkViewModel().Data,
-
-	YBindingPath = "Day",
-
+	ItemsSource = new SparkViewModel().UsersList,
+	YBindingPath = "NoOfUsers",
 	MarkerVisibility = Visibility.Visible,
-
 	Interior =new SolidColorBrush(Colors.Gray),
-
 	BorderBrush = new SolidColorBrush(Colors.DarkGray),
-
 	BorderThickness = new Thickness (1)
-
 };
 
 MarkerTemplateSelector selector = new MarkerTemplateSelector()
 {
-
 	MarkerTemplate = sparkline.Resources["markerTemplate"] as DataTemplate
-
 };
 
 sparkline.MarkerTemplateSelector = selector;
diff --git a/wpf/Sparkline/Marker-Customization_images/Marker-Customization_img1.png b/wpf/Sparkline/Marker-Customization_images/Marker-Customization_img1.png
index a68d1a12aa..239bc51178 100644
Binary files a/wpf/Sparkline/Marker-Customization_images/Marker-Customization_img1.png and b/wpf/Sparkline/Marker-Customization_images/Marker-Customization_img1.png differ
diff --git a/wpf/Sparkline/Markers.md b/wpf/Sparkline/Markers.md
index ebc245896f..abc68f73b4 100644
--- a/wpf/Sparkline/Markers.md
+++ b/wpf/Sparkline/Markers.md
@@ -16,14 +16,10 @@ Markers are used to indicate the value point for line and area series, and we ca
 {% highlight xaml %}
 
 <Syncfusion:SfLineSparkline 
-
-		    ItemsSource="{Binding UsersList}" 
-
-			MarkerVisibility="Visible"
-
-		    YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+	ItemsSource="{Binding UsersList}" 
+	MarkerVisibility="Visible"
+	YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
 {% endhighlight  %}
 
@@ -31,19 +27,15 @@ Markers are used to indicate the value point for line and area series, and we ca
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
 	ItemsSource = new SparkViewModel().UsersList,
-
 	YBindingPath = "NoOfUsers",
-
 	MarkerVisibility = Visibility.Visible
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for markers,
+The following is a snapshot of the markers.
 
 ![Markers_img1](Markers_images/Markers_img1.png)
diff --git a/wpf/Sparkline/Markers_images/Markers_img1.png b/wpf/Sparkline/Markers_images/Markers_img1.png
index 5f9f24b2f5..29e180e209 100644
Binary files a/wpf/Sparkline/Markers_images/Markers_img1.png and b/wpf/Sparkline/Markers_images/Markers_img1.png differ
diff --git a/wpf/Sparkline/Range-Band.md b/wpf/Sparkline/Range-Band.md
index c9a03def82..53a5e38282 100644
--- a/wpf/Sparkline/Range-Band.md
+++ b/wpf/Sparkline/Range-Band.md
@@ -9,23 +9,19 @@ documentation: ug
 
 # Range Band in WPF Sparkline (SfSparkline)
 
-Range band feature used to highlight the particular mentioned range along Y axis.
+The Range band feature is used to highlight the particular mentioned range along Y axis.
 
 {% tabs %}
 
 {% highlight xaml %}
 
-<Syncfusion:SfLineSparkline 
-
-			ItemsSource="{Binding UsersList}" 
-
-			BandRangeStart="2000”
-
-			BandRangeEnd="-1000” RangeBandBrush="Green”
-
-			YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+ <Syncfusion:SfLineSparkline
+     ItemsSource="{Binding UsersList}"
+     BandRangeStart="2000"
+     BandRangeEnd="-1000"
+     RangeBandBrush="Green"
+     YBindingPath="NoOfUsers">
+ </Syncfusion:SfLineSparkline>
 
 {% endhighlight %}
 
@@ -33,23 +29,17 @@ Range band feature used to highlight the particular mentioned range along Y axis
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
-	ItemsSource = new SparkViewModel().UsersList,
-
-	YBindingPath = "NoOfUsers",
-
-	BandRangeStart = 2000,
-
-	BandRangeEnd = -1000,
-
-	RangeBandBrush = new SolidColorBrush(Colors.Green)
-
+    ItemsSource = new SparkViewModel().UsersList,
+    YBindingPath = "NoOfUsers",
+    BandRangeStart = 2000,
+    BandRangeEnd = -1000,
+    RangeBandBrush = new SolidColorBrush(Colors.Green)
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for range band,
+The following is the snapshot for range band.
 
 ![Range-Band_img1](Range-Band_images/Range-Band_img1.png)
diff --git a/wpf/Sparkline/ShowHide-Axis.md b/wpf/Sparkline/ShowHide-Axis.md
index 6457ed2cd2..5a9fbb9de5 100644
--- a/wpf/Sparkline/ShowHide-Axis.md
+++ b/wpf/Sparkline/ShowHide-Axis.md
@@ -15,8 +15,10 @@ Following code used to enable the axis and this feature applicable for all the s
 
 {% highlight xaml %}
 
-<Syncfusion:SfLineSparkline ShowAxis="True" ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
-
+<Syncfusion:SfLineSparkline 
+    ShowAxis="True" 
+    ItemsSource="{Binding UsersList}" 
+    YBindingPath="NoOfUsers">
 </Syncfusion:SfLineSparkline>
 
 {% endhighlight %}
@@ -25,20 +27,16 @@ Following code used to enable the axis and this feature applicable for all the s
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers",
-
     ShowAxis = true
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for axis visibility,
+The following is a snapshot of the axis visibility.
 
 ![ShowHide-Axis_img1](ShowHide-Axis_images/ShowHide-Axis_img1.png)
 
@@ -46,41 +44,33 @@ Following is the snapshot for axis visibility,
 
 {% tabs %}
 
-{%highlight xaml%}
-
-<Syncfusion:SfLineSparkline Height="250" Width="350" Interior="#4a4a4a"  
-
-BorderBrush="DarkGray" BorderThickness="1"
-
-ShowAxis="True" 
-
-AxisOrigin="2" ItemsSource="{Binding UsersList}" 
-
-YBindingPath="NoOfUsers">
+{% highlight xaml %}
 
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+    Height="250"
+    Width="350"
+    Interior="#4a4a4a"
+    BorderBrush="DarkGray"
+    BorderThickness="1"
+    ShowAxis="True"
+    AxisOrigin="2"
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
-{%endhighlight%}
+{% endhighlight %}
 
 {% highlight c# %}
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers",
-
     ShowAxis = true,
-
     AxisOrigin = 2,
-
     Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
-
     BorderBrush = new SolidColorBrush(Colors.DarkGray),
-
     BorderThickness = new Thickness(1)
-
 };
 
 {% endhighlight %}
@@ -94,61 +84,47 @@ SfLineSparkline sparkline = new SfLineSparkline()
 
 {% tabs %}
 
-{%highlight xaml%}
+{% highlight xaml %}
 
 <Grid.Resources>
-
     <Style TargetType="Line" x:Key="lineStyle2">
-
-        <Setter Property="Stroke" Value="Blue"/>
-
+        <Setter Property="Stroke" Value="Blue"></Setter>
         <Setter Property="StrokeThickness" Value="2"></Setter>
-
         <Setter Property="StrokeDashArray" Value="1,1"></Setter>
-
     </Style>
-
 </Grid.Resources>
 
-<Syncfusion:SfLineSparkline Height="250" Width="350" Interior="#4a4a4a"   
-
-BorderBrush="DarkGray"  BorderThickness="1"
-
-ShowAxis="True" AxisStyle="{StaticResource lineStyle2}"   
-
-AxisOrigin="1" ItemsSource="{Binding UsersList}"   
-
-YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+        Height="250"
+        Width="350"
+        Interior="#4a4a4a"
+        BorderBrush="DarkGray"
+        BorderThickness="1"
+        ShowAxis="True"
+        AxisStyle="{StaticResource lineStyle2}"
+        AxisOrigin="1"
+        ItemsSource="{Binding UsersList}"
+        YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
-{%endhighlight%}
+{% endhighlight %}
 
 {% highlight c# %}
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers",
-
     ShowAxis = true,
-
     AxisOrigin = 1,
-
-    AxisStyle = grid.Resources["lineStyle2"] as Style,
-
+    AxisStyle = this.Resources["lineStyle2"] as Style,
     Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
-
     BorderBrush = new SolidColorBrush(Colors.DarkGray),
-
     BorderThickness = new Thickness(1)
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![Customizing Axis line](ShowHide-Axis_images/ShowHideAxis_img3.jpeg)
+![Customizing Axis line](ShowHide-Axis_images/ShowHideAxis_img3.jpeg)
\ No newline at end of file
diff --git a/wpf/Sparkline/ShowHide-Axis_images/ShowHide-Axis_img1.png b/wpf/Sparkline/ShowHide-Axis_images/ShowHide-Axis_img1.png
index ac0b5ba9bc..aa099a602a 100644
Binary files a/wpf/Sparkline/ShowHide-Axis_images/ShowHide-Axis_img1.png and b/wpf/Sparkline/ShowHide-Axis_images/ShowHide-Axis_img1.png differ
diff --git a/wpf/Sparkline/Sparkline-Types.md b/wpf/Sparkline/Sparkline-Types.md
index 694ef7cdde..8e70918aeb 100644
--- a/wpf/Sparkline/Sparkline-Types.md
+++ b/wpf/Sparkline/Sparkline-Types.md
@@ -11,21 +11,20 @@ documentation: ug
 
 ## Line Sparkline
 
-Line sparkline rendered using polyline and the following code is used to create line sparkline,
+Line sparkline rendered using polyline and the following code is used to create line sparkline.
 
 {% tabs %}
 
 {% highlight xaml %}
 
 <Grid.DataContext>
-
-	<local:UsersViewModel/>
-
+    <local:UsersViewModel/>
 </Grid.DataContext>
 
-<Syncfusion:SfLineSparkline ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+    ItemsSource="{Binding UsersList}"
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
 {% endhighlight  %}
 
@@ -33,11 +32,8 @@ Line sparkline rendered using polyline and the following code is used to create
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
 	ItemsSource = new SparkViewModel().UsersList,
-
 	YBindingPath = "NoOfUsers"
-
 };
 
 {% endhighlight %}
@@ -51,14 +47,15 @@ The following illustrates the result of the above code sample,
 
 ## Column Sparkline
 
-Column sparkline used to visualize the raw data as a rectangle and following code is used to create column sparkline,
+Column sparkline used to visualize the raw data as a rectangle and following code is used to create column sparkline.
 
 {% tabs %}
 
 {% highlight xaml %}
 
-<Syncfusion:SfColumnSparkline ItemsSource="{Binding UsersList}" YBindingPath="NoOfUsers" >
-
+<Syncfusion:SfColumnSparkline 
+    ItemsSource="{Binding UsersList}" 
+    YBindingPath="NoOfUsers">
 </Syncfusion:SfColumnSparkline>
 
 {% endhighlight  %}
@@ -67,11 +64,8 @@ Column sparkline used to visualize the raw data as a rectangle and following cod
 
 SfColumnSparkline sparkline = new SfColumnSparkline()
 {
-
 	ItemsSource = new SparkViewModel().UsersList,
-
 	YBindingPath = "NoOfUsers"
-
 };
 
 {% endhighlight %}
@@ -84,15 +78,16 @@ Following is the snapshot for Column Sparkline,
 
 ## Area sparkline
 
-Following code is used to create area sparkline and all the line sparkline features are applicable for area sparkline,
+The following code is used to create area sparkline and all the line sparkline features are applicable for area sparkline.
 
 {% tabs %}
 
 {% highlight xaml %}
 
-<Syncfusion:SfAreaSparkline ItemsSource="{Binding UsersList}"  YBindingPath="NoOfUsers">
-
-</Syncfusion:SfAreaSparkline >
+<Syncfusion:SfAreaSparkline 
+    ItemsSource="{Binding UsersList}" 
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfAreaSparkline>
 
 {% endhighlight  %}
 
@@ -100,18 +95,15 @@ Following code is used to create area sparkline and all the line sparkline featu
 
 SfAreaSparkline sparkline = new SfAreaSparkline()
 {
-
 	ItemsSource = new SparkViewModel().UsersList,
-
 	YBindingPath = "NoOfUsers"
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for area sparkline,
+The following is a snapshot of the area sparkline.
 
 ![Sparkline-Types_img3](Sparkline-Types_images/Sparkline-Types_img3.png)
 
@@ -124,13 +116,13 @@ WinLoss sparkline render as a column segment and it show the positive, negative
 {% highlight xaml %}
 
 <Page.DataContext>
-
 	<local:MatchDetailsViewModel/>
-
 </Page.DataContext>
 
-<Syncfusion:SfWinLossSparkline x:Name="sparkline" ItemsSource="{Binding Match}" YBindingPath="Result" >
-
+<Syncfusion:SfWinLossSparkline 
+	x:Name="sparkline" 
+	ItemsSource="{Binding Match}" 
+	YBindingPath="Result">
 </Syncfusion:SfWinLossSparkline>
 
 {% endhighlight %}
@@ -139,49 +131,31 @@ WinLoss sparkline render as a column segment and it show the positive, negative
 
 SfWinLossSparkline sparkline = new SfWinLossSparkline()
 {
-
-	ItemsSource = new SparkViewModel().Match,
-
-	YBindingPath = "Result"
-
+    ItemsSource = new MatchDetailsViewModel().Match,
+    YBindingPath = "Result"
 };
 
 public class MatchDetailsModel
-
 {
-
-	public double Result { get; set; }
-
-	public string Status { get; set; }
-
+    public double Result { get; set; }
+    public string Status { get; set; }
 }
 
 public class MatchDetailsViewModel
-
 {
-
-	public MatchDetailsViewModel()
-
-	{
-
-		this.Match = new ObservableCollection<MatchDetailsModel>();
-
-		this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
-
-		this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
-
-		this.Match.Add(new MatchDetailsModel() { Result = 0, Status = "Draw" });
-
-		this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
-
-		this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
-
-		this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
-
-	}
-
-	public ObservableCollection<MatchDetailsModel> Match { get; set; }
-
+    public ObservableCollection<MatchDetailsModel> Match { get; set; }
+
+    public MatchDetailsViewModel()
+    {
+        this.Match = new ObservableCollection<MatchDetailsModel>();
+
+        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
+        this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
+        this.Match.Add(new MatchDetailsModel() { Result = 0, Status = "Draw" });
+        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
+        this.Match.Add(new MatchDetailsModel() { Result = 1, Status = "Win" });
+        this.Match.Add(new MatchDetailsModel() { Result = -1, Status = "Loss" });
+    }
 }
 
 {% endhighlight  %}
diff --git a/wpf/Sparkline/Sparkline-Types_images/Sparkline-Types_img1.png b/wpf/Sparkline/Sparkline-Types_images/Sparkline-Types_img1.png
index 96505717ac..8f054eeebc 100644
Binary files a/wpf/Sparkline/Sparkline-Types_images/Sparkline-Types_img1.png and b/wpf/Sparkline/Sparkline-Types_images/Sparkline-Types_img1.png differ
diff --git a/wpf/Sparkline/Track-ball.md b/wpf/Sparkline/Track-ball.md
index d24723f455..6c4a4a46bf 100644
--- a/wpf/Sparkline/Track-ball.md
+++ b/wpf/Sparkline/Track-ball.md
@@ -9,21 +9,17 @@ documentation: ug
 
 # Track ball in WPF Sparkline (SfSparkline)
 
-This is used to indicate the value point on mouse move and this feature is applicable for line and area sparkline.
+The Trackball is used to indicate the value point on mouse move and this feature is applicable for line and area sparkline.
 
 {% tabs %}
 
 {% highlight xaml %}
 
 <Syncfusion:SfLineSparkline 
-
-                ItemsSource="{Binding UsersList}" 
-
-                ShowTrackBall="True”
-
-                YBindingPath="NoOfUsers">
-
-  </Syncfusion:SfLineSparkline >
+    ItemsSource="{Binding UsersList}" 
+    ShowTrackBall="True"
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
   
 {% endhighlight %}
 
@@ -31,20 +27,16 @@ This is used to indicate the value point on mouse move and this feature is appli
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
     ItemsSource = new SparkViewModel().UsersList,
-
     YBindingPath = "NoOfUsers",
-
     ShowTrackBall = true
-
 };
 
 {% endhighlight %}
 
 {% endtabs %}
 
-Following is the snapshot for track ball,
+The Following is a snapshot of the Track ball.
 
 ![Track-ball_img1](Track-ball_images/Track-ball_img1.png)
 
@@ -59,42 +51,31 @@ The following code shows how to apply the style for the Trackball line.
 {% highlight xaml %}
 
 <Grid.Resources>
-
     <Style TargetType="Ellipse" x:Key="lineStyle1">
-
         <Setter Property="Fill" Value="Blue"></Setter>
-
         <Setter Property="Height" Value="12"></Setter>
-
         <Setter Property="Width" Value="12"></Setter>
-
     </Style>
 
     <Style TargetType="Line" x:Key="lineStyle2">
-
-        <Setter Property="Stroke" Value="Blue"/>
-
+        <Setter Property="Stroke" Value="Blue" />
         <Setter Property="StrokeThickness" Value="2"></Setter>
-
         <Setter Property="StrokeDashArray" Value="1,2"></Setter>
-
     </Style>
-
 </Grid.Resources>
 
-<Syncfusion:SfLineSparkline Height="250" Width="350" Interior="#4a4a4a"   
-
-BorderBrush="DarkGray" BorderThickness="1"
-
-ItemsSource="{Binding UsersList}" ShowTrackBall="True" 
-
-TrackBallStyle="{StaticResource lineStyle1}" 
-
-LineStyle="{StaticResource lineStyle2}"
-
-YBindingPath="NoOfUsers">
-
-</Syncfusion:SfLineSparkline >
+<Syncfusion:SfLineSparkline
+    Height="250"
+    Width="350"
+    Interior="#4a4a4a"
+    BorderBrush="DarkGray"
+    BorderThickness="1"
+    ItemsSource="{Binding UsersList}"
+    ShowTrackBall="True"
+    TrackBallStyle="{StaticResource lineStyle1}"
+    LineStyle="{StaticResource lineStyle2}"
+    YBindingPath="NoOfUsers">
+</Syncfusion:SfLineSparkline>
 
 {%endhighlight%}
 
@@ -102,23 +83,14 @@ YBindingPath="NoOfUsers">
 
 SfLineSparkline sparkline = new SfLineSparkline()
 {
-
     ItemsSource = new SparkViewModel().Data,
-
     YBindingPath = "Day",
-
     ShowTrackBall = true,
-
     Interior = new SolidColorBrush(Colors.Gray),
-
     BorderBrush = new SolidColorBrush(Colors.DarkGray),
-
     BorderThickness = new Thickness(1),
-
-    LineStyle = this.Resources["lineStyle1"] as Style,
-
-    TrackBallStyle = this.Resources["lineStyle2"] as Style
-
+    TrackBallStyle = this.Resources["lineStyle1"] as Style
+    LineStyle = this.Resources["lineStyle2"] as Style,
 };
 
 {% endhighlight %}
diff --git a/wpf/Sparkline/Track-ball_images/Track-ball_img1.png b/wpf/Sparkline/Track-ball_images/Track-ball_img1.png
index bb3e544d5b..fce489b10f 100644
Binary files a/wpf/Sparkline/Track-ball_images/Track-ball_img1.png and b/wpf/Sparkline/Track-ball_images/Track-ball_img1.png differ
diff --git a/wpf/Split-Button/Getting-Started.md b/wpf/Split-Button/Getting-Started.md
index 5b7b58498a..16544d38b3 100644
--- a/wpf/Split-Button/Getting-Started.md
+++ b/wpf/Split-Button/Getting-Started.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Started with WPF Split Button control | Syncfusion®
+title: Getting Started with WPF Split Button control | Syncfusion
 description: Learn here about getting started with Syncfusion® Essential Studio® WPF Split Button control, its elements and more.
 platform: WPF
 control: SplitButtonAdv
diff --git a/wpf/Step-ProgressBar/Data-Binding.md b/wpf/Step-ProgressBar/Data-Binding.md
index fba26d1cfa..1798fb7101 100644
--- a/wpf/Step-ProgressBar/Data-Binding.md
+++ b/wpf/Step-ProgressBar/Data-Binding.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Data Binding in WPF Step ProgressBar control | Syncfusion<sup>&reg;</sup>;
+title: Data Binding in WPF Step ProgressBar control | Syncfusion
 description: Learn here all about Data Binding support in Syncfusion<sup>&reg;</sup>; WPF Step ProgressBar (SfStepProgressBar) control and more.
 platform: wpf
 control: Step ProgressBar
diff --git a/wpf/Step-ProgressBar/Getting-Started.md b/wpf/Step-ProgressBar/Getting-Started.md
index ca8b5379c2..0014f5d083 100644
--- a/wpf/Step-ProgressBar/Getting-Started.md
+++ b/wpf/Step-ProgressBar/Getting-Started.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Getting Started with WPF Step ProgressBar control | Syncfusion<sup>&reg;</sup>;
+title: Getting Started with WPF Step ProgressBar control | Syncfusion
 description: Learn here about getting started with Syncfusion<sup>&reg;</sup>; WPF Step ProgressBar (SfStepProgressBar) control, its elements and more.
 platform: wpf
 control: SfStepProgressBar
diff --git a/wpf/Step-ProgressBar/Layouts.md b/wpf/Step-ProgressBar/Layouts.md
index 04a3839fc2..cd284f049e 100644
--- a/wpf/Step-ProgressBar/Layouts.md
+++ b/wpf/Step-ProgressBar/Layouts.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Layouts in WPF Step ProgressBar control | Syncfusion<sup>&reg;</sup>;
+title: Layouts in WPF Step ProgressBar control | Syncfusion
 description: Learn here all about Layouts support in Syncfusion<sup>&reg;</sup>; WPF Step ProgressBar (SfStepProgressBar) control and more.
 platform: WPF
 control: Step ProgressBar
diff --git a/wpf/Step-ProgressBar/Overview.md b/wpf/Step-ProgressBar/Overview.md
index 281167f687..7e9440b6d1 100644
--- a/wpf/Step-ProgressBar/Overview.md
+++ b/wpf/Step-ProgressBar/Overview.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: About WPF Step ProgressBar control | Syncfusion<sup>&reg;</sup>;
+title: About WPF Step ProgressBar control | Syncfusion
 description: Learn here all about introduction of Syncfusion<sup>&reg;</sup>; WPF Step ProgressBar (SfStepProgressBar) control, its elements and more.
 platform: WPF
 control: SfStepProgressBar
diff --git a/wpf/Sunburst-Chart/Animation.md b/wpf/Sunburst-Chart/Animation.md
index 7f9f8dd4ea..1b1e29c02d 100644
--- a/wpf/Sunburst-Chart/Animation.md
+++ b/wpf/Sunburst-Chart/Animation.md
@@ -17,10 +17,10 @@ Sunburst chart allows you to animate the chart segments. You can enable animatio
 
 {% highlight xaml %}
 
- <sunburst:SfSunburstChart EnableAnimation="True" 
-                          AnimationDuration="5000">
-
- </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart 
+    EnableAnimation="True" 
+    AnimationDuration="5000">
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
@@ -50,10 +50,10 @@ The following example shows, how to enable the FadeIn animation.
 
 {% highlight xaml %}
 
-  <sunburst:SfSunburstChart EnableAnimation="True"                                
-                            AnimationType="FadeIn">
-                            
-  </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart 
+    EnableAnimation="True"
+    AnimationType="FadeIn">
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
@@ -76,10 +76,10 @@ The following example shows, how to enable the Rotation animation.
 
 {% highlight xaml %}
 
-  <sunburst:SfSunburstChart EnableAnimation="True"                                
-                            AnimationType="Rotation">
-
-  </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart 
+    EnableAnimation="True"
+    AnimationType="Rotation">
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
diff --git a/wpf/Sunburst-Chart/DataLabel.md b/wpf/Sunburst-Chart/DataLabel.md
index 9c81a310d9..3982b244b3 100644
--- a/wpf/Sunburst-Chart/DataLabel.md
+++ b/wpf/Sunburst-Chart/DataLabel.md
@@ -19,11 +19,9 @@ You can enable or disable the data labels by using [`ShowLabel`](https://help.sy
 
 {% highlight xaml %}
 
- <sunburst:SfSunburstChart.DataLabelInfo>
-                
-         <sunburst:SunburstDataLabelInfo ShowLabel="True" />
-                
- </sunburst:SfSunburstChart.DataLabelInfo>
+<sunburst:SfSunburstChart.DataLabelInfo>
+    <sunburst:SunburstDataLabelInfo ShowLabel="True"/>
+</sunburst:SfSunburstChart.DataLabelInfo>
 
 {% endhighlight %}
 
@@ -31,8 +29,9 @@ You can enable or disable the data labels by using [`ShowLabel`](https://help.sy
 
 SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 {
-          ShowLabel = true
+    ShowLabel = true
 };
+
 chart.DataLabelInfo = dataLabelInfo;
 
 {% endhighlight %}
@@ -61,10 +60,7 @@ The following code shows how to set Hide and Trim mode.
 {% highlight xaml %}
 
 <sunburst:SfSunburstChart.DataLabelInfo>
-                
-           <sunburst:SunburstDataLabelInfo ShowLabel="True"
-                                           LabelOverflowMode="Hide"/>
-                
+    <sunburst:SunburstDataLabelInfo ShowLabel="True" LabelOverflowMode="Hide"/>
 </sunburst:SfSunburstChart.DataLabelInfo>
 
 {% endhighlight %}
@@ -73,8 +69,8 @@ The following code shows how to set Hide and Trim mode.
 
 SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 {
-         ShowLabel = true,
-         LabelOverflowMode = LabelOverflowMode.Hide
+    ShowLabel = true,
+    LabelOverflowMode = LabelOverflowMode.Hide
 };
 
 {% endhighlight %}
@@ -90,10 +86,7 @@ SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 {% highlight xaml %}
 
 <sunburst:SfSunburstChart.DataLabelInfo>
-                
-                <sunburst:SunburstDataLabelInfo ShowLabel="True" 
-                                                LabelOverflowMode="Trim" />
-                
+    <sunburst:SunburstDataLabelInfo ShowLabel="True" LabelOverflowMode="Trim"/>
 </sunburst:SfSunburstChart.DataLabelInfo>
 
 {% endhighlight %}
@@ -102,8 +95,8 @@ SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 
 SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 {
-         ShowLabel = true,
-         LabelOverflowMode =LabelOverflowMode.Trim
+    ShowLabel = true,
+    LabelOverflowMode =LabelOverflowMode.Trim
 };
 
 chart.DataLabelInfo = dataLabelInfo;
@@ -125,10 +118,7 @@ The following code shows how to set [`LabelRotationMode`](https://help.syncfusio
 {% highlight xaml %}
 
 <sunburst:SfSunburstChart.DataLabelInfo>
-                
-               <sunburst:SunburstDataLabelInfo ShowLabel="True" 
-                                               LabelRotationMode="Normal"/>
-                
+    <sunburst:SunburstDataLabelInfo ShowLabel="True" LabelRotationMode="Normal"/>
 </sunburst:SfSunburstChart.DataLabelInfo>
 
 {% endhighlight %}
@@ -137,9 +127,10 @@ The following code shows how to set [`LabelRotationMode`](https://help.syncfusio
 
 SunburstDataLabelInfo dataLabelInfo = new SunburstDataLabelInfo()
 {
-                ShowLabel = true,
-                LabelRotationMode = LabelRotationMode.Normal
+    ShowLabel = true,
+    LabelRotationMode = LabelRotationMode.Normal
 };
+
 chart.DataLabelInfo = dataLabelInfo;
 
 {% endhighlight %}
@@ -162,41 +153,66 @@ Font color of the label can be customized using the [`Foreground`](https://help.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" >
-            <sunburst:SfSunburstChart.Levels>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
-            </sunburst:SfSunburstChart.Levels>
-
-            <sunburst:SfSunburstChart.DataLabelInfo>
-                <sunburst:SunburstDataLabelInfo ShowLabel="True" FontSize="12" FontFamily="Comic Sans MS"
-                                                FontStyle="Italic" FontWeight="SemiBold"
-                                                Foreground="White"/>
-            </sunburst:SfSunburstChart.DataLabelInfo>
-        </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount">
+    <sunburst:SfSunburstChart.Levels>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
+    </sunburst:SfSunburstChart.Levels>
+
+    <sunburst:SfSunburstChart.DataLabelInfo>
+        <sunburst:SunburstDataLabelInfo 
+            ShowLabel="True" 
+            FontSize="12" 
+            FontFamily="Comic Sans MS"                                                
+            FontStyle="Italic" 
+            FontWeight="SemiBold"                                               
+            Foreground="White"/>
+    </sunburst:SfSunburstChart.DataLabelInfo>
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfSunburstChart sunburst = new SfSunburstChart();
-            sunburst.ValueMemberPath = "EmployeesCount";
-            sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
-
-            SunburstDataLabelInfo info = new SunburstDataLabelInfo();
-            info.FontSize = 12;
-            info.FontStyle = FontStyles.Italic;
-            info.FontWeight = FontWeights.SemiBold;
-            info.Foreground = new SolidColorBrush(Colors.White);
-            info.FontFamily = new FontFamily("Comic Sans MS");
-            sunburst.DataLabelInfo = info;
-            grid.Children.Add(sunburst);
+SfSunburstChart sunburst = new SfSunburstChart();
+
+sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
+
+sunburst.ValueMemberPath = "EmployeesCount";
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "Country"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobDescription"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobGroup"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobRole"
+});
+
+SunburstDataLabelInfo info = new SunburstDataLabelInfo();
+
+info.FontSize = 12;
+info.FontStyle = FontStyles.Italic;
+info.FontWeight = FontWeights.SemiBold;
+info.Foreground = new SolidColorBrush(Colors.White);
+info.FontFamily = new FontFamily("Comic Sans MS");
+
+sunburst.DataLabelInfo = info;
+
+grid.Children.Add(sunburst);
 
 {% endhighlight %}
 
@@ -210,16 +226,16 @@ You can customize the default appearance or display information about the data p
 
 {% highlight xaml %}
 
-   <sunburst:SunburstDataLabelInfo.LabelTemplate>
-
-         <DataTemplate>
-               <Border Background="LightGray" CornerRadius="4" >
-                      <TextBlock Text="{Binding Category}" Margin="2,0,2,0"
-                                 FontWeight="Bold"/>
-                </Border>
-        </DataTemplate>
-
-   </sunburst:SunburstDataLabelInfo.LabelTemplate>
+<sunburst:SunburstDataLabelInfo.LabelTemplate>
+    <DataTemplate>
+        <Border Background="LightGray" CornerRadius="4">
+            <TextBlock 
+                Text="{Binding Category}" 
+                Margin="2,0,2,0"                                 
+                FontWeight="Bold"/>
+        </Border>
+    </DataTemplate>
+</sunburst:SunburstDataLabelInfo.LabelTemplate>
 
 
 {% endhighlight %}
diff --git a/wpf/Sunburst-Chart/Events.md b/wpf/Sunburst-Chart/Events.md
index 4ff951e887..64d6bc5494 100644
--- a/wpf/Sunburst-Chart/Events.md
+++ b/wpf/Sunburst-Chart/Events.md
@@ -21,44 +21,47 @@ The following example shows how to set the color for each level after creating t
 
 {% highlight xaml %}
 
-
-     <sunburst:SfSunburstChart ItemsSource="{Binding Data}"               ValueMemberPath="EmployeesCount" 
-                SegmentCreated="chart_SegmentCreated">
-          
-            <sunburst:SfSunburstChart.Levels>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
-            </sunburst:SfSunburstChart.Levels>
-           
-        </sunburst:SfSunburstChart>
-
+<sunburst:SfSunburstChart 
+    ItemsSource="{Binding Data}"               
+    ValueMemberPath="EmployeesCount" 
+    SegmentCreated="chart_SegmentCreated">
+    <sunburst:SfSunburstChart.Levels>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
+    </sunburst:SfSunburstChart.Levels>
+</sunburst:SfSunburstChart>
      
 {% endhighlight %}
 
 {% highlight c# %}
 
 private void chart_SegmentCreated(object sender, SunburstSegmentCreatedEventArgs e)
-
 {
-
-                byte r = 180, g = 0, b = 96;
-                byte r1 = 255, g1 = 153, b1 = 0;
-                byte r2 = 102, g2 = 153, b2 = 0;
-                byte r3 = 102, g3 = 204, b3 = 255;
-                 if (e.Segment.CurrentLevel == 0)
-                    e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r3,g3,b3));
-
-                else if (e.Segment.CurrentLevel == 1)
-                    e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r1, g1, b1));
-
-                else if (e.Segment.CurrentLevel == 2)
-                    e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r, g, b));
-
-                else if (e.Segment.CurrentLevel == 3)
-                    e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r2, g2, b2));
-
+    byte r = 180, g = 0, b = 96;
+    byte r1 = 255, g1 = 153, b1 = 0;
+    byte r2 = 102, g2 = 153, b2 = 0;
+    byte r3 = 102, g3 = 204, b3 = 255;
+
+    if (e.Segment.CurrentLevel == 0)
+    {
+        e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r3, g3, b3));
+    }
+    else if (e.Segment.CurrentLevel == 1)
+    {
+        e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r1, g1, b1));
+    }
+
+    else if (e.Segment.CurrentLevel == 2)
+    {
+        e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r, g, b));
+    }
+
+    else if (e.Segment.CurrentLevel == 3)
+    {
+        e.Segment.Interior = new SolidColorBrush(Color.FromRgb(r2, g2, b2));
+    }
 }
 
 {% endhighlight %}
@@ -78,50 +81,51 @@ The following examples shows how to set the selected segment information.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" 
-                                  SelectionChanged="chart_SelectionChanged">
-
-          <sunburst:SfSunburstChart.Behaviors>
-
-        <sunburst:SunburstSelectionBehavior EnableSelection="True" 
-                                            SelectionCursor="Hand"/>               
-          </sunburst:SfSunburstChart.Behaviors>
-
-     </sunburst:SfSunburstChart>
-
-<Popup x:Name="popup" Placement="MousePoint" Height="180" Width="180" >
-
-            <Border Background="White" BorderBrush="Black" BorderThickness="3" >
-
-                <Grid Margin="20,5,5,5">
-
-                    <Grid.RowDefinitions>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition/>
-                    </Grid.ColumnDefinitions>
-
-                    <TextBlock Text="Category : " FontWeight="Bold" Grid.Row="0" Grid.Column="0"/>
-                    <TextBlock x:Name="category"   FontWeight="Bold" Grid.Row="0" Grid.Column="1"/>
-                    <TextBlock Text="Value : " FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
-                    <TextBlock  x:Name="value" FontWeight="Bold" Grid.Row="1" Grid.Column="1"/>
-                    <TextBlock Text="Level : " FontWeight="Bold" Grid.Row="2" Grid.Column="0"/>
-                    <TextBlock x:Name="level" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
-                    <TextBlock Text="SliceIndex : " FontWeight="Bold" Grid.Row="3" Grid.Column="0"/>
-                    <TextBlock x:Name="sliceIndex" FontWeight="Bold" Grid.Row="3" Grid.Column="1"/>
-
-                </Grid>
-                
-            </Border>
-            
-        </Popup>
-
+<sunburst:SfSunburstChart
+    ItemsSource="{Binding Data}"
+    ValueMemberPath="EmployeesCount"
+    SelectionChanged="chart_SelectionChanged">
+
+    <sunburst:SfSunburstChart.Behaviors>
+        <sunburst:SunburstSelectionBehavior
+            EnableSelection="True"
+            SelectionCursor="Hand"/>
+    </sunburst:SfSunburstChart.Behaviors>
+</sunburst:SfSunburstChart>
+
+<Popup
+    x:Name="popup"
+    Placement="MousePoint"
+    Height="180"
+    Width="180">
+    <Border
+        Background="White"
+        BorderBrush="Black"
+        BorderThickness="3">
+        <Grid Margin="20,5,5,5">
+            <Grid.RowDefinitions>
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+                <RowDefinition />
+            </Grid.RowDefinitions>
+
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition />
+                <ColumnDefinition />
+            </Grid.ColumnDefinitions>
+
+            <TextBlock Text="Category : " FontWeight="Bold" Grid.Row="0" Grid.Column="0"/>
+            <TextBlock x:Name="category"  FontWeight="Bold" Grid.Row="0" Grid.Column="1"/>
+            <TextBlock Text="Value : " FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
+            <TextBlock x:Name="value" FontWeight="Bold" Grid.Row="1" Grid.Column="1"/>
+            <TextBlock Text="Level : " FontWeight="Bold" Grid.Row="2" Grid.Column="0"/>
+            <TextBlock x:Name="level" FontWeight="Bold" Grid.Row="2" Grid.Column="1"/>
+            <TextBlock Text="SliceIndex : " FontWeight="Bold" Grid.Row="3" Grid.Column="0"/>
+            <TextBlock x:Name="sliceIndex" FontWeight="Bold" Grid.Row="3" Grid.Column="1"/>
+        </Grid>
+    </Border>
+</Popup>
 
 {% endhighlight %}
 
@@ -129,12 +133,11 @@ The following examples shows how to set the selected segment information.
 
 private void chart_SelectionChanged(object sender, SunburstSelectionChangedEventArgs e)
 {
-
-      popup.IsOpen = true;
-      category.Text = e.SelectedSegment.Category.ToString();
-      value.Text = e.SelectedSegment.Value.ToString();
-      level.Text = e.SelectedSegment.CurrentLevel.ToString();
-      sliceIndex.Text = e.SelectedSegment.SliceIndex.ToString();
+    popup.IsOpen = true;
+    category.Text = e.SelectedSegment.Category.ToString();
+    value.Text = e.SelectedSegment.Value.ToString();
+    level.Text = e.SelectedSegment.CurrentLevel.ToString();
+    sliceIndex.Text = e.SelectedSegment.SliceIndex.ToString();
 }
 
 {% endhighlight %}
diff --git a/wpf/Sunburst-Chart/Getting-Started.md b/wpf/Sunburst-Chart/Getting-Started.md
index f6289ee3f1..d834a3a9e5 100644
--- a/wpf/Sunburst-Chart/Getting-Started.md
+++ b/wpf/Sunburst-Chart/Getting-Started.md
@@ -300,103 +300,141 @@ Marketing
 Now, let us define a data model that represents the above data in sunburst chart.
 
 {% highlight C# %}
-    public class Model
-    {
-        public string Category { get; set; }
-        public string Country { get; set; }
-        public string JobDescription { get; set; }
-        public string JobGroup { get; set; }
-        public string JobRole { get; set; }
-        public double EmployeesCount { get; set; }
-    }
+
+public class Model
+{
+    public string Category { get; set; }
+    public string Country { get; set; }
+    public string JobDescription { get; set; }
+    public string JobGroup { get; set; }
+    public string JobRole { get; set; }
+    public double EmployeesCount { get; set; }
+}
+
 {% endhighlight %}
 
 Next, create a view model class and initialize a list of Model objects as shown below,
 
 {% highlight C# %}
-    public class ViewModel
+
+public class ViewModel
+{
+    public ObservableCollection<Model> Data { get; set; }
+
+    public ViewModel()
     {
-        public ObservableCollection<Model> Data { get; set; }
-        public ViewModel()
+        Data = new ObservableCollection<Model>
         {
-            Data = new ObservableCollection<Model>
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Sales",
+                EmployeesCount = 70
+            },
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Technical",
+                JobGroup = "Testers",
+                EmployeesCount = 35
+            },
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Windows",
+                EmployeesCount = 105
+            },
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Web",
+                EmployeesCount = 40
+            },
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Management",
+                EmployeesCount = 40
+            },
+            new Model
+            {
+                Country = "America",
+                JobDescription = "Accounts",
+                EmployeesCount = 60
+            },
+            new Model
+            {
+                Country = "India",
+                JobDescription = "Technical",
+                JobGroup = "Testers",
+                EmployeesCount = 25
+            },
+            new Model
+            {
+                Country = "India",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Windows",
+                EmployeesCount = 155
+            },
+            new Model
+            {
+                Country = "India",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Web",
+                EmployeesCount = 60
+            },
+            new Model
             {
-                new Model
-                {
-                    Country = "America", JobDescription = "Sales",
-                    EmployeesCount = 70
-                },
-                new Model
-                {
-                    Country = "America", JobDescription = "Technical",
-                    JobGroup = "Testers", EmployeesCount = 35
-                },
-                new Model
-                {
-                    Country = "America", JobDescription = "Technical",
-                    JobGroup = "Developers", JobRole = "Windows", EmployeesCount = 105
-                },
-                new Model
-                {
-                    Country = "America", JobDescription = "Technical",
-                    JobGroup = "Developers", JobRole = "Web", EmployeesCount = 40
-                },
-                new Model
-                {
-                    Country = "America", JobDescription = "Management",
-                    EmployeesCount = 40
-                },
-                new Model
-                {
-                    Country = "America", JobDescription = "Accounts",
-                    EmployeesCount = 60
-                },
-                new Model
-                {
-                    Country = "India", JobDescription = "Technical",
-                    JobGroup = "Testers", EmployeesCount = 25
-                },
-                new Model
-                {
-                    Country = "India", JobDescription = "Technical", JobGroup = "Developers",
-                    JobRole = "Windows", EmployeesCount = 155
-                },
-                new Model
-                {
-                    Country = "India", JobDescription = "Technical", JobGroup = "Developers",
-                    JobRole = "Web", EmployeesCount = 60
-                },
-                new Model
-                {
-                    Country = "Germany", JobDescription = "Sales", JobGroup = "Executive",
-                    EmployeesCount = 30
-                },
-                new Model
-                {
-                    Country = "Germany", JobDescription = "Sales", JobGroup = "Analyst",
-                    EmployeesCount = 40
-                },
-                new Model
-                {
-                    Country = "UK", JobDescription = "Technical", JobGroup = "Developers",
-                    JobRole = "Windows", EmployeesCount = 100
-                },
-                new Model
-                {
-                    Country = "UK", JobDescription = "Technical", JobGroup = "Developers",
-                    JobRole = "Web", EmployeesCount = 30
-                },
-                new Model
-                {
-                    Country = "UK", JobDescription = "HR Executives", EmployeesCount = 60
-                },
-                new Model
-                {
-                    Country = "UK", JobDescription = "Marketing", EmployeesCount = 40
-                }
-            };
-        }
+                Country = "Germany",
+                JobDescription = "Sales",
+                JobGroup = "Executive",
+                EmployeesCount = 30
+            },
+            new Model
+            {
+                Country = "Germany",
+                JobDescription = "Sales",
+                JobGroup = "Analyst",
+                EmployeesCount = 40
+            },
+            new Model
+            {
+                Country = "UK",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Windows",
+                EmployeesCount = 100
+            },
+            new Model
+            {
+                Country = "UK",
+                JobDescription = "Technical",
+                JobGroup = "Developers",
+                JobRole = "Web",
+                EmployeesCount = 30
+            },
+            new Model
+            {
+                Country = "UK",
+                JobDescription = "HR Executives",
+                EmployeesCount = 60
+            },
+            new Model
+            {
+                Country = "UK",
+                JobDescription = "Marketing",
+                EmployeesCount = 40
+            }
+        };
     }
+}
+
 {% endhighlight %}
 
 Set the ViewModel instance as the DataContext of your window; this is done to bind properties of ViewModel to Sunburst chart.
@@ -406,17 +444,21 @@ N> Add namespace of ViewModel class in your XAML page if you prefer to set DataC
 {% tabs %}
 
 {% highlight xaml %}
-    <Window x:Class="GettingStarted.MainWindow"
-        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:local="clr-namespace:GettingStarted">
-    <Window.DataContext>
-         <local:ViewModel/>
-    </Window.DataContext>
+
+<Window x:Class="GettingStarted.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="clr-namespace:GettingStarted">
+<Window.DataContext>
+        <local:ViewModel/>
+</Window.DataContext>
+
 {% endhighlight %}
 
 {% highlight C# %}
+
 this.DataContext = new ViewModel();
+
 {% endhighlight %}
     
 {% endtabs %}
@@ -429,6 +471,7 @@ Add `SunburstHierarchicalLevel` to [`Levels`](https://help.syncfusion.com/cr/wpf
 {% tabs %}
 
 {% highlight xaml %}
+
 <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount">
     <sunburst:SfSunburstChart.Levels>
         <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
@@ -437,9 +480,11 @@ Add `SunburstHierarchicalLevel` to [`Levels`](https://help.syncfusion.com/cr/wpf
         <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
     </sunburst:SfSunburstChart.Levels>
 </sunburst:SfSunburstChart>
+
 {% endhighlight %}
 
 {% highlight C# %}
+
 SfSunburstChart sunburst = new SfSunburstChart();
 sunburst.ValueMemberPath = "EmployeesCount";
 sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
@@ -447,6 +492,7 @@ sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "Country"
 sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobDescription"});
 sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobGroup"});
 sunburst.Levels.Add(new SunburstHierarchicalLevel() {GroupMemberPath = "JobRole"});
+
 {% endhighlight %}
     
 {% endtabs %}
@@ -458,12 +504,16 @@ You can add header to Sunburst chart to provide quick information to the user ab
 {% tabs %}
 
 {% highlight xaml %}
-<sunburst:SfSunburstChart Header="Employees Count" FontSize="22" />
+
+<sunburst:SfSunburstChart Header="Employees Count" FontSize="22"/>
+
 {% endhighlight %}
 
 {% highlight C# %}
+
 sunburst.Header = "Employees Count";
 sunburst.FontSize = 22d;
+
 {% endhighlight %}
     
 {% endtabs %}
@@ -475,14 +525,18 @@ You can enable legend using the [`Legend`](https://help.syncfusion.com/cr/wpf/Sy
 {% tabs %}
 
 {% highlight xaml %}
+
 <sunburst:SfSunburstChart.Legend>
     <sunburst:SunburstLegend DockPosition="Left"/>
 </sunburst:SfSunburstChart.Legend>
+
 {% endhighlight %}
 
 {% highlight C# %}
+
 SunburstLegend legend = new SunburstLegend();
 legend.DockPosition= ChartDock.Left;
+
 {% endhighlight %}
     
 {% endtabs %}
@@ -494,14 +548,18 @@ You can add data labels to improve the readability of the Sunburst chart. This c
 {% tabs %}
 
 {% highlight xaml %}
+
 <sunburst:SfSunburstChart.DataLabelInfo>
     <sunburst:SunburstDataLabelInfo />
 </sunburst:SfSunburstChart.DataLabelInfo>
+
 {% endhighlight %}
 
 {% highlight C# %}
+
 SunburstDataLabelInfo dataLabel= new SunburstDataLabelInfo();
 sunburst.DataLabelInfo = dataLabel;
+
 {% endhighlight %}
     
 {% endtabs %}
@@ -511,55 +569,84 @@ Below is the complete code to replicate the following output.
 {% tabs %}
 
 {% highlight xaml %}
- <Grid>
-        <Grid.DataContext>
-            <local:ViewModel></local:ViewModel>
-        </Grid.DataContext>
-        <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" Header="Employees Count" FontSize="22" >
-            <sunburst:SfSunburstChart.Legend>
-                <sunburst:SunburstLegend DockPosition="Left"/>
-            </sunburst:SfSunburstChart.Legend>
-            <sunburst:SfSunburstChart.Levels>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
-            </sunburst:SfSunburstChart.Levels>
-            <sunburst:SfSunburstChart.DataLabelInfo>
-                <sunburst:SunburstDataLabelInfo />
-            </sunburst:SfSunburstChart.DataLabelInfo>
-        </sunburst:SfSunburstChart>
-    </Grid>
+
+<Grid>
+    <Grid.DataContext>
+        <local:ViewModel></local:ViewModel>
+    </Grid.DataContext>
+
+    <sunburst:SfSunburstChart
+        ItemsSource="{Binding Data}"
+        ValueMemberPath="EmployeesCount"
+        Header="Employees Count"
+        FontSize="22">
+
+        <sunburst:SfSunburstChart.Legend>
+            <sunburst:SunburstLegend DockPosition="Left"/>
+        </sunburst:SfSunburstChart.Legend>
+
+        <sunburst:SfSunburstChart.Levels>
+            <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
+            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
+            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
+            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
+        </sunburst:SfSunburstChart.Levels>
+
+        <sunburst:SfSunburstChart.DataLabelInfo>
+            <sunburst:SunburstDataLabelInfo/>
+        </sunburst:SfSunburstChart.DataLabelInfo>
+    </sunburst:SfSunburstChart>
+</Grid>
+
 {% endhighlight %}
 
 {% highlight C# %}
 
-            this.DataContext = new ViewModel();
-            SfSunburstChart sunburst = new SfSunburstChart();
-            sunburst.ValueMemberPath = "EmployeesCount";
-            sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
-            sunburst.Header = "Employees Count";
-            sunburst.FontSize = 22d;
-            SunburstLegend legend = new SunburstLegend();
-            legend.DockPosition = ChartDock.Left;
-            sunburst.Legend = legend;
-            SunburstDataLabelInfo dataLabel = new SunburstDataLabelInfo();
-            sunburst.DataLabelInfo = dataLabel;
-            this.Content = sunburst;
+this.DataContext = new ViewModel();
+
+SfSunburstChart sunburst = new SfSunburstChart();
+
+sunburst.ValueMemberPath = "EmployeesCount";
+sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "Country"
+});
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobDescription"
+});
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobGroup"
+});
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobRole"
+});
+
+sunburst.Header = "Employees Count";
+sunburst.FontSize = 22d;
+
+SunburstLegend legend = new SunburstLegend();
+legend.DockPosition = ChartDock.Left;
+sunburst.Legend = legend;
+
+SunburstDataLabelInfo dataLabel = new SunburstDataLabelInfo();
+sunburst.DataLabelInfo = dataLabel;
+
+this.Content = sunburst;
 
 {% endhighlight %}
     
 {% endtabs %}
 
-Following is the final output screenshot,
+The following is a final output screenshot.
 
 ![SfSunburstChart with data label and legend](Getting-Started_images/gettingstarted5.png)
 
-You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-SunburstChart)
+You can find the complete getting started sample from this [link](https://github.com/SyncfusionExamples/GettingStarted-WPF-SunburstChart).
 
 ## Theme
 
diff --git a/wpf/Sunburst-Chart/Legend.md b/wpf/Sunburst-Chart/Legend.md
index 944b8a58d2..5687551c1e 100644
--- a/wpf/Sunburst-Chart/Legend.md
+++ b/wpf/Sunburst-Chart/Legend.md
@@ -19,11 +19,9 @@ You can initialize the legend as in the below code snippet:
 
 {% highlight xaml %}
 
-       <sunburst:SfSunburstChart.Legend>
-
-            <sunburst:SunburstLegend/>
-
-      </sunburst:SfSunburstChart.Legend>
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
@@ -54,11 +52,9 @@ You can specify different shapes of legend icon by using the [`LegendIcon`](http
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Legend>
-
-           <sunburst:SunburstLegend LegendIcon="Pentagon"/>
-
-     </sunburst:SfSunburstChart.Legend>
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend LegendIcon="Pentagon"/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
@@ -66,8 +62,9 @@ You can specify different shapes of legend icon by using the [`LegendIcon`](http
 
 SunburstLegend legend = new SunburstLegend()
 {
-       LegendIcon = SunburstLegendIcon.Pentagon
+    LegendIcon = SunburstLegendIcon.Pentagon
 };
+
 chart.Legend = legend;
 
 {% endhighlight %}
@@ -88,39 +85,61 @@ You can customize your own legend shape by applying custom template using [`Lege
 
 {% highlight xaml %}
 
-        <Grid.Resources>
-            <DataTemplate x:Key="legendTemplate">
-                <Path  Stroke="{Binding Stroke}" Stretch="Fill" Fill="{Binding Interior}"  
-                            StrokeThickness="{Binding StrokeThickness}"
-                            Data="F1 M 133.133,45.7109L 154.307,24.5363L 175.482,45.7109L 154.307,66.8856L 175.482,88.0603L 154.307,109.235L 133.133,88.0603L 111.958,109.235L 90.7835,88.0603L 111.958,66.8856L 90.7835,45.7109L 111.958,24.5363L 133.133,45.7109 Z " />
-
-            </DataTemplate>
-        </Grid.Resources>
-
-      <sunburst:SfSunburstChart.Legend>
-                <sunburst:SunburstLegend LegendIcon="Custom" 
-                                         LegendIconTemplate="{StaticResource legendTemplate}"/>
-      </sunburst:SfSunburstChart.Legend>
+<Grid.Resources>
+    <DataTemplate x:Key="legendTemplate">
+        <Path
+            Stroke="{Binding Stroke}"
+            Stretch="Fill"
+            Fill="{Binding Interior}"
+            StrokeThickness="{Binding StrokeThickness}"
+            Data="F1 M 133.133,45.7109L 154.307,24.5363L 175.482,45.7109L 154.307,66.8856L 175.482,88.0603L 154.307,109.235L 133.133,88.0603L 111.958,109.235L 90.7835,88.0603L 111.958,66.8856L 90.7835,45.7109L 111.958,24.5363L 133.133,45.7109 Z"/>
+    </DataTemplate>
+</Grid.Resources>
+
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend LegendIcon="Custom" LegendIconTemplate="{StaticResource legendTemplate}"/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfSunburstChart sunburst = new SfSunburstChart();
-            sunburst.ValueMemberPath = "EmployeesCount";
-            sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
-
-            SunburstLegend legend = new SunburstLegend()
-            {
-                LegendIcon = SunburstLegendIcon.Custom,
-                LegendIconTemplate = grid.Resources["legendTemplate"] as DataTemplate
-            };
-            sunburst.Legend = legend;           
-            grid.Children.Add(sunburst);
+this.DataContext = new ViewModel();
+
+SfSunburstChart sunburst = new SfSunburstChart();
+
+sunburst.ValueMemberPath = "EmployeesCount";
+sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "Country"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobDescription"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobGroup"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobRole"
+});
+
+SunburstLegend legend = new SunburstLegend()
+{
+    LegendIcon = SunburstLegendIcon.Custom,
+    LegendIconTemplate = this.Resources["legendTemplate"] as DataTemplate
+};
+
+sunburst.Legend = legend;
+
+grid.Children.Add(sunburst);
 
 {% endhighlight %}
 
@@ -139,11 +158,9 @@ You can customize the position to left, right, top, bottom for the legend using
 
 {% highlight xaml %}
 
-       <sunburst:SfSunburstChart.Legend>
-                
-          <sunburst:SunburstLegend DockPosition="Top" />
-                
-       </sunburst:SfSunburstChart.Legend>
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend DockPosition="Top"/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
@@ -151,8 +168,9 @@ You can customize the position to left, right, top, bottom for the legend using
 
 SunburstLegend legend = new SunburstLegend()
 {
-       DockPosition =ChartDock.Top
+    DockPosition = ChartDock.Top
 };
+
 chart.Legend = legend;
 
 {% endhighlight %}
@@ -170,31 +188,40 @@ You can arrange the legend items smartly by using ItemPanelTemplate and ItemTemp
 {% highlight xaml %}
 
     <sunburst:SfSunburstChart.Legend>
-
-         <sunburst:SunburstLegend  DockPosition="Top" Margin="0,25,0,0" >
-                    
-                  <sunburst:SunburstLegend.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <WrapPanel Height="100" Width="250" />
-                        </ItemsPanelTemplate>
-                   </sunburst:SunburstLegend.ItemsPanel>
-
-                    <sunburst:SunburstLegend.ItemTemplate>
-
-                        <ItemContainerTemplate>
-
-                            <StackPanel Width="75" Height="30" Orientation="Horizontal">
-                                <Ellipse Stroke="{Binding Interior}" StrokeThickness="2" Fill="White"
-                                     Height="10" Width="10" Margin="5"/>
-                                <TextBlock Text="{Binding Label}" HorizontalAlignment="Center"   VerticalAlignment="Center"/>
-                            </StackPanel>
-                        </ItemContainerTemplate>
-
-                  </sunburst:SunburstLegend.ItemTemplate>
-                    
-                </sunburst:SunburstLegend>
-
-            </sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend DockPosition="Top" Margin="0,25,0,0">
+        <sunburst:SunburstLegend.ItemsPanel>
+            <ItemsPanelTemplate>
+                <WrapPanel Height="100" Width="250"/>
+            </ItemsPanelTemplate>
+        </sunburst:SunburstLegend.ItemsPanel>
+
+        <sunburst:SunburstLegend.ItemTemplate>
+            <ItemContainerTemplate>
+                <StackPanel
+                    Width="75"
+                    Height="30"
+                    Orientation="Horizontal">
+
+                    <Ellipse
+                        Stroke="{Binding Interior}"
+                        StrokeThickness="2"
+                        Fill="White"
+                        Height="10"
+                        Width="10"
+                        Margin="5">
+                    </Ellipse>
+
+                    <TextBlock
+                        Text="{Binding Label}"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center">
+                    </TextBlock>
+                </StackPanel>
+            </ItemContainerTemplate>
+        </sunburst:SunburstLegend.ItemTemplate>
+        
+    </sunburst:SunburstLegend>
+</sunburst:SfSunburstChart.Legend>
 
 
 {% endhighlight %}
@@ -218,11 +245,9 @@ Used to highlight specific category while clicking on legend item.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Legend>
-                
-           <sunburst:SunburstLegend ClickAction="ToggleSegmentSelection"/>
-
-    </sunburst:SfSunburstChart.Legend>
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend ClickAction="ToggleSegmentSelection"/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
@@ -230,8 +255,9 @@ Used to highlight specific category while clicking on legend item.
 
 SunburstLegend legend = new SunburstLegend()
 {
-          ClickAction =LegendClickAction.ToggleSegmentSelection
+    ClickAction =LegendClickAction.ToggleSegmentSelection
 };
+
 chart.Legend = legend;
 
 {% endhighlight %}
@@ -249,11 +275,9 @@ Used to disable the specific category while clicking on legend item.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Legend>
-                
-              <sunburst:SunburstLegend ClickAction ="ToggleSegmentVisibility"/>
-
-     </sunburst:SfSunburstChart.Legend>
+<sunburst:SfSunburstChart.Legend>
+    <sunburst:SunburstLegend ClickAction ="ToggleSegmentVisibility"/>
+</sunburst:SfSunburstChart.Legend>
 
 {% endhighlight %}
 
@@ -261,8 +285,9 @@ Used to disable the specific category while clicking on legend item.
 
 SunburstLegend legend = new SunburstLegend()
 {
-          ClickAction = LegendClickAction.ToggleSegmentVisibility
+    ClickAction = LegendClickAction.ToggleSegmentVisibility
 };
+
 chart.Legend = legend;
 
 {% endhighlight %}
diff --git a/wpf/Sunburst-Chart/Levels.md b/wpf/Sunburst-Chart/Levels.md
index 32497db18c..25859c3172 100644
--- a/wpf/Sunburst-Chart/Levels.md
+++ b/wpf/Sunburst-Chart/Levels.md
@@ -19,17 +19,16 @@ The following code shows how to add the hierarchical level in Levels collection.
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart.Levels>
-
-           <sunburst:SunburstHierarchicalLevel/>
-           
-      </sunburst:SfSunburstChart.Levels>
+<sunburst:SfSunburstChart.Levels>
+    <sunburst:SunburstHierarchicalLevel/>
+</sunburst:SfSunburstChart.Levels>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstHierarchicalLevel level = new SunburstHierarchicalLevel();
+
 sunburstChart.Levels.Add(level);
 
 {% endhighlight %}
@@ -46,13 +45,11 @@ You can define the Levels as shown in the code sample.
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart.Levels>
-
-        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level1"/>
-        <sunburst:SunburstHierarchicalLevel GroupMemberPath=" Level2"/>
-        <sunburst:SunburstHierarchicalLevel GroupMemberPath=" Level3"/>
-
-      </sunburst:SfSunburstChart.Levels>
+<sunburst:SfSunburstChart.Levels>
+    <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level1"/>
+    <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level2"/>
+    <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level3"/>
+</sunburst:SfSunburstChart.Levels>
 
 {% endhighlight %}
 
diff --git a/wpf/Sunburst-Chart/Palettes.md b/wpf/Sunburst-Chart/Palettes.md
index 50e209dfe5..bc860d7404 100644
--- a/wpf/Sunburst-Chart/Palettes.md
+++ b/wpf/Sunburst-Chart/Palettes.md
@@ -36,32 +36,47 @@ Each palette applies a set of predefined brushes to the sunburst chart in a pred
 
 {% highlight xaml %}
 
-        <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" 
-                                 Palette="SandyBeach" >
-
-            <sunburst:SfSunburstChart.Levels>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
-            </sunburst:SfSunburstChart.Levels>
-
-        </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" Palette="SandyBeach">
+    <sunburst:SfSunburstChart.Levels>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
+    </sunburst:SfSunburstChart.Levels>
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfSunburstChart sunburst = new SfSunburstChart();
-            sunburst.ValueMemberPath = "EmployeesCount";
-            sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
+SfSunburstChart sunburst = new SfSunburstChart();
+
+sunburst.ValueMemberPath = "EmployeesCount";
+sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "Country"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobDescription"
+});
 
-            sunburst.Palette = SunburstColorPalette.SandyBeach;           
-            grid.Children.Add(sunburst);
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobGroup"
+});
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel()
+{
+    GroupMemberPath = "JobRole"
+});
+
+sunburst.Palette = SunburstColorPalette.SandyBeach;
+
+grid.Children.Add(sunburst);
 
 {% endhighlight %}
 
@@ -78,84 +93,93 @@ Sunburst chart provides option which enables you to define your own color brushe
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="EmployeesCount" 
-                               Palette="Custom"   >
-
-            <sunburst:SfSunburstChart.Levels>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
-                <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
-            </sunburst:SfSunburstChart.Levels>
-
-      <sunburst:SfSunburstChart.ColorModel>
-                <sunburst:SunburstColorModel>                    
-                    <sunburst:SunburstColorModel.CustomBrushes>
-                        
-                        <LinearGradientBrush>
-                            <GradientStop Color="DeepPink" Offset="0"/>
-                            <GradientStop Color="Gray" Offset="1"/>
-                        </LinearGradientBrush>
-                        
-                        <LinearGradientBrush>
-                            <GradientStop Color="Green" Offset="0"/>
-                            <GradientStop Color="Yellow" Offset="1"/>
-                        </LinearGradientBrush>
-
-                        <LinearGradientBrush>
-                            <GradientStop Color="Orange" Offset="0"/>
-                            <GradientStop Color="Brown" Offset="1"/>
-                        </LinearGradientBrush>
-
-                        <LinearGradientBrush>
-                            <GradientStop Color="DarkViolet" Offset="0"/>
-                            <GradientStop Color="White" Offset="1"/>
-                        </LinearGradientBrush>
-
-                    </sunburst:SunburstColorModel.CustomBrushes>
-                    
-                </sunburst:SunburstColorModel>                
-            </sunburst:SfSunburstChart.ColorModel>
-        </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart
+    ItemsSource="{Binding Data}"
+    ValueMemberPath="EmployeesCount"
+    Palette="Custom">
+    <sunburst:SfSunburstChart.Levels>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
+        <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
+    </sunburst:SfSunburstChart.Levels>
+
+    <sunburst:SfSunburstChart.ColorModel>
+        <sunburst:SunburstColorModel>
+            <sunburst:SunburstColorModel.CustomBrushes>
+
+                <LinearGradientBrush>
+                    <GradientStop Color="DeepPink" Offset="0"/>
+                    <GradientStop Color="Gray" Offset="1"/>
+                </LinearGradientBrush>
+
+                <LinearGradientBrush>
+                    <GradientStop Color="Green" Offset="0"/>
+                    <GradientStop Color="Yellow" Offset="1"/>
+                </LinearGradientBrush>
+
+                <LinearGradientBrush>
+                    <GradientStop Color="Orange" Offset="0"/>
+                    <GradientStop Color="Brown" Offset="1"/>
+                </LinearGradientBrush>
+
+                <LinearGradientBrush>
+                    <GradientStop Color="DarkViolet" Offset="0"/>
+                    <GradientStop Color="White" Offset="1"/>
+                </LinearGradientBrush>
+
+            </sunburst:SunburstColorModel.CustomBrushes>
+        </sunburst:SunburstColorModel>
+    </sunburst:SfSunburstChart.ColorModel>
+</sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
-            SfSunburstChart sunburst = new SfSunburstChart();
-            sunburst.ValueMemberPath = "EmployeesCount";
-            sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
-            sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
+SfSunburstChart sunburst = new SfSunburstChart();
+
+sunburst.ValueMemberPath = "EmployeesCount";
+
+sunburst.SetBinding(SfSunburstChart.ItemsSourceProperty, "Data");
+
+sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
+sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
+sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
+sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
+
+sunburst.Palette = SunburstColorPalette.Custom;
+
+SunburstColorModel colorModel = new SunburstColorModel();
+
+LinearGradientBrush brush1 = new LinearGradientBrush();
+
+brush1.GradientStops.Add(new GradientStop() { Color = Colors.DeepPink, Offset = 0 });
+brush1.GradientStops.Add(new GradientStop() { Color = Colors.Gray, Offset = 1 });
+
+LinearGradientBrush brush2 = new LinearGradientBrush();
+
+brush2.GradientStops.Add(new GradientStop() { Color = Colors.Green, Offset = 0 });
+brush2.GradientStops.Add(new GradientStop() { Color = Colors.Yellow, Offset = 1 });
 
-            sunburst.Palette = SunburstColorPalette.Custom;
+LinearGradientBrush brush3 = new LinearGradientBrush();
 
-            SunburstColorModel colorModel = new SunburstColorModel();
-            LinearGradientBrush brush1 = new LinearGradientBrush();
-            brush1.GradientStops.Add(new GradientStop() { Color = Colors.DeepPink, Offset = 0 });
-            brush1.GradientStops.Add(new GradientStop() { Color = Colors.Gray, Offset = 1 });
+brush3.GradientStops.Add(new GradientStop() { Color = Colors.Orange, Offset = 0 });
+brush3.GradientStops.Add(new GradientStop() { Color = Colors.Brown, Offset = 1 });
 
-            LinearGradientBrush brush2 = new LinearGradientBrush();
-            brush2.GradientStops.Add(new GradientStop() { Color = Colors.Green, Offset = 0 });
-            brush2.GradientStops.Add(new GradientStop() { Color = Colors.Yellow, Offset = 1 });
+LinearGradientBrush brush4 = new LinearGradientBrush();
 
-            LinearGradientBrush brush3 = new LinearGradientBrush();
-            brush3.GradientStops.Add(new GradientStop() { Color = Colors.Orange, Offset = 0 });
-            brush3.GradientStops.Add(new GradientStop() { Color = Colors.Brown, Offset = 1 });
+brush4.GradientStops.Add(new GradientStop() { Color = Colors.DarkViolet, Offset = 0 });
+brush4.GradientStops.Add(new GradientStop() { Color = Colors.White, Offset = 1 });
 
-            LinearGradientBrush brush4 = new LinearGradientBrush();
-            brush4.GradientStops.Add(new GradientStop() { Color = Colors.DarkViolet, Offset = 0 });
-            brush4.GradientStops.Add(new GradientStop() { Color = Colors.White, Offset = 1 });
+colorModel.CustomBrushes.Add(brush1);
+colorModel.CustomBrushes.Add(brush2);
+colorModel.CustomBrushes.Add(brush3);
+colorModel.CustomBrushes.Add(brush4);
 
-            colorModel.CustomBrushes.Add(brush1);
-            colorModel.CustomBrushes.Add(brush2);
-            colorModel.CustomBrushes.Add(brush3);
-            colorModel.CustomBrushes.Add(brush4);
+sunburst.ColorModel = colorModel;
 
-            sunburst.ColorModel = colorModel;
-            grid.Children.Add(sunburst);
+grid.Children.Add(sunburst);
           
 {% endhighlight %}
 
diff --git a/wpf/Sunburst-Chart/Region.md b/wpf/Sunburst-Chart/Region.md
index 0bba79bbce..677c5720b7 100644
--- a/wpf/Sunburst-Chart/Region.md
+++ b/wpf/Sunburst-Chart/Region.md
@@ -33,10 +33,7 @@ You can change the start and end angle of Sunburst chart using [`StartAngle`](ht
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart StartAngle="180"
-                             EndAngle="360">
-
-    </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart StartAngle="180" EndAngle="360"></sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
@@ -60,9 +57,7 @@ Sunburst chart allows you to customize the sunburst radius by using [`Radius`](h
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart Radius="0.6">
-
-     </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart Radius="0.6"></sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
@@ -85,9 +80,7 @@ Sunburst chart allows you to customize the inner radius using [`InnerRadius`](ht
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart InnerRadius="0.5">
-
-    </sunburst:SfSunburstChart>
+<sunburst:SfSunburstChart InnerRadius="0.5"></sunburst:SfSunburstChart>
 
 {% endhighlight %}
 
diff --git a/wpf/Sunburst-Chart/Selection.md b/wpf/Sunburst-Chart/Selection.md
index 850d58efbb..4b1d4f988c 100644
--- a/wpf/Sunburst-Chart/Selection.md
+++ b/wpf/Sunburst-Chart/Selection.md
@@ -19,17 +19,16 @@ The below code shows, how to enable the selection behavior.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-       <sunburst:SunburstSelectionBehavior/>
-
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -52,22 +51,24 @@ The following code shows, how to set the display mode using brush.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                    SelectionBrush="Black"
-                                                    SelectionDisplayMode="HighlightByColor"/>
-            
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior 
+        EnableSelection="True"                    
+        SelectionBrush="Black"                    
+        SelectionDisplayMode="HighlightByColor">
+    </sunburst:SunburstSelectionBehavior>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionBrush = new SolidColorBrush(Colors.Black);
 selection.SelectionDisplayMode = SelectionDisplayMode.HighlightByColor;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -91,19 +92,19 @@ Sunburst chart provides support to select or highlight the segment by clicking o
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Behaviors>
-
-        <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                         SelectionMode="MouseClick"/>
-     </sunburst:SfSunburstChart.Behaviors>
+ <sunburst:SfSunburstChart.Behaviors>
+     <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionMode="MouseClick"/>
+ </sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionMode = Syncfusion.UI.Xaml.SunburstChart.SelectionMode.MouseClick;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -127,19 +128,19 @@ The following code shows, how to set the selection type as child.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                    SelectionType="Child"  />
-     </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionType="Child"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionType = SelectionType.Child;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -157,19 +158,19 @@ The following code shows, how to set the selection type as group.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                    SelectionType="Group"  />
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionType="Group"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionType = SelectionType.Group;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -187,19 +188,19 @@ The following code shows, how to set the selection type as parent.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                    SelectionType="Parent"  />
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionType="Parent"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionType = SelectionType.Parent;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -216,19 +217,19 @@ The following code shows, how to set the selection type as single.
 
 {% highlight xaml %}
 
-     <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                    SelectionType="Single"  />
-     </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionType="Single"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionType = SelectionType.Single;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
@@ -247,20 +248,19 @@ The following code shows, how to set the selection cursor as hand.
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart.Behaviors>
-
-              <sunburst:SunburstSelectionBehavior EnableSelection="True"
-                                                  SelectionCursor="Hand" />
-
-      </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstSelectionBehavior EnableSelection="True" SelectionCursor="Hand"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstSelectionBehavior selection = new SunburstSelectionBehavior();
+
 selection.EnableSelection = true;
 selection.SelectionCursor = Cursors.Hand;
+
 chart.Behaviors.Add(selection);
 
 {% endhighlight %}
diff --git a/wpf/Sunburst-Chart/Tooltip.md b/wpf/Sunburst-Chart/Tooltip.md
index a858ac2ec9..f2d6da08b3 100644
--- a/wpf/Sunburst-Chart/Tooltip.md
+++ b/wpf/Sunburst-Chart/Tooltip.md
@@ -17,18 +17,18 @@ ToolTip allows you to display any information over a sunburst segment. It appear
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstToolTipBehavior ShowToolTip="True"/>
-
-            </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior ShowToolTip="True"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.ShowToolTip = true;
+
 chart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -51,18 +51,18 @@ The following code shows, how to position the tooltip to right of the cursor.
 
 {% highlight xaml %}
 
-      <sunburst:SfSunburstChart.Behaviors>
-
-         <sunburst:SunburstToolTipBehavior HorizontalAlignment="Right"/>
-
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior HorizontalAlignment="Right"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.HorizontalAlignment = HorizontalAlignment.Right;
+
 sunburstChart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -78,11 +78,9 @@ The following code shows, how to position the tooltip to bottom of the cursor.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-     <sunburst:SunburstToolTipBehavior VerticalAlignment="Bottom"  />
-
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior VerticalAlignment="Bottom"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
@@ -97,20 +95,19 @@ The tooltip position can be customized to a custom position from the cursor usin
 
 {% highlight xaml %}
 
-         <sunburst:SfSunburstChart.Behaviors>
-
-       <sunburst:SunburstToolTipBehavior HorizontalOffset="50"
-                                         VerticalOffset="50"/>
-
-        </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior HorizontalOffset="50" VerticalOffset="50"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.HorizontalOffset = 50;
 tooltip.VerticalOffset = 50;
+
 sunburstChart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -129,18 +126,18 @@ You can set display duration for tooltip by using the [`ShowDuration`](https://h
 
 {% highlight xaml %}
 
-         <sunburst:SfSunburstChart.Behaviors>
-
-            <sunburst:SunburstToolTipBehavior ShowDuration="6000"/>
-
-          </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior ShowDuration="6000"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.ShowDuration = 6000;
+
 chart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -155,18 +152,18 @@ We can set the initial display delay for Tooltip by using [`InitialShowDelay`](h
 
 {% highlight xaml %}
 
-           <sunburst:SfSunburstChart.Behaviors>
-
-            <sunburst:SunburstToolTipBehavior InitialShowDelay="500"/>
-                
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior InitialShowDelay="500"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.InitialShowDelay = 500;
+
 sunburstChart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -181,20 +178,19 @@ You can enable the translate animation for Tooltip by using [`EnableAnimation`](
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-     <sunburst:SunburstToolTipBehavior EnableAnimation="True" 
-                                       AnimationDuration="5000"/>
-
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstToolTipBehavior EnableAnimation="True" AnimationDuration="5000"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstToolTipBehavior tooltip = new SunburstToolTipBehavior();
+
 tooltip.EnableAnimation = true;
 tooltip.AnimationDuration = 5000;
+
 sunburstChart.Behaviors.Add(tooltip);
 
 {% endhighlight %}
@@ -207,28 +203,25 @@ You can customize the default appearance of the tooltip by applying the [`Toolti
 
 {% highlight xaml %}
 
-    <sunburst:SunburstToolTipBehavior.ToolTipTemplate>
-                        
-        <DataTemplate>
-                            
-               <Border Background="{Binding Interior}"
-                       BorderBrush="{Binding Interior}"
-                       BorderThickness="4">
-                       <StackPanel>
-                           <StackPanel Orientation="Horizontal">
-                               <TextBlock Text="Category : "/>
-                               <TextBlock Text="{Binding Category}"/>
-                            </StackPanel>
-                            <StackPanel Orientation="Horizontal">
-                                <TextBlock Text="Value : "/>
-                                <TextBlock Text="{Binding Value}"/>
-                            </StackPanel>
-                        </StackPanel>
-               </Border>
-                            
-       </DataTemplate>
-                        
-    </sunburst:SunburstToolTipBehavior.ToolTipTemplate>
+<sunburst:SunburstToolTipBehavior.ToolTipTemplate>
+    <DataTemplate>
+        <Border 
+            Background="{Binding Interior}"
+            BorderBrush="{Binding Interior}"
+            BorderThickness="4">
+            <StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Text="Category : "/>
+                    <TextBlock Text="{Binding Category}"/>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Text="Value : "/>
+                    <TextBlock Text="{Binding Value}"/>
+                </StackPanel>
+            </StackPanel>
+        </Border>
+    </DataTemplate>
+</sunburst:SunburstToolTipBehavior.ToolTipTemplate>
 
 {% endhighlight %}
 
diff --git a/wpf/Sunburst-Chart/Zooming.md b/wpf/Sunburst-Chart/Zooming.md
index ce634cea11..c9c7453b68 100644
--- a/wpf/Sunburst-Chart/Zooming.md
+++ b/wpf/Sunburst-Chart/Zooming.md
@@ -19,17 +19,16 @@ The following code shows how to initialize the zooming behavior.
 
 {% highlight xaml %}
 
-    <sunburst:SfSunburstChart.Behaviors>
-
-              <sunburst:SunburstZoomingBehavior/>
-
-    </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstZoomingBehavior/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
 {% highlight c# %}
 
 SunburstZoomingBehavior zoom = new SunburstZoomingBehavior();
+
 chart.Behaviors.Add(zoom);
 
 {% endhighlight %}
@@ -49,12 +48,13 @@ You can align the zooming toolbar position by using [`ToolBarHorizontalAlignment
 
 {% highlight xaml %}
 
-             <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstZoomingBehavior EnableZooming="True"
-                                                    ToolBarHorizontalAlignment="Center"
-                                                  ToolBarVerticalAlignment="Center"/>
-            </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstZoomingBehavior 
+        EnableZooming="True"
+        ToolBarHorizontalAlignment="Center"
+        ToolBarVerticalAlignment="Center">
+    </sunburst:SunburstZoomingBehavior>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
@@ -66,15 +66,15 @@ You can customize the zooming toolbar using the following properties.
 
 {% highlight xaml %}
 
-          <sunburst:SfSunburstChart.Behaviors>
-
-                <sunburst:SunburstZoomingBehavior EnableZooming="True"
-                                                  ToolBarHorizontalAlignment="Center"
-                                                  ToolBarVerticalAlignment="Center"
-                                                  ToolBarItemHeight="30"
-                                                  ToolBarItemWidth="50"
-                                                  ToolBarItemMargin="5"/>
-            </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstZoomingBehavior 
+        EnableZooming="True"
+        ToolBarHorizontalAlignment="Center"
+        ToolBarVerticalAlignment="Center"
+        ToolBarItemHeight="30"
+        ToolBarItemWidth="50"
+        ToolBarItemMargin="5"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
@@ -84,11 +84,12 @@ Toolbar position can also be moved using the [`ToolbarOffsetX`](https://help.syn
 
 {% highlight xaml %}
 
-          <sunburst:SfSunburstChart.Behaviors>
-
-              <sunburst:SunburstZoomingBehavior EnableZooming="True"
-                                                  ToolbarOffsetX="0.1" ToolbarOffsetY="0.5"/>
-            </sunburst:SfSunburstChart.Behaviors>
+<sunburst:SfSunburstChart.Behaviors>
+    <sunburst:SunburstZoomingBehavior 
+        EnableZooming="True" 
+        ToolbarOffsetX="0.1" 
+        ToolbarOffsetY="0.5"/>
+</sunburst:SfSunburstChart.Behaviors>
 
 {% endhighlight %}
 
diff --git a/wpf/Tabbed-Window/data-binding.md b/wpf/Tabbed-Window/data-binding.md
index 0aa297a2ad..e06999517b 100644
--- a/wpf/Tabbed-Window/data-binding.md
+++ b/wpf/Tabbed-Window/data-binding.md
@@ -1,99 +1,97 @@
 ---
 layout: post
 title: Data Binding in WPF Tabbed Window | Syncfusion
-description: Bind tabs to a collection using the ItemsSource property to support MVVM‑based tabbed window scenarios.
+description: Learn how to bind tabs to a collection in Syncfusion® WPF Tabbed Window by using the ItemsSource property and templates for tab headers and content.
 platform: wpf
 control: TabbedWindow
 documentation: ug
 ---
 
-# WPF Tabbed Window - Data Binding
+# Data Binding in WPF Tabbed Window
 
-## Overview
+This section explains how to bind tabs to a collection in a WPF Tabbed Window using the `ItemsSource` property of the [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html).
 
-The Tabbed Window provides full MVVM support through data binding. You can bind tabs to a collection using the `ItemsSource` property, enabling data-driven tab creation and dynamic content updates.
+When data binding is used, the tab header and tab content are generated from the bound data by defining appropriate header and content templates.
 
-## ItemsSource Binding
+## Populating Tab Items Using ItemsSource
 
-Bind the `ItemsSource` property to a collection in your ViewModel. Each item automatically generates a corresponding tab:
+The SfTabControl supports data binding through the `ItemsSource` property, which allows tabs to be created automatically based on a collection in the ViewModel. Each item in the collection represents a tab, and its properties can be used to define both the tab header and the tab content.
+
+The following example demonstrates how to bind tab items using the MVVM pattern.
+
+**Model and ViewModel**
 
 {% tabs %}
+
 {% highlight C# %}
 
 // TabModel.cs
-public class TabModel {
-  public string Header { get; set; }
-  public string Content { get; set; }
+public class TabModel
+{
+    public string Header { get; set; }
+    public string Content { get; set; }
 }
 
 // MainViewModel.cs
-public class MainViewModel : NotificationObject {
-  public ObservableCollection<TabModel> TabItems { get; } = new ObservableCollection<TabModel>();
-
-  public MainViewModel() {
-    TabItems.Add(new TabModel { Header = "Tab 1", Content = "First tab content" });
-    TabItems.Add(new TabModel { Header = "Tab 2", Content = "Second tab content" });
-  }
+public class MainViewModel : NotificationObject
+{
+    public ObservableCollection<TabModel> TabItems { get; } = new ObservableCollection<TabModel>();
+
+    public MainViewModel()
+    {
+        TabItems.Add(new TabModel
+        {
+            Header = "Tab 1",
+            Content = "First tab content"
+        });
+
+        TabItems.Add(new TabModel
+        {
+            Header = "Tab 2",
+            Content = "Second tab content"
+        });
+    }
 }
-{% endhighlight %}
-
-{% highlight XAML %}
-<Window.DataContext>
-  <local:MainViewModel />
-</Window.DataContext>
-
-<syncfusion:SfTabControl ItemsSource="{Binding TabItems}" x:Name="MainTabControl">
-  <!-- Header template via ItemContainerStyle -->
-  <syncfusion:SfTabControl.ItemContainerStyle>
-    <Style TargetType="syncfusion:SfTabItem">
-      <Setter Property="HeaderTemplate">
-        <Setter.Value>
-          <DataTemplate>
-            <TextBlock Text="{Binding Header}" />
-          </DataTemplate>
-        </Setter.Value>
-      </Setter>
-    </Style>
-  </syncfusion:SfTabControl.ItemContainerStyle>
-
-  <!-- Content template -->
-  <syncfusion:SfTabControl.ContentTemplate>
-    <DataTemplate>
-      <TextBlock Text="{Binding Content}" />
-    </DataTemplate>
-  </syncfusion:SfTabControl.ContentTemplate>
-</syncfusion:SfTabControl>
 
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF TabbedWindow](data-binding_images/wpf_tabbedwindow.png)
-
-## Customization of TabItems
+**Binding ItemsSource, Header and Content**
 
-Use the ItemTemplate to control the visual presentation of each tab, defining separate templates for the tab header and tab content to enable flexible and reusable UI composition.
+In the following example, the SfTabControl is bound to the TabItems collection. The tab header and tab content are generated from the bound data by defining header and content templates.
 
 {% tabs %}
 
 {% highlight XAML %}
 
-<DataTemplate x:Key="TabHeaderTemplate">
-  <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-    <Image Source="/Images/doc.png" Width="16" Height="16"/>
-    <TextBlock Text="{Binding Title}" Margin="6,0,0,0"/>
-  </StackPanel>
-</DataTemplate>
+<Window.DataContext>
+    <local:MainViewModel />
+</Window.DataContext>
 
-<DataTemplate x:Key="TabContentTemplate">
-  <ContentPresenter Content="{Binding Content}" />
-</DataTemplate>
+<syncfusion:SfTabControl ItemsSource="{Binding TabItems}"
+                         x:Name="MainTabControl">
+    <syncfusion:SfTabControl.ItemContainerStyle>
+        <Style TargetType="{x:Type syncfusion:SfTabItem}">
+            <Setter Property="HeaderTemplate">
+                <Setter.Value>
+                    <DataTemplate>
+                        <TextBlock Text="{Binding Header}" />
+                    </DataTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </syncfusion:SfTabControl.ItemContainerStyle>
+
+    <syncfusion:SfTabControl.ContentTemplate>
+        <DataTemplate>
+            <TextBlock Text="{Binding Content}" />
+        </DataTemplate>
+    </syncfusion:SfTabControl.ContentTemplate>
+</syncfusion:SfTabControl>
 
-<syncfusion:SfTabControl ItemsSource="{Binding OpenTabs}"
-                         ItemTemplate="{StaticResource TabHeaderTemplate}"
-                         ContentTemplate="{StaticResource TabContentTemplate}" />
 {% endhighlight %}
 
 {% endtabs %}
 
-![WPF TabbedWindow customization](data-binding_images/wpf_customization.png)
+![WPF TabbedWindow](data-binding_images/wpf_tabbedwindow.png)
diff --git a/wpf/Tabbed-Window/data-binding_images/wpf_customization.png b/wpf/Tabbed-Window/data-binding_images/wpf_customization.png
index 952b1106bb..45fd6b4116 100644
Binary files a/wpf/Tabbed-Window/data-binding_images/wpf_customization.png and b/wpf/Tabbed-Window/data-binding_images/wpf_customization.png differ
diff --git a/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png b/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png
index c437ab5423..7c4c0405b5 100644
Binary files a/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png and b/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png differ
diff --git a/wpf/Tabbed-Window/getting-started.md b/wpf/Tabbed-Window/getting-started.md
index 58ee999129..3d0cbc8de0 100644
--- a/wpf/Tabbed-Window/getting-started.md
+++ b/wpf/Tabbed-Window/getting-started.md
@@ -9,40 +9,64 @@ documentation: ug
 
 # Getting Started with WPF Tabbed Window
 
-## Creating Your First Tabbed Window
+This section explains how to create a tabbed window interface using the [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html) and [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) controls. The Tabbed Window provides a browser-style, document-based user interface that integrates tabs directly into the window chrome, similar to modern IDEs and web browsers.
 
-### Step 1: Add References
+## Assembly Deployment
+
+To integrate the Tabbed Window in you WPF application, add the following required assemblies or NuGet packages:
 
-Ensure you have the required Syncfusion assemblies referenced in your project:
 - Syncfusion.SfChromelessWindow.WPF
 - Syncfusion.Shared.WPF
 
-### Step 2: Create XAML
+## Adding Tabbed Window via XAML
+
+To add the Tabbed Window manually in XAML, follow these steps:
+
+1. Create a new WPF project in Visual Studio  with required .NET Framework or .NET Core version.
 
-Create a window that inherits from `TabbedWindow`:
+2. Add the required assembly references or NuGet packages mentioned in the Assembly Deployment section.
+
+3. Import the Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in your XAML file.
+
+4. Create a window that uses [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html) and set its [WindowType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html#Syncfusion_Windows_Controls_SfChromelessWindow_WindowType) property to `Tabbed`, and include an [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) with the required tab items.
 
 {% tabs %}
 
 {% highlight XAML %}
 
-<syncfusion:SfChromelessWindow xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-                               WindowType="Tabbed"
-                               Height="450" Width="800">
-  <syncfusion:SfTabControl x:Name="MainTabControl">
-    <syncfusion:SfTabItem Header="Home" Content="Welcome to Home Tab"/>
-    <syncfusion:SfTabItem Header="File" Content="Welcome to File Tab"/>
-    <syncfusion:SfTabItem Header="Edit" Content="Welcome to Edit Tab"/>
-    <syncfusion:SfTabItem Header="Tools" Content="Welcome to Tools Tab"/>
-  </syncfusion:SfTabControl>
+<syncfusion:SfChromelessWindow
+    x:Class="TabbedWindowDemo.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
+    WindowType="Tabbed"
+    Height="450"
+    Width="800">
+
+    <syncfusion:SfTabControl>
+        <syncfusion:SfTabItem Header="Home" Content="Welcome to Home Tab"/>
+        <syncfusion:SfTabItem Header="File" Content="Welcome to File Tab"/>
+        <syncfusion:SfTabItem Header="Edit" Content="Welcome to Edit Tab"/>
+        <syncfusion:SfTabItem Header="Tools" Content="Welcome to Tools Tab"/>
+    </syncfusion:SfTabControl>
+
 </syncfusion:SfChromelessWindow>
 
 {% endhighlight %}
 
 {% endtabs %}
 
-### Step 3: Create Code-Behind
+![WPF Tabbed Window](getting-started_images/tabbedwindow_xaml.png)
+
+## Adding WPF Tabbed Window via C#
+
+To add the Tabbed Window control manually in C#, follow these steps:
 
-Create the C# code-behind file:
+1. Create a new WPF project in Visual Studio with the required .NET Framework or .NET Core version.
+
+2. Add the required assembly references or NuGet packages mentioned in the Assembly Deployment section.
+
+3. Include the required namespace, create a window that inherits from [SfChromelessWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html), set its [WindowType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfChromelessWindow.html#Syncfusion_Windows_Controls_SfChromelessWindow_WindowType) to `Tabbed`, and include an [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) with the required tab items.
 
 {% tabs %}
 
@@ -55,159 +79,28 @@ public partial class MainWindow : SfChromelessWindow
     public MainWindow()
     {
         InitializeComponent();
-
-        this.WindowType = WindowType.Tabbed;
+        WindowType = WindowType.Tabbed;
 
         var tabControl = new SfTabControl();
-        var tab = new SfTabItem { Header = "Document 1", Content = new TextBlock { Text = "Doc 1" } };
-        tabControl.Items.Add(tab);
-        this.Content = tabControl;
-    }
-}
-{% endhighlight %}
-
-{% endtabs %}
-
-![WPF Tabbed Window](getting-started_images/wpf_tabbedwindow.png)
-
-## Key Properties
-
-| Property | Description |
-|----------|-------------|
-| `AllowDragDrop` | Enable/disable drag-drop reordering of tabs |
-| `EnableNewTabButton` | Show/hide the new tab (+) button |
-| `SelectedItem` | Get/set the currently active tab |
-| `ItemsSource` | Bind tabs to a collection for data-driven scenarios |
-| `WindowType` | Choose between "Tabbed" or "Normal" mode |
 
-## Basic Examples
+        tabControl.Items.Add(new SfTabItem
+        {
+            Header = "Document 1",
+            Content = new TextBlock { Text = "Document 1 Content" }
+        });
 
-### With Close Buttons
-
-{% tabs %}
-
-{% highlight XAML %}
-
-<syncfusion:SfTabControl>
-    <syncfusion:SfTabItem Header="Document 1" CloseButtonVisibility="Visible">
-        <TextBlock Text="Content" />
-    </syncfusion:SfTabItem>
-</syncfusion:SfTabControl>
-
-{% endhighlight %}
-
-{% endtabs %}
-
-### With New Tab Handler
-
-{% tabs %}
-
-{% highlight XAML %}
-
-<syncfusion:SfTabControl 
-    EnableNewTabButton="True"
-    NewTabRequested="OnNewTabRequested">
-    <!-- Tab items -->
-</syncfusion:SfTabControl>
-
-{% endhighlight %}
-
-{% endtabs %}
-
-{% tabs %}
+        tabControl.Items.Add(new SfTabItem
+        {
+            Header = "Document 2",
+            Content = new TextBlock { Text = "Document 2 Content" }
+        });
 
-{% highlight C# %}
-
-private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
-{
-    var newItem = new SfTabItem { Header = "New Tab" };
-    e.Item = newItem;
+        Content = tabControl;
+    }
 }
 
 {% endhighlight %}
 
 {% endtabs %}
 
-## Window Type Modes
-
-The Tabbed Window supports two distinct modes that control how tabs are integrated into the window layout. Choose the mode that best fits your application's requirements.
-
-### Tabbed Mode
-
-In Tabbed mode, tabs are integrated into the window's chrome area (the title bar area), similar to modern web browsers. This creates a unified interface where tabs and the window controls appear together.
-
-#### When to Use Tabbed Mode
-
-- Building browser-style applications
-- Creating document editors (similar to Visual Studio)
-- Tabs are the primary navigation method
-- Want integrated chrome appearance with tabs
-
-#### Example
-
-{% tabs %}
-
-{% highlight XAML %}
-
-<syncfusion:SfChromelessWindow 
-    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-    x:Class="TabbedWindowApp.MainWindow"
-    WindowType="Tabbed"
-    Height="600" 
-    Width="900">
-    <syncfusion:SfTabControl AllowDragDrop="True" EnableNewTabButton="True">
-        <syncfusion:SfTabItem Header="Document 1" CloseButtonVisibility="Visible"
-                            Content="Tabs are integrated into window chrome"/>
-        <syncfusion:SfTabItem Header="Document 2" CloseButtonVisibility="Visible"
-                            Content="Similar to browser interface"/>
-    </syncfusion:SfTabControl>
-</syncfusion:SfChromelessWindow>
-
-{% endhighlight %}
-
-{% endtabs %}
-
-![WPF Tabbed Window](getting-started_images/tabbedwindow.png)
-
-#### Layout Characteristics
-
-- Tabs appear in the window chrome area
-- Window title and tabs share the top area
-- Compact layout
-- Professional browser-like appearance
-
-### Normal Mode
-
-In Normal mode, the SfTabControl is displayed as regular content within the window. The tabs occupy the content area rather than being integrated into the window chrome, providing a traditional tab navigation interface.
-
-#### When to Use Normal Mode
-
-- Tabs are secondary navigation
-- Need additional UI elements above tabs (toolbar, menu)
-- Creating traditional MDI applications
-- Want flexible layout control
-
-{% tabs %}
-
-{% highlight XAML %}
-
-<syncfusion:SfChromelessWindow 
-    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
-    x:Class="TabbedWindowApp.MainWindow"
-    Title="View Manager"
-    WindowType="Normal"
-    Height="600" 
-    Width="900">
-    <Grid>
-        <syncfusion:SfTabControl AllowDragDrop="True">
-                <syncfusion:SfTabItem Header="View 1" Content="Tab control is regular content"/>
-                <syncfusion:SfTabItem Header="View 2" Content="Not integrated into chrome"/>
-        </syncfusion:SfTabControl>    
-    </Grid>
-</syncfusion:SfChromelessWindow>
-
-{% endhighlight %}
-
-{% endtabs %}
-
-![Normal mode](getting-started_images/wpf_normalwindow.png)
+![WPF Tabbed Window](getting-started_images/tabbedwindow_csharp.png)
diff --git a/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png
new file mode 100644
index 0000000000..2f599dba02
Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_csharp.png differ
diff --git a/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png
new file mode 100644
index 0000000000..3fb8f71400
Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/tabbedwindow_xaml.png differ
diff --git a/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png b/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png
deleted file mode 100644
index 9adb5bce7d..0000000000
Binary files a/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png and /dev/null differ
diff --git a/wpf/Tabbed-Window/merge-tabs.md b/wpf/Tabbed-Window/merge-tabs.md
index ac1ff8535b..34ae1ee910 100644
--- a/wpf/Tabbed-Window/merge-tabs.md
+++ b/wpf/Tabbed-Window/merge-tabs.md
@@ -1,34 +1,34 @@
 ---
 layout: post
 title: Merge Tabs Between Windows in WPF Tabbed Window | Syncfusion
-description: Move tabs between multiple tabbed windows and manage merge operations with validation to ensure correct behavior.
+description: Learn how to detach tabs into floating windows and validate tab movement between tabbed windows by using tear-off support and the PreviewTabMerge event.
 platform: wpf
 control: TabbedWindow
 documentation: ug
 ---
 
-# WPF Tabbed Window - Merge Tabs Between Windows
+# Merge Tabs Between Windows in WPF Tabbed Window
 
-## Overview
+This section explains how to move tabs between WPF Tabbed Window instances. It covers supported tear‑off functionality and tab merge validation using built‑in drag‑and‑drop capabilities.
 
-The Tabbed Window supports merging tabs between multiple windows through drag-and-drop operations. This enables users to reorganize content across multiple windows and create flexible workspace configurations.
+These features allow users to detach tabs into floating windows and merge them back into the same or another tabbed window.
 
-## Tear-Off Windows
+## Tear‑Off Windows
 
-The Tabbed Window supports tear-off functionality that allows users to detach tabs and create independent floating windows. These floating windows operate as separate TabbedWindow instances and can be reattached to the main window later.
+The Tabbed Window supports tear‑off functionality, allowing tabs to be detached from an [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) and displayed in independent floating windows. These floating windows can later be merged back into another tabbed window.
 
-### Creating Floating Windows
+### Enabling Tear‑Off Support
 
-To tear off a tab and create a floating window:
+You can enable tear‑off support by setting the [AllowDragDrop](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html#Syncfusion_Windows_Controls_SfTabControl_AllowDragDrop) property of the [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) to True.
 
-1. Drag a tab outside the boundary of the tab control
-2. A new floating window is automatically created
-3. The tab is now contained in the new floating window
-4. The floating window can be a new tabbed window
+When drag‑and‑drop is enabled:
 
-### Enable Tear-Off
+- A tab can be dragged outside the tab control boundary to create a floating window
+- The dragged tab is automatically moved into the new window
+- The floating window behaves like a regular tabbed window
+- If all tabs are removed from a floating window, the window closes automatically
 
-Ensure `AllowDragDrop` is enabled, which is the prerequisite for tear-off functionality:
+The floating window supports resizing, minimizing, and all standard tab features.
 
 {% tabs %}
 
@@ -45,34 +45,21 @@ Ensure `AllowDragDrop` is enabled, which is the prerequisite for tear-off functi
     </syncfusion:SfTabControl>
 </syncfusion:SfChromeslessWindow>
 
-
 {% endhighlight %}
 
 {% endtabs %}
 
 ![WPF TabbedWindow Tear-Off](merge-tabs_images/tear-off-tabbedwindow.gif)
 
-### Reattaching Floating Tabs
-
-To reattach a tab from a floating window back to the main window:
-
-1. Drag the tab from the floating window
-2. Drop it inside the main window's tab area
-3. The tab is automatically integrated back into the main window
-4. The floating window is closed if it becomes empty
+## Controlling Tab Movement with PreviewTabMerge event
 
-### Floating Window Behavior
+You can control and validate tab movement between tabbed windows using the [PreviewTabMerge](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html#Syncfusion_Windows_Controls_SfTabControl_PreviewTabMerge) event of the [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html).
 
-Each floating window created by tearing off a tab:
-- Is a fully functional TabbedWindow instance
-- Inherits SfChromelessWindow properties
-- Can be resized, moved, and minimized
-- Supports the same tab features as the main window (drag-drop, new tabs, close buttons)
-- Can have additional tabs dragged into it
+This event is raised before a tab is merged into the target tab control and allows you to:
 
-## Control Tab Movement with PreviewTabMerge
-
-The `PreviewTabMerge` event fires before a tab is moved between windows, allowing you to validate or cancel the merge operation:
+- Cancel the merge operation
+- Validate business rules before allowing a merge
+- Modify or replace the item being merged
 
 {% tabs %}
 
@@ -94,7 +81,7 @@ private void OnPreviewTabMerge(object sender, TabMergePreviewEventArgs e)
     var draggedItem = e.DraggedItem;
     var sourceControl = e.SourceControl;
     var targetControl = e.TargetControl;
-    
+
     // Validate the merge
     if (draggedItem is Document doc && doc.IsLocked)
     {
@@ -103,18 +90,18 @@ private void OnPreviewTabMerge(object sender, TabMergePreviewEventArgs e)
         MessageBox.Show("Cannot move locked documents");
         return;
     }
-    
+
     // Optional: Transform the item before merge
     if (draggedItem is Document docItem)
     {
-        e.ResultingItem = new Document 
-        { 
+        e.ResultingItem = new Document
+        {
             Title = docItem.Title,
             Content = docItem.Content,
             CreatedAt = DateTime.Now
         };
     }
-    
+
     // Allow the merge
     e.Allow = true;
 }
@@ -123,16 +110,14 @@ private void OnPreviewTabMerge(object sender, TabMergePreviewEventArgs e)
 
 {% endtabs %}
 
-![WPF TabbedWindow Merging](merge-tabs_images/tabbedwindow-merging.gif)
+![WPF TabbedWindow Preview Merging](merge-tabs_images/tabbedwindow-merging.gif)
 
 ## PreviewTabMergeEventArgs Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `DraggedItem` | object | The item being dragged |
-| `SourceControl` | SfTabControl | The control where drag originated |
-| `TargetControl` | SfTabControl | The control receiving the item |
-| `Allow` | bool | Set to false to cancel merge (default: true) |
-| `ResultingItem` | object | The item to be inserted (default: DraggedItem) |
-
-
+| Property        |Description                                                       |
+|-----------------|------------------------------------------------------------------|
+| DraggedItem     | Gets the item being dragged from the source tab control             |
+| SourceControl   | Gets the `SfTabControl` where the drag operation originated          |
+| TargetControl   | Gets the `SfTabControl` that receives the dragged item              |
+| Allow           | Specifies whether the merge operation is allowed                    |
+| ResultingItem   | Specifies the item inserted into the target control                 |
\ No newline at end of file
diff --git a/wpf/Tabbed-Window/tab-management.md b/wpf/Tabbed-Window/tab-management.md
index 52827ca384..a52b6ab927 100644
--- a/wpf/Tabbed-Window/tab-management.md
+++ b/wpf/Tabbed-Window/tab-management.md
@@ -1,34 +1,32 @@
 ---
 layout: post
-title: Tab Management in WPF Tabbed Window | Syncfusion
-description: Manage tabs dynamically by supporting close buttons, creating new tabs, and updating the selected tab during interactions.
+title: Tab Management in WPF Tabbed Window| Syncfusion
+description: Learn how to manage tabs in a WPF tabbed window by using close buttons, adding new tabs, customizing tab appearance, and using keyboard shortcuts.
 platform: wpf
 control: TabbedWindow
 documentation: ug
 ---
 
-# WPF Tabbed Window - Tab Management
+# Tab Management in WPF Tabbed Window
 
-## Overview
+This section explains how to manage tabs in a WPF Tabbed Window interface. It provides an overview of common tab management operations such as closing tabs, creating new tabs, customizing tab buttons, and navigating tabs using keyboard shortcuts.
 
-The Tabbed Window provides comprehensive tab management capabilities including dynamic tab creation, tab closing, and tab selection. These features enable flexible and responsive tab-based interfaces.
+## Closing Tabs
 
-## Close Button Support
-
-Display close buttons on individual tabs using the `CloseButtonVisibility` property on `SfTabItem`:
+You can display close buttons on individual tabs using the [CloseButtonVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabItem.html#Syncfusion_Windows_Controls_SfTabItem_CloseButtonVisibility) property on [SfTabItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabItem.html).
 
 {% tabs %}
 
 {% highlight XAML %}
 
-<syncfusion:SfTabControl>
-    <syncfusion:SfTabItem 
-        Header="Document 1" 
+<syncfusion:SfTabControl x:Name="maintabcontrol">
+    <syncfusion:SfTabItem
+        Header="Document 1"
         CloseButtonVisibility="Visible">
         <TextBlock Text="Click the X button to close this tab" />
     </syncfusion:SfTabItem>
-    <syncfusion:SfTabItem 
-        Header="Document 2" 
+    <syncfusion:SfTabItem
+        Header="Document 2"
         CloseButtonVisibility="Visible">
         <TextBlock Text="Each tab has its own close button" />
     </syncfusion:SfTabItem>
@@ -36,15 +34,11 @@ Display close buttons on individual tabs using the `CloseButtonVisibility` prope
 
 {% endhighlight %}
 
-{% endtabs %}
-
-{% tabs %}
-
 {% highlight C# %}
 
-var tabItem = new SfTabItem 
-{ 
-    Header = "Document", 
+var tabItem = new SfTabItem
+{
+    Header = "Document",
     CloseButtonVisibility = Visibility.Visible,
     Content = new TextBlock { Text = "Tab Content" }
 };
@@ -54,19 +48,19 @@ tabControl.Items.Add(tabItem);
 
 {% endtabs %}
 
-When a user clicks the close button, the tab is automatically removed and the control selects the next available tab.
+When the user clicks the close button, the corresponding tab is automatically removed from the [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html), and the next available tab is selected.
 
 ![WPF TabbedWindow CloseButton](tab-management_images/tabbedwindow_closebutton.gif)
 
-## New Tab Button
+## Adding New Tabs
 
-Enable the new tab button to allow users to dynamically add tabs:
+The [SfTabControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html) provides a built‑in new tab button that allows users to add tabs dynamically at runtime. Set the [EnableNewTabButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html#Syncfusion_Windows_Controls_SfTabControl_EnableNewTabButton) property to True to display this button. Clicking it raises the [NewTabRequested](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html#Syncfusion_Windows_Controls_SfTabControl_NewTabRequested) event, where a new [SfTabItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabItem.html) can be created.
 
 {% tabs %}
 
 {% highlight XAML %}
 
-<syncfusion:SfTabControl 
+<syncfusion:SfTabControl
     EnableNewTabButton="True"
     NewTabRequested="OnNewTabRequested">
     <syncfusion:SfTabItem Header="Tab 1">
@@ -80,19 +74,18 @@ Enable the new tab button to allow users to dynamically add tabs:
 
 private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
 {
-    // Create a new tab item when user clicks the + button
-    var newTabContent = new TextBlock 
-    { 
-        Text = $"New Document {DateTime.Now:g}" 
+    var newTabContent = new TextBlock
+    {
+        Text = $"New Document {DateTime.Now:g}"
     };
-    
-    var newTabItem = new SfTabItem 
-    { 
+
+    var newTabItem = new SfTabItem
+    {
         Header = $"Document {tabControl.Items.Count + 1}",
         Content = newTabContent,
         CloseButtonVisibility = Visibility.Visible
     };
-    
+
     e.Item = newTabItem;
 }
 
@@ -102,9 +95,9 @@ private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
 
 ![WPF TabbedWindow New Tab Button](tab-management_images/tabbedwindow_newbutton.gif)
 
-### Customization of New tab button
+## Customizing the New Tab Button
 
-`NewTabButtonStyle` targets the internal `Button` used for the new‑tab afford and controls visual properties such as size, background, border and padding without replacing the element tree. 
+You can customize the appearance of the new tab button using the [NewTabButtonStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfTabControl.html#Syncfusion_Windows_Controls_SfTabControl_NewTabButtonStyle) property. This allows you to modify visual properties such as background, border, width, and height.
 
 {% tabs %}
 
@@ -131,10 +124,11 @@ private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
 
 ![WPF NewButton style](tab-management_images/wpf_newbuttonstyle.png)
 
-## Keyboard shortcuts
+## Keyboard Shortcuts
 
-- `Ctrl + Tab` — move to the next tab.
-- `Ctrl + Shift + Tab` — move to the previous tab.
-- `Ctrl + T` — create a new `SfTabItem` (programmatic shortcut).
-- Mouse middle‑click on a `SfTabItem` header — close that tab.
+The Tabbed Window provides built‑in keyboard and mouse shortcuts for efficient tab navigation and management:
 
+- Ctrl + Tab - Switch to the next tab.
+- Ctrl + Shift + Tab - Switch to the previous tab.
+- Ctrl + T - Create a new tab.
+- Middle mouse click on a tab header - Close the tab.
diff --git a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif
index 00f1e3a0c1..a501c483a7 100644
Binary files a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif and b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif differ
diff --git a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif
index 86bd7baae1..5acc685e37 100644
Binary files a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif and b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif differ
diff --git a/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png b/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png
index ed5c7810e9..808e4032c5 100644
Binary files a/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png and b/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png differ
diff --git a/wpf/Welcome-to-Syncfusion-Essential-WPF.md b/wpf/Welcome-to-Syncfusion-Essential-WPF.md
index 3e4cbbf7d5..ddbfc478a8 100644
--- a/wpf/Welcome-to-Syncfusion-Essential-WPF.md
+++ b/wpf/Welcome-to-Syncfusion-Essential-WPF.md
@@ -201,7 +201,7 @@ N> The name of the Visual Studio Toolbox entry provided when the common control
 			FILE VIEWERS & EDITORS<br/>
 		</td>	
 		<td>
-			<a href="https://help.syncfusion.com/wpf/pdf-viewer/getting-started" >PDF Viewer</a><br/>
+			<a href="https://help.syncfusion.com/document-processing/pdf/pdf-viewer/wpf/getting-started" >PDF Viewer</a><br/>
 		</td>
 	</tr>
 	<tr>
@@ -213,7 +213,7 @@ N> The name of the Visual Studio Toolbox entry provided when the common control
 	</tr>
 	<tr>
 		<td>
-			<a href="https://help.syncfusion.com/wpf/richtextbox/getting-started" >RichTextBox</a><br/>
+			<a href="https://help.syncfusion.com/document-processing/word/word-processor/wpf/getting-started" >RichTextBox</a><br/>
 		</td>
 	</tr>
 	<tr>
@@ -231,17 +231,17 @@ N> The name of the Visual Studio Toolbox entry provided when the common control
 	</tr>	
     <tr>
 		<td>
-			<a href="https://help.syncfusion.com/file-formats/pdf/create-pdf-file-in-wpf" >PDF</a><br/>
+			<a href="https://help.syncfusion.com/document-processing/pdf/pdf-library/net/create-pdf-file-in-wpf" >PDF</a><br/>
 		</td>
 	</tr>
     <tr>
 	    <td>
-			<a href="https://help.syncfusion.com/file-formats/docio/getting-started" >Word</a><br/>
+			<a href="https://help.syncfusion.com/document-processing/word/word-library/net/getting-started" >Word</a><br/>
 		</td>
 	</tr>
     <tr>
 	    <td>
-			<a href="https://help.syncfusion.com/file-formats/presentation/getting-started" >PowerPoint</a><br/>
+			<a href="https://help.syncfusion.com/document-processing/powerpoint/powerpoint-library/net/getting-started" >PowerPoint</a><br/>
 		</td>
 	</tr>
     <tr>