title: How to set a fixed size for Canvas on Chart.js
body: <p>This is my first time posting a question so I hope this is written according to the rules.</p>
  
  <p>So, I'm using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">Chart.js</a> to create efficiency charts regarding a fleet of vehicles. I get the values I need through AJAX (Making a request to a PHP file and accessing the database (PostgreSQL)).</p>
  
  <p>Then, through javascript I create the charts (See the code bellow).</p>
  
  <p>My problem is in the first line of code where I set the width and height values but they are not applied to the canvas. I've tried doing it through the style attribute or through the width and height attributes, but neither works.</p>
  
  <p>I've also tried to change these parameters through jQuery after the function is executed, but that didn't work either.
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#info_content").html("&lt;canvas id=chartdiv0 style='width:600px;height:150px'&gt;&lt;/canvas&gt;&lt;canvas id=chartdiv1 width='600' height='150'&gt;&lt;/canvas&gt;&lt;canvas id=chartdiv2 width='600' height='150'&gt;&lt;/canvas&gt;");
   //If fuel is selected
  if(imei[1]=='comb')
    c=3;
  //If Kilometers is selected
  if(imei[1]=='km')
  {
    c=1;
    tituloefi[0]="Kilometros Precorridos";
  }
  for(var i=0;i&lt;c;i++)
  {
    var ctx = document.getElementById("chartdiv"+i).getContext('2d');
    for(var k=0;k&lt;datajson[i].length;k++)
        datajson[i][k]['valor']=datajson[i][k]['valor']/h[i];
      datajson[i].reverse();
      if(datajson[i][0]==undefined)
      {
        $("#chartdiv"+i).remove();
        continue;
      }
      //Values are being generated by getting a database value and adding a random value
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [datajson[i][0]['data'], datajson[i][1]['data'], datajson[i][2]['data'], datajson[i][3]['data'], datajson[i][4]['data'], datajson[i][5]['data'],datajson[i][6]['data']],
            datasets: [{
                label: false,
                data: [datajson[i][0]['valor'], (datajson[i][1]['valor']+Math.random()*40000), datajson[i][2]['valor']+Math.random()*40000, datajson[i][3]['valor']+Math.random()*40000, datajson[i][4]['valor']+Math.random()*40000, datajson[i][5]['valor']+Math.random()*40000,datajson[i][6]['valor']+Math.random()*40000],
                backgroundColor: [
                    'rgb(61, 135, 255)'
                ],
                borderColor: [
                    'rgb(0, 74, 196)'
                ],
                borderWidth: 3
            }]
        },
        options: {
            title: {display:true,text:tituloefi[i],fontSize:20},
            legend: {display:false},
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            },
            tooltips: {
              displayColors:false,
              callbacks: {
                  label: function(tooltipItem, chart) {
                      return "Média: "+Math.round(tooltipItem.yLabel*100)/100+(c==1?" Km":" Litros");
                  }
              }
          }
        }
    });
  }
  if(c==1)
  {
    $("#chartdiv1").remove();
    $("#chartdiv2").remove();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="info_content"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've also tried to change the values with the Javascript console on Chrome and it WORKED (It only worked if changed the style attribute, changing width or height attribute erased the canvas). I really don't understand.</p>
  
  <p>I think that the problem is that I'm creating the canvas dynamically, but if that's the problem I'm not seeing the answer (Maybe adding the canvas in the original HTML with display:none , but I really didn't want to do that).</p>
  
  <p><a href="https://imgur.com/a/KeLQ7" rel="nofollow noreferrer">Here</a> is what I'm displaying in the page, as you can see, there are 3 charts and I can only see 2 without scrolling.</p>
  
  <p>Oddly enough when I open the Chrome Javascript console I get the display I wanted. <a href="https://imgur.com/a/Y2E4y" rel="nofollow noreferrer">Here is the view with the console open</a>.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thank you in advance.</p>