title: Chart.js - Uncaught TypeError: Object.defineProperty called on non-object for multiple charts
body: <p>I want to render multiple charts with same class name.The div with same class name contains <code>canvas</code> object.Most of the options are same but a few are different.I want to send them via <code>data</code> attributes.Everything is okay but when i am going to select <code>canvas</code> element on dom-object, it comes :</p>
  
  <blockquote>
    <p>Uncaught TypeError: Object.defineProperty called on non-object</p>
  </blockquote>
  
  <p>I dont know why it's happening.</p>
  
  <p>Below is the html code</p>
  
  <pre><code>&lt;td
      class ="crypt-marketcap-canvas"
      data-charts ="[65,59,81,81,56,55,40,80,90]" 
      data-bg = "d3f0df"
      data-border = "8cd8aa"&gt;
      &lt;canvas /&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>and js codes are</p>
  
  <pre><code>var charts = document.getElementsByClassName("crypt-marketcap-canvas");
  
  for( let chart of charts ){
    let data = chart.dataset.charts;
    // console.log(chart.dataset.charts);
    let bg = chart.dataset.bg;
    let border = chart.dataset.border;
  
    let canvas = chart.querySelector('canvas');
    // console.log(canvas);
    let ctx = canvas.getContext('2d');
    console.log(ctx);
    let lineChartData = {
      labels : ["1","2","3","4","5","6","7","8","9"],
      datasets : [
          {
              backgroundColor : '#' + bg,
              borderColor : '#' + border,
              data : data,
              bezierCurve : true
          }
      ]  
    }
    new Chart(ctx, { //Error is showing on this line
      type:"line",
      data:lineChartData,
      options:options
    });
  }
  </code></pre>