Added Stroke settings on series

Author: joadan

samples/ChartSamples/Pages/BasicCharts.razor

@@ -15,13 +15,14 @@
         <ApexChart TItem="Order" Title="Orders Net Value By Type"
                    OnDataPointSelection="DataPointSelected"
                    ChartType="@pieChartType">
- 
+
             <ApexSeries TItem="Order"
                         Items="Orders"
                         Name="Order Value"
                         XValue="@(e => e.OrderType)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
-                        ShowDataLabels="true" />
+                        ShowDataLabels="true" 
+                        />
         </ApexChart>
     </div>
 
@@ -48,14 +49,16 @@
                         Name="Gross Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.GrossValue))"
-                        OrderByDescending="e=>e.Y" />
+                        OrderByDescending="e=>e.Y"
+                        />
 
             <ApexSeries TItem="Order"
                         Items="Orders"
                         Name="Net Value"
                         XValue="@(e => e.Country)"
                         YAggregate="@(e => e.Sum(e => e.NetValue))"
-                        OrderByDescending="e=>e.Y" />
+                        OrderByDescending="e=>e.Y"
+                         />
 
         </ApexChart>
     </div>

samples/ChartSamples/Pages/SeriesOptionsSample.razor

@@ -0,0 +1,45 @@
+@page "/series-options"
+
+<h3>Series Options</h3>
+
+<p class="mb-3">
+
+    <ul>
+        <li>Use the Stroke setting on the series to control color, width and dash settings</li>
+        <li>Use ShowDataLabels to show the datalabels on each value</li>
+    </ul>
+
+    
+    Please note that the color must be either hex or rgb/rgba format. Color names are not accepted at the moment in apexchart.js.
+</p>
+
+<ApexChart TItem="Order"
+           Title="Order Net Value"
+           ChartType="@ChartType.Line">
+
+    <ApexSeries TItem="Order"
+                Items="Orders"
+                Name="Gross Value"
+                XValue="@(e => e.Country)"
+                YAggregate="@(e => e.Sum(e => e.GrossValue))"
+                OrderByDescending="e=>e.Y"
+                Stroke="@(new ApexCharts.SeriesStroke { Color = "#FF0000", DashSpace = 0, Width = 5 })"
+                ShowDataLabels
+                />
+    
+
+    <ApexSeries TItem="Order"
+                Items="Orders"
+                Name="Net Value"
+                XValue="@(e => e.Country)"
+                YAggregate="@(e => e.Sum(e => e.NetValue))"
+                OrderByDescending="e=>e.Y"
+                Stroke="@(new ApexCharts.SeriesStroke { Color = "#000080", DashSpace = 3, Width = 3 })" />
+
+</ApexChart>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders();
+
+
+}

samples/ChartSamples/Properties/launchSettings.json

@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "Blazor-ApexCharts/sparklines",
+      "launchUrl": "Blazor-ApexCharts/series-options",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

samples/ChartSamples/Shared/NavMenu.razor

@@ -33,13 +33,21 @@
             </NavLink>
         </li>
 
+
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="series-options">
+                <span class="oi oi-resize-width" aria-hidden="true"></span>Series options
+            </NavLink>
+        </li>
+
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="render-chart">
                 <span class="oi oi-reload" aria-hidden="true"></span>Render Chart
             </NavLink>
         </li>
 
-      
+
+
 
     </ul>
 </div>

src/Blazor-ApexCharts/ApexBubbleSeries.cs

@@ -20,6 +20,7 @@ public class ApexBubbleSeries<TItem> : ComponentBase, IDisposable where TItem :
         [Parameter] public Expression<Func<BubblePoint<TItem>, object>> OrderBy { get; set; }
         [Parameter] public Expression<Func<BubblePoint<TItem>, object>> OrderByDescending { get; set; }
         [Parameter] public bool ShowDataLabels { get; set; }
+        [Parameter] public string Color { get; set; }
         [Parameter] public IEnumerable<TItem> Items { get; set; }
         private readonly Series<TItem> series = new Series<TItem>();
         protected override void OnParametersSet()
@@ -28,7 +29,7 @@ protected override void OnParametersSet()
 
             series.Name = Name;
             series.ShowDataLabels = ShowDataLabels;
-
+            
             //var xCompiled = XValue.Compile();
             //IEnumerable<BubblePoint<TItem>> datalist;
             //if (YAggregate == null)

src/Blazor-ApexCharts/ApexChart.razor.cs

@@ -16,7 +16,7 @@ public partial class ApexChart<TItem> : IDisposable where TItem : class
         [Parameter] public RenderFragment ChildContent { get; set; }
         [Parameter] public ApexChartOptions<TItem> Options { get; set; } = new ApexChartOptions<TItem>();
         [Parameter] public string Title { get; set; }
-        
+
         [Parameter]
         public ChartType ChartType
         {
@@ -84,6 +84,29 @@ protected override void OnParametersSet()
             }
         }
 
+        private void SetStroke()
+        {
+            if (Options?.Series == null) { return; }
+            if (Options.Series.All(e => (e.Stroke == null))) { return; }
+
+            if (Options.Stroke == null) { Options.Stroke = new Stroke(); }
+
+            var strokeWidths = new List<int>();
+            var strokeColors = new List<string>();
+            var strokeDash = new List<int>();
+            foreach (var series in Options.Series)
+            {
+                strokeWidths.Add(series.Stroke?.Width ?? 4); // 
+                strokeColors.Add(series.Stroke?.Color ?? "#d3d3d3"); //Default is light gray
+                strokeDash.Add(series.Stroke?.DashSpace ?? 0);
+            }
+
+            Options.Colors = strokeColors;
+            Options.Stroke.Width = strokeWidths;
+            Options.Stroke.Colors = strokeColors;
+            Options.Stroke.DashArray = strokeDash;
+        }
+
         private void SetDatalabels()
         {
             if (Options?.Series == null) { return; }
@@ -160,6 +183,7 @@ public void FixLineDataSelection()
         public async Task Render()
         {
             ForceRender = false;
+            SetStroke();
             SetDatalabels();
             FixLineDataSelection();
             UpdateDataForNoAxisCharts();

src/Blazor-ApexCharts/ApexSeries.cs

@@ -21,14 +21,16 @@ public class ApexSeries<TItem> : ComponentBase, IDisposable where TItem : class
         [Parameter] public Expression<Func<DataPoint<TItem>, object>> OrderByDescending { get; set; }
         [Parameter] public bool ShowDataLabels { get; set; }
         [Parameter] public IEnumerable<TItem> Items { get; set; }
+        [Parameter] public SeriesStroke Stroke { get; set; }
+
         private readonly Series<TItem> series = new Series<TItem>();
         private IEnumerable<DataPoint<TItem>> currentDatalist;
 
         protected override async Task OnParametersSetAsync()
         {
             series.Name = Name;
             series.ShowDataLabels = ShowDataLabels;
-
+            series.Stroke = Stroke;
             var xCompiled = XValue.Compile();
             IEnumerable<DataPoint<TItem>> datalist;
             if (YAggregate == null)

src/Blazor-ApexCharts/Models/Series.cs

@@ -29,5 +29,7 @@ public class Series<TItem>
 
         [JsonIgnore]
         public bool ShowDataLabels { get; set; }
+        [JsonIgnore]
+        public SeriesStroke Stroke { get; set; }
     }
 }

src/Blazor-ApexCharts/Models/SeriesStroke.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ApexCharts
+{
+    public class SeriesStroke
+    {
+        public string Color { get; set; }
+        public int DashSpace { get; set; }
+        public int Width { get; set; }
+    }
+}

src/Blazor-ApexCharts/wwwroot/js/blazor-apex-charts.js

@@ -13,6 +13,7 @@
     renderChart(dotNetObject, container, options) {
         var options = JSON.parse(options);
 
+        console.log(options);
         if (options.debug == true) {
             console.log(options);
         }