How to set a fixed size for Canvas on Chart.js

Question

This is my first time posting a question so I hope this is written according to the rules.

So, I'm using Chart.js 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)).

Then, through javascript I create the charts (See the code bellow).

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.

I've also tried to change these parameters through jQuery after the function is executed, but that didn't work either.

$("#info_content").html("<canvas id=chartdiv0 style='width:600px;height:150px'></canvas><canvas id=chartdiv1 width='600' height='150'></canvas><canvas id=chartdiv2 width='600' height='150'></canvas>");
 //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<c;i++)
{
  var ctx = document.getElementById("chartdiv"+i).getContext('2d');
  for(var k=0;k<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();
}

<div id="info_content"></div>

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.

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).

Here is what I'm displaying in the page, as you can see, there are 3 charts and I can only see 2 without scrolling.

Oddly enough when I open the Chrome Javascript console I get the display I wanted. Here is the view with the console open.

Any help would be greatly appreciated.

Thank you in advance.

Answer 1

I found out the solution. I'll leave the answer to my problem here in case anybody has the same problem.

It wasn't working because I hadn't set the options responsive:false, so the chart was adjusting to the size of the data.

Thank you anyway.