CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapchart.js
howzitCAL
howzitCAL

Reputation: 123

chart.js adjust height in mobile view

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>

Upvotes: 12

Views: 21694

Answers (3)

Mohanad Haddadin
Mohanad Haddadin

Reputation: 589

Another way you can use min-height it should be inline style to the canvas and you can keep responsive true in this case 

<div class="table-responsive">
  <canvas id="canvas"  style="min-height:250px"  class="table"></canvas>
</div>

and you options responsive true

  options: {
                responsive: true,// other properties ....
            }

Upvotes: 4

Mohanad Haddadin
Mohanad Haddadin

Reputation: 589

if you are using bootstrap you can use table responsive class to maintain the responsive view without maintainAspectRatio Option

so your canvas code:

<div class="table-responsive">
    <canvas id="canvas" style="height:400px" class="table"></canvas>
</div>

and your options code:

 options: {
            responsive: false,
            maintainAspectRatio: false,
            //...your other values

Upvotes: 17

John
John

Reputation: 147

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.

Upvotes: 7

Related Questions