Chartjs-Make Chart.js canvas responsive inside the resizeable div

by

0👍

You need to set .container to have:

position: relative;
overflow: hidden;

If you want the chart to fit itself to the div set maintainAspectRatio: false.

Here’s a working example:

let myChart = new Chart(
  document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c'],
      datasets: [{
        label: 'Series1',
        data: [1, 10, 6]
      }]
    },
    options: {
      maintainAspectRatio: false
    }
  }
);
.container {
  border: 1px solid #000;
  overflow: hidden;
  position: relative;
  resize: both;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div class="container">
  <canvas id="chart"></canvas>
</div>

-1👍

Maybe I don’t get your question correctly, but deleting the max-width should do the trick…

Leave a comment