Handle null values for multiple Y axis chart

My issue is, that I want to display two datasets with two different Y axis, when one of the values for the same X value can be null.

I have the following datastructure for this example:

    public class AmountRateItem
    {
        public DateTime Date { get; set; }
        public double? Amount { get; set; }
        public double? Rate { get; set; }
    }

The issue is, that there are days when there is an Amount data but no Rate data, end this causes some rendering problems. I tried a few different aproaches, but the following code was the closest I could get:

Code:

<ApexChart TItem="AmountRateItem"
           Title="Sample Data"
           Options="@options">

    <ApexPointSeries TItem="AmountRateItem"
                     Items="AmountRateItems"
                     Name="Amount"
                     SeriesType="SeriesType.Line"
                     XValue="@(e => e.Date.ToShortDateString())"
                     YValue="@(e =>(decimal?) e.Amount)"
                     OrderBy="e=>e.X" />

    <ApexPointSeries TItem="AmountRateItem"
                     Items="AmountRateItems"
                     Name="Rate"
                     SeriesType="SeriesType.Line"
                     XValue="@(e => e.Date.ToShortDateString())"
                     YValue="@(e =>(decimal?) e.Rate)"
                     OrderBy="e=>e.X" />
</ApexChart>

@code {
    [Parameter]
    [EditorRequired]
    public List<GetMeasurementDataDto> ActiveMeasurements { get; set; } = new();

    private ApexChartOptions<AmountRateItem> options;
    private IEnumerable<AmountRateItem> AmountRateItems;
    protected override void OnInitialized()
    {
        options = new ApexChartOptions<AmountRateItem>
            {
                    Yaxis = new List<YAxis> {
                new YAxis { Title = new AxisTitle{ Text = "Series A"  } },
                new YAxis { Title = new AxisTitle{ Text = "Series B"  }, Opposite = true },
            }
            };

        AmountRateItems = new List<AmountRateItem>() {
             new AmountRateItem {
                 Date = new DateTime(2021,11,13), Amount = 300, Rate = 8
             },
             new AmountRateItem {
                 Date = new DateTime(2021,11,16),  Rate = 7
             },
             new AmountRateItem {
                 Date = new DateTime(2021,11,21), Amount = 200, Rate = 6.3
             },
             new AmountRateItem {
                 Date = new DateTime(2021,11,27), Amount = 650
             },
             new AmountRateItem {
                 Date = new DateTime(2021,11,29), Amount = 700, Rate = 5
             },
             new AmountRateItem {
                 Date = new DateTime(2021,11,30), Rate = 8.3
             },
        };
    }

    public class AmountRateItem
    {
        public DateTime Date { get; set; }
        public double? Amount { get; set; }
        public double? Rate { get; set; }
    }
}

Result:

As you can se, when I pass a null, the chart does not render anything, and what I want to achieve is that the two closest points are connected with a straight line. So for example if there is {Amount/Date}: {5/2023.01.01}, {null,2023.01.02}, {10,2023.01.03} => this results in a chart with two connected points, not just two standalone points.

Is there a way to get the expected result?

apexcharts / Blazor-ApexCharts

Handle null values for multiple Y axis chart #388