#828 Formaring updated

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -6,33 +6,33 @@
 
 <h1>Blazor Line Chart</h1>
 <div class="lead mb-3">
-  A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
-  It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
+    A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time.
+    It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.
 </div>
 
 <CarbonAds />
 
 <SectionHeading Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
 <div class="mb-3">
-  Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
 </div>
 
 <SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
-  In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
+    In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
 </div>
 <Callout Heading="TIP" Color="CalloutColor.Success">
-  For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
-  These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+    For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
+    These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
 </Callout>
 <Demo Type="typeof(LineChart_Demo_01_A_Examples)" Tabs="true" />
 <div class="my-3"></div>
 <Demo Type="typeof(LineChart_Demo_01_B_Examples)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
 <div class="my-3">
-  By default, the chart is using the default locale of the platform on which it is running.
-  In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
+    By default, the chart is using the default locale of the platform on which it is running.
+    In the following example, you will see the chart in the <b>German</b> locale (<b>de_DE</b>).
 </div>
 <Demo Type="typeof(LineChart_Demo_02_Locale)" Tabs="true" />
 
@@ -49,8 +49,8 @@
 <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 
 @code {
-  private readonly string pageUrl = "/charts/line-chart";
-  private readonly string title = "Blazor Line Chart";
-  private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
-  private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+    private readonly string pageUrl = "/charts/line-chart";
+    private readonly string title = "Blazor Line Chart";
+    private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+    private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_06_Dataset_Fill.razor

@@ -1,4 +1,4 @@
-<LineChart Height="200" @ref="lineChart" Width="500"/>
+<LineChart Height="200" @ref="lineChart" Width="500" />
 
 <div class="mt-5">
     <Button Color="ButtonColor.Primary" @onclick="async () => await NoFillAsync()" Size="ButtonSize.Small" Type="ButtonType.Button"> No fill</Button>
@@ -107,17 +107,17 @@
         datasetsCount += 1;
 
         return new LineChartDataset
-               {
-                   Label = $"Team {datasetsCount}",
-                   Data = GetRandomData(),
-                   BackgroundColor = c.ToRgbString(),
-                   BorderColor = c.ToRgbString(),
-                   BorderWidth = 2,
-                   HoverBorderWidth = 4
-    // PointBackgroundColor = c.ToRgbString(),
-    // PointRadius = 0, // hide points
-    // PointHoverRadius = 4,
-               };
+            {
+                Label = $"Team {datasetsCount}",
+                Data = GetRandomData(),
+                BackgroundColor = c.ToRgbString(),
+                BorderColor = c.ToRgbString(),
+                BorderWidth = 2,
+                HoverBorderWidth = 4
+                // PointBackgroundColor = c.ToRgbString(),
+                // PointRadius = 0, // hide points
+                // PointHoverRadius = 4,
+            };
     }
 
     private List<double?> GetRandomData()