Newbie to Syncfusion... first chart isn't showing data series

[greg watchmaker]

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}

        };

[Ilamathi Govindaraj]

Hi Greg,

We have analyzed your query "The chart is not showing lines." However, this type of issue may occur due to incorrect script references. We suggest checking 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. We have attached a sample and screenshot for your reference. Please review the following code snippet:

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:

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

Kindly revert us if you have any concerns.

Regards,

Ilamathi Govindaraj.

[greg watchmaker]

Thanks so much!  I must have missed in your well-written getting started code that I needed this reference in index.html.  I added it and it works like a charm!  

[Gopalakrishnan Veeraraghavan]

Hi Greg,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Gopalakrishnan Veeraraghavan