CODEWITHSUNDEEP
chart.js
Shiv Mourya
Shiv Mourya

Reputation: 31

Unable to set width and height on canvas in chart js

I am unable to set width and height on the canvas, it is taking full height and width available on the body.

Could you please help here? I need to scroll down to see the chart.

<!doctype html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <style>
	  
	</style>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
  <script>
  var ctx = document.getElementById('myChart').getContext('2d');
  data = {
    datasets: [{
        data: [10, 20, 30,50],
		backgroundColor: ['#ff6384','#36a2eb','#cc65fe', '#ffce56'],
		borderWidth: ['1','1','1', '1']	
    }],

    labels: ['Red','Yellow','Blue','Green']
	
};
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
	options: {
    legend: {
        display: false,
		 responsive: false
      }
    
    }
});
  </script>
</html>

Upvotes: 2

Views: 3534

Answers (1)

Aniko Litvanyi
Aniko Litvanyi

Reputation: 2149

You have to put it in a container div element and set the width and height on the container like it is mentioned in the docs.

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

Upvotes: 2

Related Questions