title: How to change canvas height and width in angular chart.js
body: <p>I am developing my first sample code using angular chart.js,I am unable to change custom height and width, How can i change height and width of my canvas.</p>
  
  <p>CODE:</p>
  
  <p>CSS<br>
      #myChart{
        width:500px;
        height:500px;
      }</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body ng-controller="LineCtrl"&gt;
  &lt;canvas id="myChart" &gt;&lt;/canvas&gt;
  &lt;div class="chart-container"&gt;
          &lt;linechart data="data" options="options" mode=""&gt;&lt;/linechart&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [65, 59, 80, 81, 56, 55, 40]
          },
          {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [28, 48, 40, 19, 86, 27, 90]
          }
      ]
  };
  var options = {
          scaleOverlay : false,
          scaleOverride : false,
          scaleSteps : null,
          scaleStepWidth : null,
          scaleStartValue : null,
          scaleLineColor : "rgba(0,0,0,.1)",
          scaleLineWidth : 1,
          scaleShowLabels : true,
          scaleLabel : "&lt;%=value%&gt;",
          scaleFontFamily : "'proxima-nova'",
          scaleFontSize : 10,
          scaleFontStyle : "normal",
          scaleFontColor : "#909090", 
          scaleShowGridLines : true,
          scaleGridLineColor : "rgba(0,0,0,.05)",
          scaleGridLineWidth : 1, 
          bezierCurve : true,
          pointDot : true,
          pointDotRadius : 3,
          pointDotStrokeWidth : 1,
          datasetStroke : true,
          datasetStrokeWidth : 2,
          datasetFill : true,
          animation : true,
          animationSteps : 60,
          animationEasing : "easeOutQuart",
          onAnimationComplete : null
      }
      var ctx=document.getElementById("myChart").getContext("2d");
  var myLineChart = new Chart(ctx).Line(data, options);
  //console.log(myLineChart)
  </code></pre>