troubleshooting Question

Using HighCharts and the Chart does not render.

Avatar of Crystal Rouse
Crystal RouseFlag for United States of America asked on
JavaScriptC#JSON* core mvc
1 Comment1 Solution90 ViewsLast Modified:
I am using HighCharts and when loading the View, the source for Highcharts is loaded after the DOM.  The chart does not display.

My View looks like this:

    ViewBag.Title = "Warranty Expiration Chart";

<div class="jumbotron">

    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>


<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON("GetMaintenanceExp", function (data) {

            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                title: {
                    text: 'Maintenance Expiration Chart'
                tooltip: {
                    pointFormat: '{}: <b>{point.percentage:.1f}%</b>'
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'ThirtyDays',
                        y: data.ThirtyDays,
                    }, {
                        name: 'SixtyDays',
                        y: data.SixtyDays
                    }, {
                        name: 'NinetyDays',
                        y: data.NinetyDays


My Controller returns the values for ThirtyDays, SixtyDays, NinetyDays as a Json.

My Layout View has the following in the head:  @Scripts.Render("~/javascript/js")
I have an app bundle that has the following:

 bundles.Add(new ScriptBundle("~/javascript/js").Include(
                         .IncludeDirectory("~/Content/classes", "*.js", true)
Crystal Rouse
Task Lead

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros