Multiple series on a line chart create overlapping x-axis

[argium]

I'm having trouble explaining this so I'll try use visuals and code. I'm creating a simple chart where there's a single x-axis (time) and y-axis (decimal). The line has multiple disconnected segments that each need to be coloured differently. Each segment is on the same x-axis but at different, non-overlapping values.

This is what the end result should look like using Excel:

I'm trying to recreate this using ApexCharts. This is a basic example of the problem:

Data = new ChartData();
Data.Series.Add("Series1", [new(DateTime.Parse("2024-01-01"), 10), new(DateTime.Parse("2024-01-02"), 15), new(DateTime.Parse("2024-01-03"), 20)]);
Data.Series.Add("Series2", [new(DateTime.Parse("2024-01-04"), 20), new(DateTime.Parse("2024-01-05"), 15), new(DateTime.Parse("2024-01-06"), 10)]);

ChartOptions ??= new ApexChartOptions<DataPoint>();
ChartOptions.Chart.Width = 900;
ChartOptions.Chart.Height = 500;

    <ApexChart TItem="DataPoint" Title="Report" Options="@(ChartOptions)">
    @foreach (var series in Data.Series)
    {
        <ApexPointSeries TItem="DataPoint"
                            Items="@(series.Value)"
                            Name="@(series.Key)"
                            SeriesType="SeriesType.Line"
                            XValue="e => e.Time"
                            YValue="e=> e.Value"
                            />
    }
    </ApexChart>

Expected
There is a single x-axis from range(min(series1), max(series2)), and the two series are plotted one after the other along it.

Actual

Each series has its own x-axis which are overlayed on top of eachother.

---

If I combine all the values into a single ApexPointSeries, the x-axis is except:

1. Is there a way to colour sections of the line series differently?
2. The sharp vertical lines between every segment are incorrect.