We help IT Professionals succeed at work.

Using HighCharts and the Chart does not render.

Last Modified: 2019-02-20
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: '{series.name}: <b>{point.percentage:.1f}%</b>'
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</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


Open in new window

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)
Watch Question

Task Lead
This one is on us!
(Get your first solution completely free - no credit card required)
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.