title: chartjs : how to set custom scale in bar chart
body: <p>Chartjs is a pretty excellent open source tool, but had a quick question about a bar chart I'm trying to create. Given this chart data:</p>
  
  <pre><code>    var chartData = {
          labels : labels,
          datasets :[
              {
                  fillColor : "rgba(220,220,220,0.5)",
                  strokeColor : "rgba(220,220,220,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  scaleOverride: true,
                  scaleSteps: 9,
                  data : values
              }
          ]   
      }
  </code></pre>
  
  <p>I had hoped that the chart would draw with top value of 10, whether or not there were any values of 10. I thought the scaleOverride and scaleSteps would accomplish that. </p>
  
  <p>Is it possible to get that output? I went thru the docs and did not see any other obvious options to set. </p>
  
  <h1>Update</h1>
  
  <p>got it to work. My orig post did not include the javascript function at the bottom. </p>
  
  <pre><code>&lt;div class="barChartTest" id="rating_12229" onload="drawChart();"&gt;
  &lt;input type="hidden" class="rating-component" comp-name="test1" comp-value="6"/&gt;
  &lt;input type="hidden" class="rating-component" comp-name="test2" comp-value="7"/&gt;
  &lt;input type="hidden" class="rating-component" comp-name="test3" comp-value="6"/&gt;
  &lt;input type="hidden" class="rating-component" comp-name="test4" comp-value="5"/&gt;
  &lt;input type="hidden" class="rating-component" comp-name="test5" comp-value="1"/&gt;
  &lt;/div&gt; 
  &lt;canvas id="rating_12229" width="50" height="20"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>and here is my javascript:</p>
  
  <pre><code>function buildRatingChartData(ratingId){
      var comps = document.getElementById(ratingId).getElementsByClassName("rating-component");   
      var labels = [];
      var values = [];
  
      for(var i=0; i&lt;comps.length; i++){
  
              labels.push(comps[i].getAttribute("comp-name"));
              values.push(comps[i].getAttribute("comp-value"));
      }
  
      var chartData = {
          labels : labels,
          datasets :[
              {
                  scale: 10,
                  fillColor : "rgba(220,220,220,0.5)",
                  strokeColor : "rgba(220,220,220,0.8)",
                  highlightFill: "rgba(220,220,220,0.75)",
                  highlightStroke: "rgba(220,220,220,1)",
                  scaleOverride:true,
                  scaleSteps:9,
                  scaleStartValue:0,
                  scaleStepWidth:1,
                  data : values
              }
          ]   
      }
  
      return chartData;
  
  }
  </code></pre>
  
  <p>here was where I added those options and got the output I wanted:</p>
  
  <pre><code>function drawCharts(){
      var ratings = document.getElementsByClassName("brewRatingData");
      for(var i=0; i&lt;ratings.length; i++){
  
          var ratingId = ratings[i].getAttribute("id");   
          var canvasId = ratingId.replace("brewRating", "coffeeBarChart");
  
        var brewChartData = buildRatingChartData(ratingId);
        var ctx = document.getElementById(canvasId).getContext("2d");
        window.myBar = new Chart(ctx).Bar(brewChartData, {
          responsive : true,
              scaleOverride:true,
              scaleSteps:10,
              scaleStartValue:0,
              scaleStepWidth:1,
        });   
  
      }
  }   
  </code></pre>