Merge pull request #630 from PeerConradi/master

StrokeColor added to mutator and Mutator example in LineChart

Author: joadan

docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor

@@ -50,4 +50,10 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="Point Mutator" ClassName=@typeof(PointMutate).ToString()>
+        <Snippet>
+            <PointMutate />
+        </Snippet>
+    </CodeSnippet>
+
 </DocExamples>

docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/PointMutate.razor

@@ -0,0 +1,43 @@
+<DemoContainer>
+    <ApexChart TItem="Order"
+               Title="Order Net Value" Options="@options">
+
+        <ApexPointSeries TItem="Order"
+                         Items="Orders"
+                         Name="Gross Value"
+                         
+                         SeriesType="SeriesType.Line"
+                         XValue="@(e => e.OrderDate)"
+                         YValue="@(e => e.GrossValue)"
+                         DataPointMutator="MutateDataPoint"
+                         OrderByDescending="e=>e.Y" />
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<Order> Orders { get; set; } = SampleData.GetOrders().Where(n => n.Country == "Sweden").ToList();
+
+    private ApexChartOptions<Order> options = new ApexCharts.ApexChartOptions<Order>()
+    {
+        Markers = new Markers
+        {
+            Size = 6,
+            FillOpacity = 1,
+            StrokeWidth = 2,
+            StrokeColors = new List<string> { "#FFFFFF" },
+            Colors = new List<string> { "#0000FF" },
+            StrokeOpacity = 1d
+        }
+    };
+
+    private void MutateDataPoint(DataPoint<Order> point)
+    {
+        var max = Orders.Max(e => e.GrossValue);
+
+        if (point.Items.Any(n => n.GrossValue == max))
+        {
+            point.FillColor = "#FF0000";
+            point.StrokeColor = "#00FFFF";
+        }
+    }
+}

src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs

@@ -12,8 +12,13 @@ public class DataPoint<TItem> : IDataPoint<TItem>
         /// <inheritdoc cref="IDataPoint{TItem}.FillColor"/>
         public string FillColor { get; set; }
 
-        /// <inheritdoc cref="IDataPoint{TItem}.X"/>
-        public object X { get; set; }
+		/// <summary>
+		/// Controls the color of the border around the data point
+		/// </summary>
+		public string StrokeColor { get; set; }
+
+		/// <inheritdoc cref="IDataPoint{TItem}.X"/>
+		public object X { get; set; }
 
         /// <summary>
         /// A collection of goal markers to display with the data point