We loaded the source for the simple area chart and when our MainLayout contains an section it will not render. When we remove the section it DOES render, but it throws an exception:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at System.Linq.Dynamic.Core.Parser.KeywordsHelper..ctor(ParsingConfig config)
at System.Linq.Dynamic.Core.Parser.ExpressionParser..ctor(ParameterExpression[] parameters, String expression, Object[] values, ParsingConfig parsingConfig)
at System.Linq.Dynamic.Core.DynamicQueryableExtensions.InternalOrderBy(IQueryable source, ParsingConfig config, String ordering, IComparer comparer, Object[] args)
at System.Linq.Dynamic.Core.DynamicQueryableExtensions.OrderBy(IQueryable source, ParsingConfig config, String ordering, Object[] args)
at System.Linq.Dynamic.Core.DynamicQueryableExtensions.OrderBy[DataItem](IQueryable`1 source, ParsingConfig config, String ordering, Object[] args)
at System.Linq.Dynamic.Core.DynamicQueryableExtensions.OrderBy[DataItem](IQueryable`1 source, String ordering, Object[] args)
at Radzen.Blazor.CartesianSeries`1.<SetParametersAsync>d__67[[THO.Web.Blazor.Pages.FooBar.DataItem, THO.Web.Blazor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
Our MainLayout looks like this:
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a href="https://my.krypti.io/" target="_blank">Patron Site</a>
</div>
<article class="content px-4">
<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />
@Body
@*<ErrorBoundary>
<ChildContent>
<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />
@Body
</ChildContent>
<ErrorContent>
<RedirectToLogin />
</ErrorContent>
</ErrorBoundary>*@
</article>
</main>
</div>
As you can see, we have commented out the Error checking which is the only way we can get past the thrown exception.
The chart does render, but we must use the Error section to capture other issues and redirect to login.
The page is a cut / paste from your sample with no changes.
@page "/area-chart"
@using System.Globalization
<h1>Radzen Blazor Chart with area series</h1>
<div class="container my-5">
<div class="row">
<div class="col">
<RadzenCard Class="w-100 mb-4" >
<RadzenCheckBox @bind-Value="@smooth" Name="smooth"></RadzenCheckBox>
<RadzenLabel Text="Smooth" For="smooth" Style="margin-left: 8px; vertical-align: middle;" />
</RadzenCard>
<RadzenChart>
<RadzenAreaSeries Smooth="@smooth" Data="@revenue2019" CategoryProperty="Date" Title="2019" ValueProperty="Revenue" RenderingOrder="1">
</RadzenAreaSeries>
<RadzenAreaSeries Smooth="@smooth" Data="@revenue2020" CategoryProperty="Date" Title="2020" LineType="LineType.Dashed" ValueProperty="Revenue">
</RadzenAreaSeries>
<RadzenCategoryAxis Padding="20" FormatString="{0:MMM}" />
<RadzenValueAxis Formatter="@FormatAsUSD">
<RadzenGridLines Visible="true" />
<RadzenAxisTitle Text="Revenue in USD" />
</RadzenValueAxis>
</RadzenChart>
</div>
</div>
</div>
@code {
bool smooth = true;
class DataItem
{
public DateTime Date { get; set; }
public double Revenue { get; set; }
}
string FormatAsUSD(object value)
{
return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
}
DataItem[] revenue2019 = new DataItem[] {
new DataItem
{
Date = DateTime.Parse("2019-01-01"),
Revenue = 234000
},
new DataItem
{
Date = DateTime.Parse("2019-02-01"),
Revenue = 269000
},
new DataItem
{
Date = DateTime.Parse("2019-03-01"),
Revenue = 233000
},
new DataItem
{
Date = DateTime.Parse("2019-04-01"),
Revenue = 244000
},
new DataItem
{
Date = DateTime.Parse("2019-05-01"),
Revenue = 214000
},
new DataItem
{
Date = DateTime.Parse("2019-06-01"),
Revenue = 253000
},
new DataItem
{
Date = DateTime.Parse("2019-07-01"),
Revenue = 274000
},
new DataItem
{
Date = DateTime.Parse("2019-08-01"),
Revenue = 284000
},
new DataItem
{
Date = DateTime.Parse("2019-09-01"),
Revenue = 273000
},
new DataItem
{
Date = DateTime.Parse("2019-10-01"),
Revenue = 282000
},
new DataItem
{
Date = DateTime.Parse("2019-11-01"),
Revenue = 289000
},
new DataItem
{
Date = DateTime.Parse("2019-12-01"),
Revenue = 294000
}
};
DataItem[] revenue2020 = new DataItem[] {
new DataItem
{
Date = DateTime.Parse("2019-01-01"),
Revenue = 334000
},
new DataItem
{
Date = DateTime.Parse("2019-02-01"),
Revenue = 369000
},
new DataItem
{
Date = DateTime.Parse("2019-03-01"),
Revenue = 333000
},
new DataItem
{
Date = DateTime.Parse("2019-04-01"),
Revenue = 344000
},
new DataItem
{
Date = DateTime.Parse("2019-05-01"),
Revenue = 314000
},
new DataItem
{
Date = DateTime.Parse("2019-06-01"),
Revenue = 353000
},
new DataItem
{
Date = DateTime.Parse("2019-07-01"),
Revenue = 374000
},
new DataItem
{
Date = DateTime.Parse("2019-08-01"),
Revenue = 384000
},
new DataItem
{
Date = DateTime.Parse("2019-09-01"),
Revenue = 373000
},
new DataItem
{
Date = DateTime.Parse("2019-10-01"),
Revenue = 382000
},
new DataItem
{
Date = DateTime.Parse("2019-11-01"),
Revenue = 389000
},
new DataItem
{
Date = DateTime.Parse("2019-12-01"),
Revenue = 394000
}
};
}
Any help is appreciated since we want to use this chart to show daily price fluctuations of a public asset.
We are using Radzen.Blazor 3.18.13 and .Net 6.0
Thank you.