Chartjs-Resizing a Chart.js chart

by

1👍

If you are styling the canvas element directly with non relative values you need to set responsive to false in the options, if you are styling the width with relative values you need to apply them to the surrounding div

https://www.chartjs.org/docs/master/configuration/responsive.html

0👍

I hope my answer is helpful to you, you just have to specify certain CSS rules for the parent element of the graphic.

var xaxis = [1,2,3,4,5]
var yaxis = [2,3,4,5,6]


var thisChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  options: {
    responsive: true
},
  data: {
    labels: xaxis,
    datasets: [
      {
        data: yaxis,
        label: "Test",
        borderColor: "#3e95cd",

      }
    ]
  }
});
#chartbox {
  display: block;
  width: 400px;
  height: 400px;
}
<div id="chartbox">
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Leave a comment