Setting width and height

javascript

responsive-design

performance

best-practices

byAnton Shumikhin·Dec 15, 2024

To control the size of your HTML elements, use CSS. Create a .style class and declare the width and height:

.style {
  width: 100px;  /* Feel free to add or subtract pixels as needed */
  height: 50px;  /* Don't go too high, you'll need oxygen */
}

Apply the style to your HTML:

<div class="style"></div>

You can adjust the width and height values to your preference. To add flexibility, replace px with the more responsive-friendly %, vw, or vh.

Advanced sizing techniques: A practical guide

The art of responsiveness

For responsive design, we'll need JavaScript's help. By declaring responsive: true, Chart.js will automatically resize your chart based on the parent container.

let myChart = new Chart(ctx, {
  /* ... */
  options: {    /* no need to call a meeting, options are here */
    responsive: true, /* ready to stretch like a gymnast */
    maintainAspectRatio: false /* chart ignores its diet plan */
  }
});

Shaping up with aspect ratio

Avoid content distortion by setting fixed aspect ratios. Inside Chart.js options, the aspectRatio property gives you control over width vs height.

options: {
  /* ... */
  maintainAspectRatio: true, /* conformist */
  aspectRatio: 4 /* or any number you like, not just 4 */
}

Overcoming sizing hurdles

Inline styles can often act hardheaded. Luckily, the CSS !important flag grants you final say:

#myCanvas {
  width: 100% !important;    /* 'Cause I'm BOSS */
  height: auto !important;   /* scales like a rock climber */  
}

If you find your chart has a mind of its own and keeps resizing or getting cut off, responsive: false lets you regain control:

options: {
  responsive: false, /* Stop! Resize time! */
  /* ... */
}

Tailoring to fit: In-depth dimension handling

Wrapping up with containers

Wrap your canvas in a div and use CSS to adjust its width and height to your heart's content:

<div id="chartContainer" style="width:50%; height:400px;">
  <canvas id="myChart"></canvas>
</div>

Staying flexible

To optimally scale your content, use relative sizes with percentages or viewport units:

.chartContainer {
  width: 80%;   /* Just 80, not 100, Avoid full-width traps */
  height: 50vh; /* Spread your wings but keep an eye on window size */
}

Problem-solving

Charts getting cut-off? Here's the life hack you're looking for:

#parent {
  width: 600px;   /* strict parent */
  height: 400px;  /* sets some limits */
}
#myChart {
  width: 100%;    /* flexes like an obedient child */
  height: 100%;   /* stretches according to parent's wishes */
}