Charts.js chart scaling to canvas size - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Charts.js chart scaling to canvas size

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//w w w  .j ava2  s  . co  m
    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 200;
      ctx.canvas.height = 200;
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
    }

      </script> 
   </head> 
   <body> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script> 
      <div id="graph_2015" class="stats_box"> 
         <h4>Graph 2015</h4>
          Text 
         <canvas id="myChart" width="200" height="200"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials