Bar Chart: Border radius demos added.

Author: gvreddy04

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

@@ -91,6 +91,13 @@
     <Demo Type="typeof(BarChart_Demo_05_Locale)" Tabs="true" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H4" Name="Border radius" PageUrl="@pageUrl" Link="border-radius">
+    <Block>
+        TODO: Update the description once the demo is implemented.
+    </Block>
+    <Demo Type="typeof(BarChart_Demo_06_Border_Radius)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = DemoRouteConstants.Demos_BarChart;
     private const string pageUrl2 = DemoRouteConstants.Demos_Prefix;

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

@@ -0,0 +1,125 @@
+<BarChart @ref="barChart" Width="600" />
+
+<div class="mt-5">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="RandomizeAsync"> Randomize </Button>
+</div>
+
+@code {
+    private BarChart barChart = default!;
+    private BarChartOptions barChartOptions = default!;
+    private ChartData chartData = default!;
+
+    private int datasetsCount = 0;
+    private int labelsCount = 0;
+    private string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
+    private Random random = new();
+
+    protected override void OnInitialized()
+    {
+        chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
+        barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await barChart.InitializeAsync(chartData, barChartOptions);
+        }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private async Task RandomizeAsync()
+    {
+        if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any()) return;
+
+        var newDatasets = new List<IChartDataset>();
+
+        foreach (var dataset in chartData.Datasets)
+        {
+            if (dataset is BarChartDataset barChartDataset
+                && barChartDataset is not null
+                && barChartDataset.Data is not null)
+            {
+                var count = barChartDataset.Data.Count;
+
+                var newData = new List<double?>();
+                for (var i = 0; i < count; i++)
+                {
+                    newData.Add(NewRandom());
+                }
+
+                barChartDataset.Data = newData;
+                newDatasets.Add(barChartDataset);
+            }
+        }
+
+        chartData.Datasets = newDatasets;
+
+        await barChart.UpdateAsync(chartData, barChartOptions);
+    }
+
+    #region Data Preparation
+
+    private List<IChartDataset> GetDefaultDataSets(int numberOfDatasets)
+    {
+        var datasets = new List<IChartDataset>();
+
+        for (var index = 0; index < numberOfDatasets; index++)
+        {
+            datasets.Add(GetRandomBarChartDataset());
+        }
+
+        return datasets;
+    }
+
+    private BarChartDataset GetRandomBarChartDataset()
+    {
+        var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+
+        datasetsCount += 1;
+
+        return new BarChartDataset()
+        {
+            Label = $"Product {datasetsCount}",
+            Data = GetRandomData(),
+            BorderColor = new List<string> { c.ToRgbString() },
+            BackgroundColor = new List<string> { c.ToRgbaString(0.5) },
+            BorderWidth = new List<double> { 2 },
+            BorderRadius = new List<double> { 10 },
+            BorderSkipped = false
+        };
+    }
+
+    private List<double?> GetRandomData()
+    {
+        var data = new List<double?>();
+        for (var index = 0; index < labelsCount; index++)
+        {
+            data.Add(NewRandom());
+        }
+
+        return data;
+    }
+
+    private List<string> GetDefaultDataLabels(int numberOfLabels)
+    {
+        var labels = new List<string>();
+        for (var index = 0; index < numberOfLabels; index++)
+        {
+            labels.Add(GetNextDataLabel());
+        }
+
+        return labels;
+    }
+
+    private string GetNextDataLabel()
+    {
+        labelsCount += 1;
+        return months[labelsCount - 1];
+    }
+
+    private double NewRandom() => random.Next(-100, 100);
+
+    #endregion Data Preparation
+}

BlazorExpress.ChartJS/Models/ChartDataset/BarChart/BarChartDataset.cs

@@ -83,9 +83,19 @@ public class BarChartDataset : ChartDataset<double?>
     [ParameterTypeName("List<double>?")]
     public List<double>? BorderRadius { get; set; }
 
-    //BorderSkipped
-    //https://www.chartjs.org/docs/latest/charts/bar.html#styling
-    //https://www.chartjs.org/docs/latest/api/interfaces/BarControllerDatasetOptions.html#borderskipped
+    /// <summary>
+    /// This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. 
+    /// In general, this does not need to be changed except when creating chart types that derive from a bar chart.
+    /// Supported values are 'start', 'end', 'middle', 'bottom', 'left', 'top', 'right', 'false', and 'true'.
+    /// <para>
+    /// Default value is 'start'.
+    /// </para>
+    /// <see href="https://www.chartjs.org/docs/latest/charts/bar.html#styling" />
+    /// </summary>
+    [AddedVersion("1.2.0")]
+    [DefaultValue("start")]
+    [Description("This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart. <br />Supported values are <b>start</b>, <b>end</b>, <b>middle</b>, <b>bottom</b>, <b>left</b>, <b>top</b>, <b>right</b>, <b>false</b>, and <b>true</b>.")]
+    public object BorderSkipped { get; set; } = "start";
 
     /// <summary>
     /// The bar border width (in pixels).