title: How To Use DotNet HighChart In ASP.Net 5 / MVC 6
body: <p>I'm attempting to use the DotNet HighChart Library in an ASP.Net 5 / MVC 6 project to add charts to a page.</p>
  
  <p>I've imported the library from NuGet and added the scipt references on the _layout view:</p>
  
  <pre><code>&lt;script type="text/javascript" src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="~/lib/highcharts/highcharts.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've defined a ViewModel class to hold the Chart:</p>
  
  <pre><code>public class IndexReportViewModel
  {
      public Highcharts Chart { get; set; }
  }
  </code></pre>
  
  <p>and created it and filled it with the stock example in the controller:</p>
  
  <pre><code>    public IActionResult Index()
      {
          IndexReportViewModel ivm = new IndexReportViewModel();
  
          Highcharts chart = new Highcharts("chart")
              .SetXAxis(new XAxis
              {
                  Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
              })
              .SetSeries(new Series
              {
                  Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
              });
  
          ivm.Chart = chart;
          return View(ivm);
      }
  </code></pre>
  
  <p>The Controller has the required namespaces:</p>
  
  <pre><code>using DotNet.Highcharts;
  using DotNet.Highcharts.Options;
  using DotNet.Highcharts.Helpers;
  </code></pre>
  
  <p>Finally I've referenced it in the Index View:</p>
  
  <pre><code>@model TimeCheckBES.ViewModels.Reports.IndexReportViewModel
  
  &lt;p&gt;My Chart&lt;/p&gt;
     @Model.Chart
  </code></pre>
  
  <p>When the page loads it just seems to display the type of the HighCharts object, e.g.:</p>
  
  <p><a href="https://i.stack.imgur.com/V2DOa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V2DOa.png" alt="HighCharts Fail"></a></p>
  
  <p>Any ideas? I've tried:</p>
  
  <ul>
  <li>Adding the js references to the view itself rather than the _layout (I've checked the page in dev mode and they are loading).</li>
  <li>Calling the <code>@Model.Chart.ToHtmlString()</code> in the Index view.</li>
  <li>Not using a ViewModel and directly returning the chart object.</li>
  </ul>
  
  <p>I think I must be missing something about the way js scripts work but can't think what it might be.</p>
  
  <p><strong>EDIT</strong>: Additional info</p>
  
  <p>I've also added the namespaces directly to the view, although the compiler doesn't think they're necessary.</p>
  
  <pre><code>@using DotNet.Highcharts;
  @using DotNet.Highcharts.Options;
  @using DotNet.Highcharts.Helpers;
  </code></pre>