Bar chart demos updated.

Author: gvreddy04

BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayoutBaseFooter.razor

@@ -10,7 +10,7 @@
                            Dimension="ImageDimension.Is32x32"
                            alt="BlazorExpress Logo" />
                 </div>
-                <div class="is-size-4">BlazorExpress.Bulma</div>
+                <div class="is-size-4">@StringConstants.NugetPackageName</div>
             </div>
             <div class="is-size-6 mb-2">
                 Designed and built with <i class="bi bi-heart-fill has-text-danger"></i> by the <b>BlazorExpress</b> team and our contributors.

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor

@@ -27,19 +27,27 @@
     <Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Horizontal bar chart" PageUrl="@pageUrl" Link="horizontal-bar-chart">
 <Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" />
+</Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" Link="stacked-bar-chart">
 <Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" />
+</Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Stacked bar chart with data labels" PageUrl="@pageUrl" Link="stacked-bar-chart-with-data-labels">
 <Demo Type="typeof(BarChart_Demo_04_Stacked_BarChart_with_Datalabels)" />
+</Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" Link="locale">
 <Demo Type="typeof(BarChart_Demo_05_Locale)" />
+</Section>
 
 @code {
     private const string pageUrl = RouteConstants.Demos_BarChart;
     private const string pageTitle = "Bar Chart";
-    private const string pageDescription = "The <code>Bar Chart</code> component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.";
+    private const string pageDescription = "The <code>Bar Chart</code> component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
     private const string metaTitle = "Blazor Bar Chart";
-    private const string metaDescription = "A Blazor bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+    private const string metaDescription = "The Bar Chart component displays data values as vertical bars, making it easy to compare multiple data sets or visualize trends over time.";
     private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update
-}
+}

BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChart_Demo_01_Examples.razor

@@ -1,11 +1,11 @@
 <BarChart @ref="barChart" Width="600" />
 
 <div class="mt-5">
-    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await RandomizeAsync()"> Randomize </button>
-    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDatasetAsync()"> Add Dataset </button>
-    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await AddDataAsync()">Add Data</button>
-    <button class="btn btn-primary btn-sm mb-1" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</button>
-    <button class="btn btn-primary btn-sm" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</button>
+    <Button Color="ButtonColor.Primary" @onclick="async () => await RandomizeAsync()"> Randomize </Button>
+    <Button Color="ButtonColor.Link" @onclick="async () => await AddDatasetAsync()"> Add Dataset </Button>
+    <Button Color="ButtonColor.Info" @onclick="async () => await AddDataAsync()">Add Data</Button>
+    <Button Color="ButtonColor.Success" @onclick="async () => await ShowHorizontalBarChartAsync()">Horizontal Bar Chart</Button>
+    <Button Color="ButtonColor.Warning" @onclick="async () => await ShowVerticalBarChartAsync()">Vertical Bar Chart</Button>
 </div>
 
 @code {