I need to get chart.js to adjust the height of the chart when I switch my site to mobile view, I'm using bootstrap as my framework which is working fine.
The issue with mobile view of the site is that the graphs are too small to interact with.
I've tried adding attributes in var options = {} but no luck I've even tried using height attributed in css but no luck!
Please help!
Here's the site:
http://preview.qaxawkzy7e6d2t9vhswkar3v1n8w7b9p705un9k2ojkbj4i.box.codeanywhere.com/
And code:
<html>
<head>
<meta name="viewport" content="width=device-width, minimal-scale=1.0, maximum-scale=1.0,">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
</head>
<body style="padding: 20px;">
<div class="row">
<div class="col-md-6">
<div class="well">
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h1>Hi there!</h1>
</div>
</div>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
options: {
responsive: true,
},
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>