I am using Syncfusion charts for the first time. Their getting started instructions are very clear and I have my first chart on a Blazor component. The chart grid, titles, and x-axis displays fine, the y-axis is scaled properly..... however, no bars or lines show to display my data.
Thanks for your help. Code is below.
@using System.Runtime.CompilerServices
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@implements IDisposable
<div style="position:absolute; text-align:center; top:0px; left:0px; width:100%; height:100%; font-size:1.2vh;">
<div style="height:60%;">
<SfChart Title="Messages Sent/Received">
<ChartPrimaryXAxis Title="Time Interval" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
@* <ChartPrimaryYAxis Title="Messages" ValueType="Syncfusion.Blazor.Charts.ValueType.Double"></ChartPrimaryYAxis>*@
<ChartTooltipSettings Enable="true"></ChartTooltipSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@SentMessages" XName="SeriesDate" YName="SeriesYValue" Type="ChartSeriesType.Line">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
</div>
@code {
public class SeriesType
{
public string SeriesDate { get; set; }
public double SeriesYValue { get; set; }
}
public List<SeriesType> SentMessages = new List<SeriesType>
{
new SeriesType {SeriesDate="8/1/2023", SeriesYValue=4023},
new SeriesType {SeriesDate="8/2/2023", SeriesYValue=2123},
new SeriesType {SeriesDate="8/3/2023", SeriesYValue=1823},
new SeriesType {SeriesDate="8/4/2023", SeriesYValue=2423},
new SeriesType {SeriesDate="8/5/2023", SeriesYValue=923}
};
The issue may occur due to incorrect script references. As a suggestion you can check whether the script is properly referenced in the _Host.cshtml file for Blazor Server or index.html for Blazor Web Assembly. It is important to ensure that the script is referenced correctly to avoid any rendering issues. A sample and screenshot is attached for your reference.
For Individual package script reference:
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
For whole package script reference:
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
For CDN script reference:
<script src=https://cdn.syncfusion.com/blazor/22.1.38/syncfusion-blazor.min.js type="text/javascript"></script>
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionChart-834673013.zip
Screenshot: enter image description here
UG for Getting Started: https://blazor.syncfusion.com/documentation/chart/getting-started
UG for Script references: https://blazor.syncfusion.com/documentation/common/adding-script-references
