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>
share|improve this question

I believe the answer is to set the maintainAspectRatio: false option for the chart and then set the minimum height of the chart responsively if the screen width reaches a certain size.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.