feat(Chart): support change grid line color

src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj

@@ -29,7 +29,7 @@
     <PackageReference Include="BootstrapBlazor.BaiduOcr" Version="7.1.1" />
     <PackageReference Include="BootstrapBlazor.BarCode" Version="7.1.5" />
     <PackageReference Include="BootstrapBlazor.Bluetooth" Version="7.1.0" />
-    <PackageReference Include="BootstrapBlazor.Chart" Version="7.6.0" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="7.6.1" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="7.2.1" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="7.0.12" />
     <PackageReference Include="BootstrapBlazor.FileViewer" Version="7.0.3" />

src/BootstrapBlazor.Shared/Samples/Charts/Line.razor.cs

@@ -71,6 +71,17 @@ private Task<ChartDataSource> OnInit(float tension, bool hasNull)
         ds.Options.LegendLabelsFontSize = 16;
         ds.Options.X.Title = "days";
         ds.Options.Y.Title = "Numerical value";
+        ds.Options.XScalesBorderColor = "red";
+        ds.Options.YScalesBorderColor = "red";
+
+        ds.Options.XScalesGridColor = "blue";
+        ds.Options.XScalesGridTickColor = "blue";
+        ds.Options.XScalesGridBorderColor = "blue";
+
+        ds.Options.YScalesGridColor = "blue";
+        ds.Options.YScalesGridTickColor = "blue";
+        ds.Options.YScalesGridBorderColor = "blue";
+
         ds.Labels = Enumerable.Range(1, LineDataCount).Select(i => i.ToString());
         for (var index = 0; index < LineDatasetCount; index++)
         {

src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.6.0</Version>
+    <Version>7.6.1</Version>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Chart</PackageTags>
     <Description>Bootstrap UI components extensions of Chart.js</Description>
   </PropertyGroup>

src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js

@@ -86,6 +86,34 @@ const getChartOption = function (option) {
         }
     }
 
+    if (option.options.xScalesBorderColor) {
+        scale.x.border = {
+            color: option.options.xScalesBorderColor
+        }
+    }
+
+    if (option.options.yScalesBorderColor) {
+        scale.y.border = {
+            color: option.options.yScalesBorderColor
+        }
+    }
+
+    if (option.options.xScalesGridColor) {
+        scale.x.grid = {
+            color: option.options.xScalesGridColor,
+            borderColor: option.options.xScalesGridBorderColor,
+            tickColor: option.options.xScalesGridTickColor
+        }
+    }
+
+    if (option.options.yScalesGridColor) {
+        scale.y.grid = {
+            color: option.options.yScalesGridColor,
+            borderColor: option.options.yScalesGridBorderColor,
+            tickColor: option.options.yScalesGridTickColor
+        }
+    }
+
     let legend = {
         display: option.options.showLegend,
         position: option.options.legendPosition

src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs

@@ -113,4 +113,44 @@ public class ChartOptions
         { "pink", "rgb(255, 192, 203)" },
         { "violet", "rgb(238, 130, 238)" }
     };
+
+    /// <summary>
+    /// 获得/设置 X轴边界线颜色
+    /// </summary>
+    public string? XScalesBorderColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Y轴边界线颜色
+    /// </summary>
+    public string? YScalesBorderColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X轴网格线颜色
+    /// </summary>
+    public string? XScalesGridColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X轴网格边界线颜色
+    /// </summary>
+    public string? XScalesGridBorderColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X轴网格刻度线颜色
+    /// </summary>
+    public string? XScalesGridTickColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Y轴网格线颜色
+    /// </summary>
+    public string? YScalesGridColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X轴网格边界线颜色
+    /// </summary>
+    public string? YScalesGridBorderColor { get; set; }
+
+    /// <summary>
+    /// 获得/设置 X轴网格刻度线颜色
+    /// </summary>
+    public string? YScalesGridTickColor { get; set; }
 }