title: Using Charts.js with react
body: <p>I am using React and want to tie it in with <a href="http://www.chartjs.org/" rel="noreferrer">Chart.js</a>.</p>
  
  <p>The graph below works, but I am not sure how to make a Graph component in React.</p>
  
  <p>My Chart.js code looks like the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
      labels: ["Red", "Blue", "Yellow"],
      datasets: [{
          label: '# of Likes',
          data: [12, 19, 3],
          backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
             'rgba(54, 162, 235, 0.2)',
             'rgba(255, 206, 86, 0.2)'
          ] 
       }]
     }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>I then tried to incorporate this into React. Unfortunately, this didn't work.</p>
  
  <p>My code attempt can be seen here.This is kind of working, but not really, and I have no idea what approach to take. </p>
  
  <pre><code>var Graph = React.createClass({
  
      render: function() {
          var ctx = document.getElementById("myChart");
          var myChart = new Chart(ctx, {
             type: 'bar',
             data: {
             labels: ["Red", "Blue", "Yellow"],
             datasets: [{
                 label: '# of Likes',
                 data: [12, 19, 3],
                 backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                 ] 
              }]
            }
         });
      }
  })
  </code></pre>