Blazor apex charts null reference exception

Question

I have this code:

@if (loaded && weathers != null && weathers.Count() > 0 && !weathersLoading && options != null)
{
    <ApexChart TItem="object" 
               Title="Temperature Chart"
               Options=@options XAxisType="XAxisType.Category" Debug>

        <ApexPointSeries TItem="Data.Entities.Weather"
                         Items="weathers.Where(w => w.HighTemp != null)"
                         Name="High Temp"
                         SeriesType="SeriesType.Bar"
                         XValue="@(e => e.DateP)"
                         YValue="@(e => (decimal?)e.HighTemp)"                         
                         OrderBy="e => e.X" />        

        <ApexPointSeries TItem="Data.Entities.Weather"
                         Items="weathers.Where(w => w.LowTemp != null)"
                         Name="Low Temp"
                         SeriesType="SeriesType.Bar"
                         XValue="@(e => e.DateP)"
                         YValue="@(e => (decimal?)e.LowTemp)"
                         OrderBy="e => e.X" />
        
        @if (averages != null && averages.Count() > 0)
        {
            List<AvgHigh> avsH = averages.Select(g => new AvgHigh()
            {
                Date = weathers.First(lw => lw.Date.DayOfYear == g.Key).Date,
                AvgHighTemp = g.Average(w => w.HighTemp) ?? 0,
                DateP = Business.Home.GregorianToP2(
                    weathers.First(lw => lw.Date.DayOfYear == g.Key).Date).Substring(2)
            }).ToList();
            List<AvgLow> avsL = averages.Select(g => new AvgLow()
            {
                Date = weathers.First(lw => lw.Date.DayOfYear == g.Key).Date,
                AvgLowTemp = g.Average(w => w.LowTemp) ?? 0,
                DateP = Business.Home.GregorianToP2(
                    weathers.First(lw => lw.Date.DayOfYear == g.Key).Date).Substring(2)
            }).ToList();
        
            <ApexPointSeries TItem="AvgHigh"
                             Items="@avsH"
                             Name="Avg High"
                             SeriesType="SeriesType.Line"
                             XValue="@(e => e.DateP)"
                             YValue="@(e => (decimal?)e.AvgHighTemp)"
                             OrderBy="e=>e.X" />            

            <ApexPointSeries TItem="AvgLow"
                             Items="@avsL"
                             Name="Avg Low"
                             SeriesType="SeriesType.Line"
                             XValue="@(e => e.DateP)"
                             YValue="@(e => (decimal?)e.AvgLowTemp)"
                             OrderBy="e=>e.X" />            
                                        
        }
    </ApexChart>

@code {
 private ApexChartOptions<object> options = new ApexChartOptions<object>
    {
        Chart = new Chart
        {
            Stacked = true
        },
        PlotOptions = new PlotOptions
        {
            Bar = new PlotOptionsBar
            {
                Horizontal = false
            }
        },
        Colors = new List<string> { "#ffa500", "#4169e1", "#ff0000", "#ffffff" }
    };
}

While I debug and verify that all collections have values, But I get this error:

object reference not set to an instance of an object. at apexcharts.apexpointseries`1.oninitialized() at microsoft.aspnetcore.components.componentbase.runinitandsetparametersasync()

I am converting a working radzen blazor chart to apex chart because of stacked column chart it has. In blazor how to correct this?

Answer 1

As far as I know, you need identical TItem (type) inside a single ApexChart. So every ApexPointSeries TItem must also be the same as ApexChart TItem.

So change to

<ApexChart TItem="Data.Entities.Weather" 

and every point series needs:

<ApexPointSeries TItem="Data.Entities.Weather"

Variables avsH and avsL must also be of type Weather.

You will just need to rethink your data structure a bit.