I am working on a Blazor Project Web App (Hybrid). Currently, I’m trying to create a stats card that has a graph on it. To make it more nicer, I wanted to add an annotation point on the graph to look something like this:

But, currently this annotation point was achieved based on coordinate X=60, Y=35 value. what I want to achieve is more like I have a set of days on the X-axis from Monday to Sunday, and a set of waterflow values on the Y-axis. So I create a function to get the day with the highest waterflow and I want to set the annotation point on that day. Currently this is the method I’m using to try and achieve this. However, eventhough I am getting the day with the highest waterflow, I can’t map that value to the X and Y value. I look for tutorials online, but there isn’t anything helpful so I’m reaching out here. Is there a way around this?

<ApexChart TItem="WeekData"
           Options="options">

    <ApexPointSeries TItem="WeekData"
                     Items="Data"
                     SeriesType="SeriesType.Area"
                     XValue="e => e.Days"
                     YValue="e => e.Waterflow"/>

</ApexChart>

@code {

    private List<WeekData> Data { get; set; } = new();

    private ApexChartOptions<WeekData> options = new ApexChartOptions<WeekData>();

    protected override void OnInitialized()
    {
        options.Yaxis = [new YAxis { Min=0, Show = false, },];

        options.Xaxis = new XAxis 
        { 
            Type = XAxisType.Category,

            Categories = Data.Select(d =>d.Days).ToList(),

            Labels = new XAxisLabels { Show = false }, 

            AxisTicks = new AxisTicks { Show =  false},
        };

        options.Grid = new Grid { Show = false };

        options.Tooltip = new Tooltip { Enabled = false };

        options.Legend = new Legend
        {
            Show = false,   
        };

        options.Stroke = new Stroke
        {
            Curve = Curve.Smooth
        };

        options.Chart = new Chart
        {
            Height = "105%",
            Width = "110px",
            //FontFamily = "Roboto Medium",
            ParentHeightOffset = 0,
            Toolbar = new Toolbar {Show = false},
            Zoom = new Zoom {Enabled = false},
        };

        options.Colors = new List<string> { "#6C79F4" };

        options.Fill = new Fill
        {
            Type = new List<FillType> { FillType.Gradient },
            Gradient = new FillGradient
            {
                ShadeIntensity = 0.5,
                OpacityFrom = 0.7,
                OpacityTo = 0.2,
                Type = GradientType.Vertical,

            }
        };

        Data.Add(new WeekData { Days = "Mon", Waterflow = 15 });
        Data.Add(new WeekData { Days = "Tue", Waterflow = 10 });
        Data.Add(new WeekData { Days = "Wed", Waterflow = 25 });
        Data.Add(new WeekData { Days = "Thu", Waterflow = 20 });
        Data.Add(new WeekData { Days = "Fri", Waterflow = 35 });
        Data.Add(new WeekData { Days = "Sat", Waterflow = 30 });
        Data.Add(new WeekData { Days = "Sun", Waterflow = 32 });

        SetAnnotationsBasedOnData();

    }

    public class WeekData
    {
        public string Days { get; set; }

        public int Waterflow { get; set; }
    }

    private void SetAnnotationsBasedOnData()
    {
        var maxDataPoint = Data.OrderByDescending(d => d.Waterflow).First();

        Console.WriteLine($"Setting annotation at X: {maxDataPoint.Days}, Y: {maxDataPoint.Waterflow}");

        options.Annotations = new Annotations
            {
                Points = new List<AnnotationsPoint>
            {
                new AnnotationsPoint
                {
                    //X = maxDataPoint.Days,  I want to use this instead
                    //Y = maxDataPoint.Waterflow, and this

                    X = 60, //this is the current method being used to achieve the image
                    Y = 35, //this is the current method being used to achieve the image

                    Label = new Label
                    {
                        Text = $"↗ {maxDataPoint.Waterflow}%",
                        BorderColor = "transparent",
                        Style = new Style
                        {
                            Background = "transparent",
                            Color = "#6C79F4",
                            FontFamily = "Roboto Medium",
                        }
                    },
                    Marker = new AnnotationMarker
                    {
                        FillColor = "#6C79F4",
                        StrokeColor = "white",
                        Size = 5,
                    }
                }
                
            }
        };

    }
}