apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
784 stars 91 forks source link

XAxis Annotation cannot display for DateTime XAxis. #398

Closed annLiu310 closed 5 months ago

annLiu310 commented 7 months ago

I have a chart with DateTime XAxis. I try to add the AnnotationsXAxis, X set to the DateTime value. but the AnnotationsXAxis cannot be shown

Example:

`

<ApexChart TItem="TimeSeries" Title="Value" Options=options1 Height="150" XAxisType="XAxisType.Datetime">

    <ApexPointSeries TItem="TimeSeries" Items="data"
                     Name="Value" SeriesType="SeriesType.Line" XValue="@(e => e.Date)"  YValue="@(e => e.Value)" 
   OrderBy="e=>e.X" Stroke="@(new SeriesStroke { Width = 2, Color="#1F15E5"})" />
</ApexChart> 

@code { private List data { get; set; } = new TimeSeriesGenerator(100).TimeSeries; private ApexChartOptions options1 = new(); private ApexChartOptions options2 = new();

protected override void OnInitialized()
{
    const string groupName = "SyncGroup"; 
    var testAnotation = data[50].Date; 

    options1.Annotations = new Annotations
        {
            Xaxis = new List<AnnotationsXAxis> { new AnnotationsXAxis
                    {
                       Label = new Label {
                            Text = "X Annotation",
                            Style = new Style{ Background="red" }
                       },
                       X = testAnotation ,
                       // X2 = testAnotation.AddDays(2) ,
                       StrokeDashArray = 2,
                       BorderColor = "red"
                    }
                    },

            Yaxis = new List<AnnotationsYAxis> { new AnnotationsYAxis
                    {
                        Label = new Label
                        {
                            Text = "Y Annotation",
                            Style = new Style { Background = "blue", Color="white"}
                        },
                        Y = 50,
                        BorderColor = "blue",
                        StrokeDashArray = 0
                    }
                    }
        };
}
}`
joadan commented 7 months ago

Hi, I added a sample at https://apexcharts.github.io/Blazor-ApexCharts/features/annotations#datetime