title: Chartist.js - increase spacing between scale points of Y Axis
body: <p>I am working on a personal project creating graphs to show data about my music listening habits from Last FM's API.</p>
  
  <p>I am grabbing the JSON data via an AJAX request and then using the returned JSON objects to populate a graph created using the Chartist.js JS library.</p>
  
  <p>I'm having what I consider a quite straightforward issue in that I can't work out how to increase the overall size of the chart? To be more specific I'd like to increase the spacing between each scale point on the Y axis so that you can see more accurately what each figure is.</p>
  
  <p>I have created the following JS Fiddle to show my problem:</p>
  
  <p><a href="http://jsfiddle.net/jt96usn9/" rel="nofollow">http://jsfiddle.net/jt96usn9/</a></p>
  
  <p>According to the documentation, I believe I need to change an option attribute known as scaleMinSpace but upon changing this figure no changes seem to occur.</p>
  
  <p>Any help would be great?!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var lastfm = {};
  
  lastfm.tracker = (function(){
  
   //Set up an object for DOM elements and data source
   var config = {
    getRecentTracksURL: "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;user=jimmersjukebox&amp;api_key=6db1989bd348bf91797bad802c6645d8&amp;format=json",
    getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&amp;user=jimmersjukebox&amp;api_key=6db1989bd348bf91797bad802c6645d8&amp;format=json",
    user: "jimmersjukebox",
    recentTracksElement: $(".recent-tracks"),
    currentlyPlayingActiveClass: $(".current")
   };
  
  
   var setupLastFM = function(){
    createPopularArtistsChart();
   };
  
  
  
   var createPopularArtistsChart = function(){
  
  
    $.getJSON(config.getMostPopularArtistsURL,function(data){
     var artistData = data.topartists.artist,
     artists = $.map(artistData, function(artist) {
      return [[artist.name]];
     }),
  
     playcounts = $.map(artistData, function(playcount) {
      return [[playcount.playcount]];
     });
  
  
     // These are the default options of the line chart
     var options = {
       // Options for X-Axis
       axisX: {
         // The offset of the labels to the chart area
         offset: 10,
         // If labels should be shown or not
         showLabel: true,
         // If the axis grid should be drawn or not
         showGrid: true,
         // Interpolation function that allows you to intercept the value from the axis label
         labelInterpolationFnc: function(value){return value;}
       },
       // Options for Y-Axis
       axisY: {
         scaleMinSpace: 100
       },
       // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
       width: undefined,
       // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
       height: undefined,
       // If the line should be drawn or not
       showLine: true,
       // If dots should be drawn or not
       showPoint: true,
       // Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
       lineSmooth: true,
       // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
       low: undefined,
       // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
       high: undefined,
       // Padding of the chart drawing area to the container element and labels
       chartPadding: 15,
       // Specify the distance in pixel of bars in a group
       seriesBarDistance: 15,
       // Override the class names that get used to generate the SVG structure of the chart
  
     };
  
     data = {
       // A labels array that can contain any sort of values
       labels: artists.slice(0,10),
       // Our series array that contains series objects or in this case series data arrays
       series: [
        playcounts.slice(0,10)
       ]
     };
  
     // Create a new line chart object where as first parameter we pass in a selector
     // that is resolving to our chart container element. The Second parameter
     // is the actual data object.
     Chartist.Bar('.ct-chart', data, options);
  
    });
  
  
  
   };
  
   return{
    config: config,
    init: function(){
     setupLastFM();
    }
   };
  })();
  $(window).load(lastfm.tracker.init);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Chartist.js 0.2.4
   * Copyright © 2014 Gion Kunz
   * Free to use under the WTFPL license.
   * http://www.wtfpl.net/
   */
  
  .ct-chart .ct-label{fill:rgba(0,0,0,.4);font-size:.75rem}.ct-chart .ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-chart .ct-point{stroke-width:10px;stroke-linecap:round}.ct-chart .ct-line{fill:none;stroke-width:4px}.ct-chart .ct-area{stroke:none;fill-opacity:.1}.ct-chart .ct-bar{fill:none;stroke-width:10px}.ct-chart .ct-slice.ct-donut{fill:none;stroke-width:60px}.ct-chart .ct-series.ct-series-a .ct-bar,.ct-chart .ct-series.ct-series-a .ct-line,.ct-chart .ct-series.ct-series-a .ct-point,.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut{stroke:#d70206}.ct-chart .ct-series.ct-series-a .ct-area,.ct-chart .ct-series.ct-series-a .ct-slice:not(.ct-donut){fill:#d70206}.ct-chart .ct-series.ct-series-b .ct-bar,.ct-chart .ct-series.ct-series-b .ct-line,.ct-chart .ct-series.ct-series-b .ct-point,.ct-chart .ct-series.ct-series-b .ct-slice.ct-donut{stroke:#F05B4F}.ct-chart .ct-series.ct-series-b .ct-area,.ct-chart .ct-series.ct-series-b .ct-slice:not(.ct-donut){fill:#F05B4F}.ct-chart .ct-series.ct-series-c .ct-bar,.ct-chart .ct-series.ct-series-c .ct-line,.ct-chart .ct-series.ct-series-c .ct-point,.ct-chart .ct-series.ct-series-c .ct-slice.ct-donut{stroke:#F4C63D}.ct-chart .ct-series.ct-series-c .ct-area,.ct-chart .ct-series.ct-series-c .ct-slice:not(.ct-donut){fill:#F4C63D}.ct-chart .ct-series.ct-series-d .ct-bar,.ct-chart .ct-series.ct-series-d .ct-line,.ct-chart .ct-series.ct-series-d .ct-point,.ct-chart .ct-series.ct-series-d .ct-slice.ct-donut{stroke:#453D3F}.ct-chart .ct-series.ct-series-d .ct-area,.ct-chart .ct-series.ct-series-d .ct-slice:not(.ct-donut){fill:#453D3F}.ct-chart.ct-square{display:block;position:relative;width:100%}.ct-chart.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-chart.ct-square:after{content:"";display:table;clear:both}.ct-chart.ct-square&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-second{display:block;position:relative;width:100%}.ct-chart.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-chart.ct-minor-second:after{content:"";display:table;clear:both}.ct-chart.ct-minor-second&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-second{display:block;position:relative;width:100%}.ct-chart.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-chart.ct-major-second:after{content:"";display:table;clear:both}.ct-chart.ct-major-second&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-third{display:block;position:relative;width:100%}.ct-chart.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-chart.ct-minor-third:after{content:"";display:table;clear:both}.ct-chart.ct-minor-third&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-third{display:block;position:relative;width:100%}.ct-chart.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-chart.ct-major-third:after{content:"";display:table;clear:both}.ct-chart.ct-major-third&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-chart.ct-perfect-fourth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fourth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-chart.ct-perfect-fifth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fifth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-sixth{display:block;position:relative;width:100%}.ct-chart.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-chart.ct-minor-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-minor-sixth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-golden-section{display:block;position:relative;width:100%}.ct-chart.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-chart.ct-golden-section:after{content:"";display:table;clear:both}.ct-chart.ct-golden-section&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-sixth{display:block;position:relative;width:100%}.ct-chart.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-chart.ct-major-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-major-sixth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-seventh{display:block;position:relative;width:100%}.ct-chart.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-chart.ct-minor-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-minor-seventh&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-seventh{display:block;position:relative;width:100%}.ct-chart.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-chart.ct-major-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-seventh&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-octave{display:block;position:relative;width:100%}.ct-chart.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-chart.ct-octave:after{content:"";display:table;clear:both}.ct-chart.ct-octave&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-tenth{display:block;position:relative;width:100%}.ct-chart.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-chart.ct-major-tenth:after{content:"";display:table;clear:both}.ct-chart.ct-major-tenth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-eleventh{display:block;position:relative;width:100%}.ct-chart.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-chart.ct-major-eleventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-eleventh&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-twelfth{display:block;position:relative;width:100%}.ct-chart.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-chart.ct-major-twelfth:after{content:"";display:table;clear:both}.ct-chart.ct-major-twelfth&gt;svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-double-octave{display:block;position:relative;width:100%}.ct-chart.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-chart.ct-double-octave:after{content:"";display:table;clear:both}.ct-chart.ct-double-octave&gt;svg{display:block;position:absolute;top:0;left:0}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/chartist/0.2.4/chartist.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="chart-container"&gt;
                  &lt;div class="ct-chart"&gt;&lt;/div&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>