diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor
index 10836ef2..e8a330d9 100644
--- a/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/LineCharts.razor
@@ -50,4 +50,10 @@
+
+
+
+
+
+
diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/PointMutate.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/PointMutate.razor
new file mode 100644
index 00000000..85aa54e8
--- /dev/null
+++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/LineCharts/PointMutate.razor
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+@code {
+ private List Orders { get; set; } = SampleData.GetOrders().Where(n => n.Country == "Sweden").ToList();
+
+ private ApexChartOptions options = new ApexCharts.ApexChartOptions()
+ {
+ Markers = new Markers
+ {
+ Size = 6,
+ FillOpacity = 1,
+ StrokeWidth = 2,
+ StrokeColors = new List { "#FFFFFF" },
+ Colors = new List { "#0000FF" },
+ StrokeOpacity = 1d
+ }
+ };
+
+ private void MutateDataPoint(DataPoint point)
+ {
+ var max = Orders.Max(e => e.GrossValue);
+
+ if (point.Items.Any(n => n.GrossValue == max))
+ {
+ point.FillColor = "#FF0000";
+ point.StrokeColor = "#00FFFF";
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs b/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs
index b94dc3fb..11d7905e 100644
--- a/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs
+++ b/src/Blazor-ApexCharts/Models/DataPoints/DataPoint.cs
@@ -12,8 +12,13 @@ public class DataPoint : IDataPoint
///
public string FillColor { get; set; }
- ///
- public object X { get; set; }
+ ///
+ /// Controls the color of the border around the data point
+ ///
+ public string StrokeColor { get; set; }
+
+ ///
+ public object X { get; set; }
///
/// A collection of goal markers to display with the data point