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