title: Angular Chart.js not displaying Chart (Legend is Displaying)
body: <p>I am using the Angular-chart.js package:
  <a href="http://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer">http://jtblin.github.io/angular-chart.js/</a></p>
  
  <p>When I load the page, the legend at the bottom of the page shows, but the chart itself is not displayed.</p>
  
  <p>I added divs to verify that the data is actually populated.  Here is the code that I have so far:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;
          vm.bvpsData - 
      &lt;/span&gt;
      {{vm.bvpsData | json}}
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;span&gt;
          vm.bvpsLabels - 
      &lt;/span&gt;{{vm.bvpsLabels | json}}
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;span&gt;
          vm.bvpsSeries - 
      &lt;/span&gt;{{vm.bvpsSeries | json}}
  &lt;/div&gt;
  
  &lt;canvas id="bvpsChart" class="chart chart-line" data-data="vm.bvpsData"
          data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>When I run the page and look at the code, this is what is rendered in the html:</p>
  
  <pre><code>&lt;div class="ng-binding"&gt;&lt;span&gt;vm.bvpsData -&lt;/span&gt;[
    [
      "6.88",
      "6.95",
      "4.31",
      "4.33",
      "4.45",
      "4.49",
      "4.16",
      "4.04",
      "3.92",
      "3.61",
      "3.68",
      "3.55",
      "3.21",
      "3.38",
      "3.62",
      "3.98",
      "3.86",
      "3.66",
      "3.87",
      "4.15",
      "4.41",
      "4.59",
      "4.95",
      "5.15",
      "5.22",
      "5.40",
      "5.66",
      "6.28",
      "6.68",
      "7.00",
      "7.57",
      "8.08",
      "7.79",
      "8.10",
      "8.59",
      "9.10",
      "9.33",
      "9.68",
      "10.14",
      "10.45",
      "10.74",
      "10.80",
      "11.07",
      "10.94"
    ]
  ]&lt;/div&gt;
  &lt;div class="ng-binding"&gt;&lt;span&gt;vm.bvpsLabels -&lt;/span&gt;[
    "06/2004",
    "09/2004",
    "12/2004",
    "03/2005",
    "06/2005",
    "09/2005",
    "12/2005",
    "03/2006",
    "06/2006",
    "09/2006",
    "12/2006",
    "03/2007",
    "06/2007",
    "09/2007",
    "12/2007",
    "03/2008",
    "06/2008",
    "09/2008",
    "12/2008",
    "03/2009",
    "06/2009",
    "09/2009",
    "12/2009",
    "03/2010",
    "06/2010",
    "09/2010",
    "12/2010",
    "03/2011",
    "06/2011",
    "09/2011",
    "12/2011",
    "03/2012",
    "06/2012",
    "09/2012",
    "12/2012",
    "03/2013",
    "06/2013",
    "09/2013",
    "12/2013",
    "03/2014",
    "06/2014",
    "09/2014",
    "12/2014",
    "03/2015"
  ]&lt;/div&gt;
  &lt;div class="ng-binding"&gt;&lt;span&gt;vm.bvpsSeries -&lt;/span&gt;[
    "Book Value Per Share"
  ]&lt;/div&gt;
  &lt;div class="chart-container"&gt;
      &lt;canvas id="bvpsChart" class="chart chart-line ng-isolate-scope" data-data="vm.bvpsData" data-labels="vm.bvpsLabels" data-legend="true" data-series="vm.bvpsSeries" width="929" height="0" style="width: 929px; height: 0px;"&gt;&lt;/canvas&gt;
      &lt;chart-legend&gt;
          &lt;ul class="line-legend"&gt;
              &lt;li&gt;&lt;span style="background-color:rgba(151,187,205,1)"&gt;&lt;/span&gt;Book Value Per Share&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/chart-legend&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/mIlf5.png" alt="enter image description here"></p>
  
  <p>What am I doing wrong? Why is the chart not displaying?</p>