Add annotation point to range bar chart when Horizontal = true

[PatTheLad]

Follow up issue to #246

I cant add point annotations so my chart because the Y Value only supports double.
X Axis annotation works flawless.

Trying to add annotation points (doesnt work because y only support double and x axis is the wrong axis)

annotationsPointList.Add(new AnnotationsPoint()
                        {
                            X = (long)(new DateTime(date.Year, date.Month, date.Day, 03, 00, 00).ToUnixTimeMilliseconds()),
                            Y = maschine,
                            Label = new ApexCharts.Label
                            {
                                Text = timeStampCount,
                                Style = new ApexCharts.Style
                                {
                                    FontSize = "110%", 
                                    Background=Config.GetActivePalette().Dark.Value,
                                    Color=Config.GetActivePalette().White.Value
                                }
                            }
                        });

Working Code for annotation x axis

annotationsXAxisList.Add(
                new AnnotationsXAxis
                {
                    X = (long)(new DateTime(date.Year, date.Month, date.Day, 00, 00, 00).ToUnixTimeMilliseconds()),
                    X2 = (long)(new DateTime(date.Year, date.Month, date.Day, 06, 00, 00).ToUnixTimeMilliseconds()),
                    FillColor = "gray",
                });

Code from chart

<ApexChart @ref=_chart TItem="MaschinenTimeStamp" Options=_options XAxisType="XAxisType.Datetime">
        @foreach (List<MaschinenTimeStamp> tmpList in _incidentListe)
        {
            <ApexRangeSeries TItem="MaschinenTimeStamp"
                             Items="tmpList"
                             XValue="@(e => e.Maschine)"
                             YValue="@(e =>e.Time.ToUnixTimeMilliseconds())"
                             Color="@Config.GetActivePalette().Info.Value" />
        }
    </ApexChart>

Chart options

_options = new ApexChartOptions<MaschinenTimeStamp>
        {
            PlotOptions = new PlotOptions
            {
                Bar = new PlotOptionsBar
                {
                    Horizontal = true,
                    RangeBarGroupRows = true,   //Group data
                }
            },
            Tooltip = new ApexCharts.Tooltip
            {
                X = new TooltipX
                {
                    Format = "hh:mm",
                }  
            },
            Theme = Config.ChartTheme,
            Legend = new ApexCharts.Legend { Show = false },
            Chart = new ApexCharts.Chart {
                Background = "#ffffff00",
                Height = "100%",
                Animations = new Animations { Enabled = false },
            }
        };

Thanks to everyone in advance!

[olekssokol]

Hello, @PatTheLad. Thank you for your question. It helped me solve my problem (it was similar to yours).
I added an Id to my items and replaced XValue in the ApexRangeSeries with the Id, and in Annotations X is the Y from the ApexRangeSeries (because we flipped the table as you said in #246) and for Y in Annotations I use XValue, i.e. the Id of my items.
And to display privileged values instead of IDs, I replaced this in YAxis. Although the text doesn't fit completely, I'm still working on it.
Please give me your opinion, maybe together we can find a better solution.

You can copy this test component in its entirety to try out

<ApexChart TItem="ChartData"
           Title="Exposure vs SAA"
           Options="options">

    <ApexRangeSeries TItem="ChartData"
                     Items="data"
                     XValue="@(e => e.Id)"
                     YMinValue="@(e => e.MinExposure)"
                     YMaxValue="@(e => e.MaxExposure)"
                     Color="#FFFF00" />
</ApexChart>

@code {
private List data { get; set; } = new List
{
new ChartData { Id = 1, Category = "Private Equity", MinExposure = 20, MaxExposure = 30, Value = 25},
new ChartData { Id = 2, Category = "Commodities", MinExposure = 10, MaxExposure = 20, Value = 15},
new ChartData { Id = 3, Category = "Alternatives", MinExposure = 5, MaxExposure = 15, Value = 10},
new ChartData { Id = 4, Category = "Fixed Income", MinExposure = 5, MaxExposure = 25, Value = 20},
new ChartData { Id = 5, Category = "Equity", MinExposure = 40, MaxExposure = 80, Value = 60}
};

private ApexChartOptions<ChartData> options;

protected override void OnInitialized()
{
    var categories = string.Join(",", data.Select(d => $"'{d.Category}'"));

    options = new ApexChartOptions<ChartData>
        {
            PlotOptions = new PlotOptions
            {
                Bar = new PlotOptionsBar
                {
                    Horizontal = true
                }
            },
            Yaxis = new List<YAxis>
        {
            new YAxis
            {
                Labels = new YAxisLabels
                {
                    Formatter = $"function(val) {{ var categories = [{categories}]; return categories[val - 1]; }}"
                }
            }
        },
            Annotations = new Annotations
            {
                Points = data.Select(e => new AnnotationsPoint
                {
                    X = e.Value,
                    Y = (double)e.Id,
                    Marker = new()
                    {
                        Size = 5,
                        FillColor = "#FF0000"
                    }
                }).ToList()
            }
        };
}

public class ChartData
{
    public decimal Id { get; set; }
    public string Category { get; set; }
    public decimal MinExposure { get; set; }
    public decimal MaxExposure { get; set; }
    public decimal Value { get; set; }
}

}

[PatTheLad]

Hi, @olekssokol

code looks good to me.
Maybe the FormatYAxisLabel prop from the chart could help with the cut off labels (didnt really have the time to test your code yet).
Going to test your code and provide more feedback in the following days.

I also had the same idea for the workaround but sadly when you use the zoom option the labels go back to numbers,
so its no option for me.