score:-1

maybe i don't get your question correctly, but deleting the max-width should do the trick...

score: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>


Related Query

More Query from same tag