Charts not rendering locally

[Jason]

If I just copy one of the simple examples and paste it into my code the only thing it renders are the legend and the labels. I have to set renderAs to canvas in order for it to show up.

I have all the right css and js files loaded but still I get nothing if I don't render as canvas.

Happens on all browsers. See attached image

 This is my code:

data returned is:

[{Key:Male,Value:42},{Key:Female,Value:​29},{Key:​Other,Value:​16},{Key:Unspecified,Value:31}]

<div id="genderChart" ng-controller="GenderChartController" class="chart"></div>

<div id="workingChart" ng-controller="GenderChartController" class="chart"></div>

 

$("#genderChart").kendoChart({
            dataSource: {
                transport: {
                    read: function (options) {
                        RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) {
                            options.success(data);
                        })
                    }
                },
                sort: {
                    field: "Key",
                    dir: "asc"
                }

            },
            theme: "material",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "pie"
            },
            series: [{
                type: 'pie',
                field: "Value",
                categoryField: "Key",
                overlay: {
                    gradient: "sharpBevel"
                }

            }]

        });

        $("#workingChart").kendoChart({
            dataSource: {
                transport: {
                    read: function (options) {
                        RadiusAjax.get('Person/GetPersonGenderMetrix').then(function (data) {
                            options.success(data);
                        })
                    }
                },
                sort: {
                    field: "Key",
                    dir: "asc"
                }

            },
            theme: "material",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "pie"
            },
            series: [{
                type: 'pie',
                field: "Value",
                categoryField: "Key",
                overlay: {
                    gradient: "sharpBevel"
                }

            }],
            renderAs: "canvas",
        });

 

 

 

 

[Jason]

here is the rendered html page

[Iliana Dyankova]

Hi Jason,

I tried to reproduce the issue using the provided chart configuration but to no avail (dojo). Is it possible to modify my example or provide an isolated runnable example which I could test on my side - this way I would be able to check what exactly is going wrong and provide concrete recommendations? Thank you in advance for your cooperation and time.

Regards,
Iliana Nikolova
Telerik

 

 

[Jason]

Got it solved, when I was creating a runnable sample and it was working fine I did a little more looking into our app and found we had some old references to 3rd party css files that interfere with your charts.

"morris-chart/morris.min.css",
"c3-chart/c3.min.css",