Column chart does not render the columns

[Dennis Imbro]

I am building a Blazor Server app. I have tested a column chart using the demo directly copied from Syncfusion. When this component is placed on a page a chart appears but no columns are shown. The x-axis labels are shown and the scale of the y-axis is appropriate for the data, but the columns are missing. I am using the Syncfusion.Blazor.Charts 22.1.38 NuGet package and the app is based on .Net 6.0.

In the _Layout.cshtml page I have included:

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet"/>

    <script src="_content.Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

The component is:

SfTestColumnComponent

@code {

public class SalesInfo

{

public string Month { get; set; }

public double SalesValue { get; set; }

}

public List Sales = new List

{

new SalesInfo { Month = "Jan", SalesValue = 35 },

new SalesInfo { Month = "Feb", SalesValue = 28 },

new SalesInfo { Month = "Mar", SalesValue = 34 },

new SalesInfo { Month = "Apr", SalesValue = 32 },

new SalesInfo { Month = "May", SalesValue = 40 },

new SalesInfo { Month = "Jun", SalesValue = 32 },

new SalesInfo { Month = "Jul", SalesValue = 35 }

};

}

The chart appears as follows:

[Gopalakrishnan Veeraraghavan]

Hi Dennis,

We have analyzed your query and found that the column chart render issue may arise due to an incorrect reference to a script in the _Layout.cshtml file. It is important to ensure that the script is properly referenced in the _Layout.cshtml file to avoid such render issues. We have attached a sample and screenshot for your reference. Please check with the below 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/ColumnChart-1858787808.zip

Screenshot:

Kindly revert us if you have any concerns.

Regards,

Gopalakrishnan Veeraraghavan