Mixed chart with area / line config issue: broken gradient and zoom

[alex-fitplans]

Hello !

First of all, thanks for the amazing library :).

I would like to replicate the following codepen: https://codepen.io/alex-antro/pen/LYvByoV

You can see the graph should look like this (with a nice gradient and with correct zoom animations):

I currently have this code, but I have trouble setting up the gradient config, and the zoom animation is broken:

@using ApexCharts
@using ChartType = ApexCharts.ChartType
<div class=@Class>
    <ApexChart TItem="WeightData"
               Options="@_chartOptions">
        <ApexPointSeries TItem="WeightData"
                         Items="@_weightData"
                         SeriesType="@SeriesType.Area"
                         Name="Weight"
                         XValue="@(e => e.X)"
                         YValue="@(e => e.Y)"
                         Color="#0000ff"/>

        <ApexPointSeries TItem="WeightData"
                         Items="@_milestoneData"
                         SeriesType="@SeriesType.Line"
                         Name="Milestone"
                         XValue="@(e => e.X)"
                         YValue="@(e => e.Y)" 
                         Color="#ff0000"/>
    </ApexChart>
</div>

@code {
    private ApexChartOptions<WeightData> _chartOptions = default!;
    private List<WeightData> _weightData = default!;
    private List<WeightData> _milestoneData = default!;

    [Parameter]
    public string Class { get; set; } = "";

    protected override void OnInitialized()
    {
        InitializeChartOptions();
        LoadData();
    }

    private void InitializeChartOptions()
    {
        _chartOptions = new ApexChartOptions<WeightData>
        {
            Chart = new Chart
            {
                Type = ChartType.Area,
                Height = 400,
                Toolbar = new Toolbar { Show = false }
            },
            Stroke = new Stroke
            {
                Curve = new List<Curve> { Curve.Smooth, Curve.Straight },
                Width = new List<double> { 3, 3 },
                DashArray = new List<double> { 0, 5 }
            },
            Xaxis = new XAxis
            {
                Type = XAxisType.Datetime
            },
            Fill = new Fill
            {
                Type = new FillTypeSelections(FillType.Gradient, FillType.Solid),
                Gradient = new FillGradient
                {
                    ShadeIntensity = 1,
                    OpacityFrom = 0.7,
                    OpacityTo = 0.2,
                    Type = GradientType.Vertical,
                    Stops = new List<double> { 0, 90, 100 }
                }
            }
        };
    }
    private void LoadData()
    {
        _weightData = new List<WeightData>
        {
            new WeightData { X = DateTime.Parse("2024-01-01"), Y = 70 },
            new WeightData { X = DateTime.Parse("2024-02-01"), Y = 68 },
            new WeightData { X = DateTime.Parse("2024-03-01"), Y = 66 },
            new WeightData { X = DateTime.Parse("2024-04-01"), Y = 65 }
        };

        _milestoneData = new List<WeightData>
        {
            new WeightData { X = DateTime.Parse("2024-02-01"), Y = 68 },
            new WeightData { X = DateTime.Parse("2024-05-01"), Y = 60 }
        };
    }

    public class WeightData
    {
        public DateTime X { get; set; }
        public decimal? Y { get; set; }
    }
}

The result I get is the following:

Strangely, if I remove the second series, the gradient and the zoom both work fine. What am I missing ?

Thanks in advance :)

[alex-fitplans]

I used the debug flag to check the full config generated by Blazor-ApexCharts, and replicated it in this codePen: https://codepen.io/alex-antro/pen/zYXLjvN

And strangely, everything works as expected there.

[alex-fitplans]

The issue mysteriously disappeared after upgrading all my nuget packages in the solution