title: Yii2 unable to view chart
body: <p>I am using <a href="https://github.com/2amigos/yii2-chartjs-widget" rel="nofollow noreferrer">ChartJs Widget For Yii2</a> by <code>2amigOS</code>. Below is my code </p>
  
  <pre><code>use dosamigos\chartjs\ChartJs;
  
  ChartJs::widget([
      'type' =&gt; 'pie',
      'id' =&gt; 'structurePie',
      'options' =&gt; [
          'height' =&gt; 200,
          'width' =&gt; 400,
      ],
      'data' =&gt; [
          'radius' =&gt;  "90%",
          'labels' =&gt; ['Label 1', 'Label 2', 'Label 3'], // Your labels
          'datasets' =&gt; [
              [
                  'data' =&gt; ['35.6', '17.5', '46.9'], // Your dataset
                  'label' =&gt; '',
                  'backgroundColor' =&gt; [
                          '#ADC3FF',
                          '#FF9A9A',
                      'rgba(190, 124, 145, 0.8)'
                  ],
                  'borderColor' =&gt;  [
                          '#fff',
                          '#fff',
                          '#fff'
                  ],
                  'borderWidth' =&gt; 1,
                  'hoverBorderColor'=&gt;["#999","#999","#999"],
              ]
          ]
      ],
      'clientOptions' =&gt; [
          'legend' =&gt; [
              'display' =&gt; false,
              'position' =&gt; 'bottom',
              'labels' =&gt; [
                  'fontSize' =&gt; 14,
                  'fontColor' =&gt; "#425062",
              ]
          ],
          'tooltips' =&gt; [
              'enabled' =&gt; true,
              'intersect' =&gt; true
          ],
          'hover' =&gt; [
              'mode' =&gt; false
          ],
          'maintainAspectRatio' =&gt; false,
  
      ],
      'plugins' =&gt;
          new \yii\web\JsExpression('
          [{
              afterDatasetsDraw: function(chart, easing) {
                  var ctx = chart.ctx;
                  chart.data.datasets.forEach(function (dataset, i) {
                      var meta = chart.getDatasetMeta(i);
                      if (!meta.hidden) {
                          meta.data.forEach(function(element, index) {
                              // Draw the text in black, with the specified font
                              ctx.fillStyle = \'rgb(0, 0, 0)\';
  
                              var fontSize = 16;
                              var fontStyle = \'normal\';
                              var fontFamily = \'Helvetica\';
                              ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
  
                              // Just naively convert to string for now
                              var dataString = dataset.data[index].toString()+\'%\';
  
                              // Make sure alignment settings are correct
                              ctx.textAlign = \'center\';
                              ctx.textBaseline = \'middle\';
  
                              var padding = 5;
                              var position = element.tooltipPosition();
                              ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                          });
                      }
                  });
              }
          }]')
  ]);
  </code></pre>
  
  <p>When I refresh my code I am getting </p>
  
  <blockquote>
    <p>Failed to create chart: can't acquire context from the given item </p>
  </blockquote>
  
  <p>in my <code>inspect-&gt;console</code>. I have looked into one of the solutions and tried it</p>
  
  <pre><code>&lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;?PHP
  $script = &lt;&lt;&lt; JS
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero: true
              }
          }]
      }
  }
  });
  
  JS;
  $this-&gt;registerJs($script);
  ?&gt;
  </code></pre>
  
  <p>And when I am trying to refresh this page I am getting </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: Chart is not defined </p>
  </blockquote>
  
  <p>in my <code>inspect-&gt;console</code>. </p>
  
  <p>How could I get rid of these issues? </p>
  
  <p>Any help would be highly appreciated.</p>