title: Using chartjs and rangeslider to build dynamic horizontal bar chart with constant height and spacing
body: <p>I am trying to build a horizontal bar chart dependant on rangeslider value. The number of elements are dynamic and I am updating the chart based on number of data points I have to show.</p>
  <p>The problem is that the height of the chart always remains constant leading to different spacing between bars as the number of bars increase/decrease in the bar chart based on rangeslider value.</p>
  <p>For example, when there are 4 data points vs when there are 7 data points:
  <a href="https://i.stack.imgur.com/Yh9p1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yh9p1.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var $rangeslider_1 = $('#js_amount_range_1');  
  var $amount_1 = $('#js_amount_input_1'); 
  var ctx = document.getElementById('chart').getContext('2d');
  var canvas_ctx = document.getElementById('chart');
  let datavariable = [];
  
  var $chart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like','India Mid Cap','US Equities'],
              datasets: [{
          barPercentage: 1.0,
          categoryPercentage: 0.8,
                  label: '',
                  backgroundColor: [
                          "#1329e6",
                         "#4254eb",
                        "#5a69ee",
                        "#717ff0",
                        "#8994f3" ,
                        "#a1a9f5",
                        "#b8bff8",
                        "#d0d4fa",
                        "#e7eafd"
                      ],
                  borderColor: '#33b5e5',
          barThickness: 30,
                  data: [15,25,20,30,5,5],
                  datalabels: {
                      color: 'blue',
                      anchor: 'end', 
                      align: 'right',
                      offset: 10,
                      formatter: (val) =&gt; {
                        return val + ' %';
                      },
                      display: function(context) {
                        return context.dataset.data[context.dataIndex] !== 0; // or &gt;= 1 or ...
                      }
                  }
              }]
              
          },
          plugins: [ChartDataLabels],
          options: { 
              responsive:true,
              animation: {
                    duration: 0
               },
              indexAxis: 'y',
              
              legend:{
                  display:false
              },
              legend: {
               display: false //This will do the task
              },
              plugins:{
                  legend:{
                      labels:{
                          boxWidth: 0
                      }
                  }
              },
               
              title: {
                  display:false,
                  text:'Text'
              },
              layout: {
                  padding: {
                      right: 40
                  }
              },
              scales: {
                  x: {
                      ticks:{
                          display: false
                      },
                      beginAtZero: true,
                      grid: {
                          display: false,
                          drawBorder: false
                      }
                  },
                  y: {
                      ticks: {
                          font: {
                              size: 14
                          }
                      },
                      beginAtZero: true,
                      grid: {
                          display: false,
                          drawOnChartArea: false,
                          drawBorder: false
                      } ,
  
                  },
                   
                  /*xAxes: [{ 
                      display: true,
                      stacked: false,
                      grid: {
                          offset: false,
                      },
                  
                  }],
                  
                  yAxes: [{ 
                       
                      display: true,
                      scaleLabel: {
                          display: true, 
                      },
                      ticks: {    
                          min: 0,
                          stepSize: 5
                      }
                  }] */
              }
          } 
  }); 
  
  $(document).on('input', '#js_amount_range_1', function() {
   
      $chart.data.datasets = [];
      $chart.data.labels = [];
      labels2 = [];
      var slider_changed_value = $(this).val();
      
      $('#js_amount_input_1').empty();
      var num1 = $(this).val();
      //var num = 45;
      //console.log(num1.toFixed(2) );
      if(num1 % 1 != 0){
          $('#js_amount_input_1').text(num1);
      }else{
          $('#js_amount_input_1').text(Math.floor(num1).toFixed(1));
      }
      
      
          
          if(slider_changed_value == 0.5){
              var data =[ 
                  [10,40,20,30] 
              ];
              var labels2  =['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like'];
          }else if(slider_changed_value == 1){
              var data =[ 
                  [15,40,15,30] 
              ];
              var labels2  =['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like'];
          }else if(slider_changed_value == 1.5){
              var data =[ 
                  [15,25,20,30,5,5] 
              ];
              var labels2  =['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like', 'India Mid Cap', 'US Equities'];
          }else if(slider_changed_value == 2){
              var data =[ 
                  [20,10,20,30,10,10] 
              ];
              var labels2  =['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like', 'India Mid Cap', 'US Equities'];
          }else if(slider_changed_value == 2.5){
              var data =[ 
                  [20,5,20,30,10,15] 
              ];
              var labels2  =['Govt Bonds','Liquid Funds', 'India Bonds','Debt Like', 'India Mid Cap', 'US Equities'];
          }else if(slider_changed_value == 3){
              var data =[ 
                  [20,20,30,15,15] 
              ];
              var labels2  =['Govt Bonds', 'India Bonds','Debt Like',   'India Mid Cap',  'US Equities'];
          }else if(slider_changed_value == 3.5){
              var data =[ 
                  [20, 20,25, 20, 15] 
              ];
              var labels2  =['Govt Bonds',  'India Bonds','Debt Like',  'India Mid Cap',   'US Equities'];
          }else if(slider_changed_value == 4){
              var data =[ 
                  [20, 20,20, 20, 5,15] 
              ];
               var labels2  =['Govt Bonds', 'India Bonds','Debt Like',  'India Mid Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 4.5){
              var data =[ 
                  [20, 20,15, 20, 5,15] 
              ];
              var labels2  =['Govt Bonds', 'India Bonds','Debt Like',   'India Mid Cap',  'China Equities', 'US Equities'];
          }else if(slider_changed_value == 5){
              var data =[ 
                  [20, 20,10,5,25, 5,15] 
              ];
              var labels2  =['Govt Bonds',  'India Bonds','Debt Like', 'India Large Cap', 'India Mid Cap',  'China Equities', 'US Equities'];
          }else if(slider_changed_value == 5.5){
              var data =[ 
                  [20,20,5,10,25,5,15] 
              ];
              var labels2  =['Govt Bonds', 'India Bonds','Debt Like', 'India Large Cap', 'India Mid Cap', 'China Equities', 'US Equities'];
          }else if(slider_changed_value == 6){
              var data =[ 
                  [20, 20, 15,25, 5,15] 
              ];
              var labels2  =['Govt Bonds', 'India Bonds',  'India Large Cap', 'India Mid Cap',  'China Equities', 'US Equities'];
          }else if(slider_changed_value == 6.5){
              var data =[ 
                  [15, 20, 20,25, 5,15] 
              ];
              var labels2  =['Govt Bonds',  'India Bonds', 'India Large Cap', 'India Mid Cap',  'China Equities', 'US Equities'];
          }else if(slider_changed_value == 7){
              var data =[ 
                  [10, 20, 25,25, 5,15] 
              ];
              var labels2  =['Govt Bonds', 'India Bonds', 'India Large Cap', 'India Mid Cap',  'China Equities', 'US Equities'];
          }else if(slider_changed_value == 7.5){
              var data =[ 
                  [5, 20, 25,25,5,5,15] 
              ];
              var labels2  =['Govt Bonds',  'India Bonds',  'India Large Cap', 'India Mid Cap', 'India Small Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 8){
              var data =[ 
                  [20,30,25,5,5,15] 
              ];
              var labels2  =[ 'India Bonds', 'India Large Cap', 'India Mid Cap', 'India Small Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 8.5){
              var data =[ 
                  [15,35,25,5,5,15] 
              ];
              var labels2  =[ 'India Bonds', 'India Large Cap', 'India Mid Cap', 'India Small Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 9){
              var data =[ 
                  [10,35,25,10,5,15] 
              ];
              var labels2  =[ 'India Bonds', 'India Large Cap', 'India Mid Cap', 'India Small Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 9.5){
              var data =[ 
                  [5,40,25,10,5,15] 
              ];
              var labels2  =[ 'India Bonds', 'India Large Cap', 'India Mid Cap', 'India Small Cap','China Equities', 'US Equities'];
          }else if(slider_changed_value == 10){
              var data =[ 
                  [40,25,15,5,15] 
              ];
              var  labels2  =  ['India Large Cap','India Mid Cap','India Small Cap','China Equities','US Equities'];
                   
              
          }else{
              var data =[ 
                  [0,0,0,0,0,0,0,0,0]
              ];
           }
          for (i = 0; i &lt; labels2.length; i++) {
              labels = labels2[i];
              
              $chart.data.labels.push(labels);
          }
          for (i = 0; i &lt; data.length; i++) {
              var dataSet = { 
                  label: '',
                  data: data[i], 
                  barThickness: 30,
          barPercentage: 1.0,
          categoryPercentage: 0.2,
                  backgroundColor: [
                       "#1329e6",
                         "#4254eb",
                        "#5a69ee",
                        "#717ff0",
                        "#8994f3" ,
                        "#a1a9f5",
                        "#b8bff8",
                        "#d0d4fa",
                        "#e7eafd",
                      ],
                  datalabels: {
                      color: 'blue',
                      anchor: 'end', 
                      align: 'right',
                      offset: 10,
                      formatter: (val) =&gt; {
                        return val + ' %';
                      },
                      display: function(context) {
                        return context.dataset.data[context.dataIndex] !== 0; // or &gt;= 1 or ...
                      }
                  }
              }
              $chart.data.datasets.push(dataSet);
          }
      $chart.update();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js?ver=5.8.1' id='jquery-min-js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js?ver=5.8.1' id='rangeslider-min-js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='https://cdn.jsdelivr.net/npm/chart.js?ver=5.8.1' id='charT-js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js?ver=5.8.1' id='Chartjs-plugin-js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="rangebox"&gt;
          &lt;label&gt; Risk Score
          &lt;/label&gt;
          &lt;input type="range" min="1"  max="10" step="0.5" value="1.5" id="js_amount_range_1" /&gt;  
           
          &lt;span id="js_amount_input_1"&gt;1.5&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="chartbox"&gt;
          &lt;canvas id="chart"&gt;&lt;/canvas&gt;  
      &lt;/div&gt; 
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have created a fiddle with the code too: <a href="https://jsfiddle.net/pon8da02/" rel="nofollow noreferrer">https://jsfiddle.net/pon8da02/</a></p>
  <p>I am trying to build it such that the size of the bars and the spacing in between remains constant (with the graph extending downwards as elements increase).</p>
  <p>How can I do this?</p>