Cannot get highcharts chart to load in pdf using wkpdftohtml

Question

I am trying to display a chart I created using highcharts.js on a pdf I create using wkhtmltopdf through a C# mvc application. However there does not seem to be a clean solution for this problem. Has anyone found a way to adapt their chart to show on the PDF?

So far I have meticulously searched for solutions to this problem via StackOverflow, highcharts documentation, and the GitHub page for the wkhtmltopdf GitHub page.

There seems to be a handful of various issues with solutions that could cause these errors. I have tried as many I could find that match my current problem but none seem to do the trick. They are as follows:

1) The animation of the graph breaks wkpdftohtml executing the javascript so nothing displays and the solution is to set the animation to false which I have done.

2) The command requires enabling javascript and setting a delay via the command line with "--enable-javascript --debug-javascript --javascript-delay "

3) Including absolute class paths to scripts/css which I have done using the https/http links that are hosted online, even publishing the code on the development server to ensure its not an offline issue using the following scripts within the head tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

4) I have tried and successfully create a separate javascript file and/or a local script in my razorview that I know is being executed as a statement at the beginning works.

5) I have also created parent div's and an inner canvas tag in the where I render the chart with set widths/heights with the following:

<div height="500" width="500">
    <canvas id="myChart" height="500" width="500"></canvas>
</div>

6) I also know that the code successfully makes the graph in the views of my application so it isn't a matter of the graph simply not rendering, it is only when I try to render it on the pdf that it doesn't show.

7) I will also note that the pdf is being rendered on the second page of the PDF that is oriented in a landscape. However if I add other elements to the page they show up on the second page.

8) I am using "Highsoft Highchart" version 7.0.3.7 and Nreco.PdfGenerator version 1.1.15, I have tried previous versions where others said they used to/have worked and none created a result

Here is the code where I create the chart in the of the view.

<script type="text/javascript">
        $(function () {

            //this line just makes another element green so I know the javascript is working appropriately. Removing it does not affect anything.
            document.getElementById("here").style.color = "green";

            $('#myChart').highcharts({
                chart: {
                    renderTo: 'myChart',
                    type: 'line',
                    spacing: [0, 0, 0, 0],
                    height: 300,
                    width: 300,
                    backgroundColor: 'orange'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    gridLineDashStyle: 'LongDash',
                    gridLineColor: 'black',
                    lineColor: 'black',
                    lineWidth: 1,
                    title: null,
                    max: 120,
                    labels: {
                        style: {
                            color: 'black'
                        }
                    }
                },
                exporting: {
                    chartOptions: {
                        chart: {
                            width: 1400,
                            height: 1200
                        }
                    }
                },
                plotOptions: {
                    series: [{
                        // general options for all series,
                        animation: false
                    }],
                    line: {
                        // shared options for all line series
                    }
                },
                series: [{
                    // specific options for this series instance
                    type: 'line'
                }]
            });
        });
    </script>


Here is the C# code from the model where I create the method that is passed to the controller to create the pdf

<pre><code>
 public byte[] GeneratePDF(string view, object model, Controller controller, PageOrientation pageOrientation, int[] pageMargins)
        {
            if (pageMargins.Length != 4)
                throw new Exception("Page margins must have 4 numeric values with top, bottom, left, right");

            // convert the view to Html string
            string htmlContent = ViewRenderer.RenderView(view, model, controller.ControllerContext);
            HtmlToPdfConverter htmlToPdf = new HtmlToPdfConverter();
            htmlToPdf.Orientation = pageOrientation;

            htmlToPdf.Margins = new PageMargins
            {
                Top = pageMargins[0],
                Bottom = pageMargins[1],
                Left = pageMargins[2],
                Right = pageMargins[3]
            };

            htmlToPdf.CustomWkHtmlArgs = " --enable-javascript --debug-javascript --javascript-delay 1000 ";

            // get bytes from generating pdf
            byte[] pdfBytes = htmlToPdf.GeneratePdf(htmlContent);
            return pdfBytes;
        }
</code></pre>

I am looking for a way to generate this chart in the PDF. Any help would be greatly appreciated as this is driving me insane.