I am building a web app using .net 8 Blazor using Visual Studio. I have copied the Syncfusion candle chart demo into the project with a few modifications. (The stock data comes from Yahoo finance.) The code is shown below.
When I navigate to the page, the chart axes and title are shown, but the data points are not shown. However, if I make any changes to the page in VS and then do a hot reload, the data points do appear! That is, they are shown until I navigate to another page and return. Then again, only the axes and title have been rendered.
Somehow, the hot reload causes the data points to appear. You will see from the code below, I am using the Interactive Server render mode.
Is this some incompatibility of Syncfusion with .net 8? Or VS?
@page "/chart/hilo-open-close"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using System.Net.Http.Json
@using Syncfusion.Blazor.Charts.Chart.Internal
@inject NavigationManager NavigationManager
@inject HttpClient Http
@rendermode InteractiveServer
<h3>HILO Chart</h3>
<div class="control-section" align='center'>
<SfChart Title="AAPL Historical" Width="@Width">
<ChartArea>
<ChartAreaBorder Width="0"></ChartAreaBorder>
</ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
<ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis Title="Price" RangePadding="ChartRangePadding.None" Interval="20" LabelFormat="n0">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartLegendSettings Visible="false"></ChartLegendSettings>
<ChartTooltipSettings Enable="true" Shared="true" Header="" Format="<b>Apple Inc.(AAPL)</b> <br> High : <b>${point.high}</b> <br> Low : <b>${point.low}</b> <br> Open : <b>${point.open}</b> <br> Close : <b>${point.close}</b> "></ChartTooltipSettings>
<ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
</ChartCrosshairSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartPointsList" Name="Apple Inc.(AAPL)" XName="Period" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"
BearFillColor="#2ecd71" BullFillColor="#e74c3d" Type="ChartSeriesType.Candle">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
@code {
private Theme Theme { get; set; }
public string Width { get; set; } = "90%";
public HLOCData[] ChartPoints { get; set; } = new HLOCData[] { };
public List<HLOCData> ChartPointsList { get; set; } = new List<HLOCData>();
protected override async Task OnInitializedAsync()
{
ChartPointsList = await CreateDataListAsync();
}
protected override void OnInitialized()
{
Width="90%";
}
public class HLOCData
{
public DateTime Period { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Open { get; set; }
public double Close { get; set; }
public long Volume { get; set; }
}
public async Task<List<HLOCData>> CreateDataListAsync()
{
DateTime startDate = new DateTime(2021, 1, 1);
DateTime endDate = new DateTime(2021, 12, 31);
var data = await FetchYahooData.GetYahooDataAsync("AAPL", startDate, endDate);
List<HLOCData> hlocData = new List<HLOCData>();
foreach (var item in data)
{
HLOCData hloc = new HLOCData();
hloc.Period = item.DateTime;
hloc.High = (double)item.High;
hloc.Low = (double)item.Low;
hloc.Open = (double)item.Open;
hloc.Close = (double)item.Close;
hloc.Volume = item.Volume;
hlocData.Add(hloc);
}
return hlocData;
}
}
