We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Charts dont work?

Charts dont work?

I'm trying to uyse synfcution.ej2.blazor 17.2.0.50-beta, the latest one on nuget, and the latest version of .net core 3.

Every chart example I find in the documentation does not render a chart. Am I missing something? Do these charts work?

I make a fresh example with the latest blazor template from microsoft, copy and paste this into my home page:

@page "/"

@using Syncfusion.EJ2.Blazor.Charts
<EjsChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" ColumnSpacing="0.2" ColumnWidth="0.7" Type="ChartSeriesType.Bar">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" ColumnSpacing="0.2" ColumnWidth="0.2" Type="ChartSeriesType.Bar">
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>

@code{
    public class ChartData
    {
        public string X;
        public double YValue;
        public double YValue1;
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
        new ChartData { X= "USA", YValue= 46, YValue1=56 },
        new ChartData { X= "GBR", YValue= 27, YValue1=17 },
        new ChartData { X= "CHN", YValue= 26, YValue1=36 },
        new ChartData { X= "UK", YValue= 56,  YValue1=16 },
        new ChartData { X= "AUS", YValue= 12, YValue1=46 },
        new ChartData { X= "IND", YValue= 26, YValue1=16 },
        new ChartData { X= "DEN", YValue= 26, YValue1=12 },
        new ChartData { X= "MEX", YValue= 34, YValue1=32},
    };
}



And nothing is on the screen, and the HTML output is just this:
<div id="chartsxmuk2il11ma" class="e-blazor-hidden"></div>
with nothing inside the div.


7 Replies
MR Manuel Reinacher September 7, 2019 09:44 PM UTC

Hello Kyle,

Did you add the css and javascript references?



<head>
   ...
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.50/material.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.2.50/dist/ej2.min.js"></script>
</head>


Are other controls working?

The basic example for a chart is working for me.


regards Manuel





KY Kyle September 8, 2019 05:02 AM UTC

Ack, I had those but I was using serverside and was missing this:

    <script src="https://cdn.syncfusion.com/ej2/17.2.50/dist/ejs.interop.min.js"></script>

Thanks for the help!

KM Kesavan Muthusamy Syncfusion Team September 9, 2019 07:30 AM UTC

Hi Kyle, 

Greetings from Syncfusion.  

We always happy to assists you. Please let us know if you need any further assistance.  

Regards, 
Kesavan 


AL Alex October 2, 2019 12:43 PM UTC

For me, it was because I had a browser plugin (Privacy Badger) that was blocking the SyncFusion CDN. Private mode (no extensions) revealed that it was working, so then I just had to enable the CDN in my extension.

KC Kalaimathi Chellaiah Syncfusion Team October 3, 2019 10:31 AM UTC

Hi Alex, 
 
Thanks for the update. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   
   
Regards, 
Kalai. 


AL Alex November 7, 2019 06:35 PM UTC

I'm having the same problem. I fixed it by installing the nuget package to the server and shared too. It worked before with only installing it on the client, I didn't update or anything, so I don't know why it happened.

But this is the only thread that comes up when I search for "e-blazor-hidden" on google, so if any future readers have this problem, try and install the package on everything.

Ps. I'm another Alex than the cool guy above

SM Srihari Muthukaruppan Syncfusion Team November 8, 2019 10:39 AM UTC

Hi Alex,  

Thanks for the update. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari M 


Loader.
Live Chat Icon For mobile
Up arrow icon