apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js

Home Page:https://apexcharts.github.io/Blazor-ApexCharts

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug? Rangebar charts are not always displaying correct data when there are multiple items in a series with same X value but different dates

hannahihayes opened this issue · comments

I noticed this when working with my own data in my project, but have since been able to replicate it by adjusting the code on the demo website.

I would expect the code below to display a chart with two rows ('Validate' and 'Code') but with two distinct bars in the 'Validate' row. Instead it shows just the one.

If I switch the two activities.Add... etc lines for 'Validate' around, it displays the alternative date period for 'Validate' so it seems to be using whichever one it comes across first in the list and ignoring the other one.

This only seems to be an issue when the two dates for 'Validate' are 38 days or more apart. If I bring the two dates for 'Validate' closer together, the charts seems to be able to plot them both.

I am possibly pushing the use case here, which is why I am questioning whether it is a bug or not.

<ApexChart TItem="Activity"
           Title="Incident Severity"
           Options=optionsTest2
           Debug
            XAxisType="XAxisType.Datetime">

     @foreach (var personGroup in activities.GroupBy(e => e.Person))
    {
        <ApexRangeSeries TItem="Activity"
                         Items="personGroup"
                         XValue="@(e=> e.Name)"
                         YMinValue="@(e=> e.Start.ToUnixTimeMilliseconds())"
                         YMaxValue="@(e=> e.End.ToUnixTimeMilliseconds())"
                         Name="@personGroup.Key" />
    }

</ApexChart>


@code {

    private List<Activity> activities { get; set; } = new();
    private ApexChartOptions<Activity> optionsTest2;

    protected override void OnInitialized()
    {
        var date = DateTime.Now;
        activities.Add(new Activity { Person = "Bob", Name = "Code", Start = date.AddDays(-30), End = date.AddDays(-10) });
        activities.Add(new Activity { Person = "Bob", Name = "Validate", Start = date.AddDays(-67), End = date.AddDays(-58) });
        activities.Add(new Activity { Person = "Bob", Name = "Validate", Start = date.AddDays(-4), End = date.AddDays(5) });

        optionsTest2 = new ApexChartOptions<Activity>
            {
                PlotOptions = new PlotOptions
                {
                    Bar = new PlotOptionsBar
                    {
                        Horizontal = true,
                        RangeBarOverlap = true,
                        BarHeight = "80%"
                    }
                }
            };
    }

    private class Activity
    {
        public string Person { get; set; }
        public string Name { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
    }
}

Screenshot 2024-06-07 220439