title: Adding vertical and horizontal scroll to Chart js Bar graph
body: <p>I'm working with Chart.js (version: 3.5.1) to plot graphs like line chart, bar chart. I am facing an issue with horizontal bar chart. As data points are huge, so its tough to see each bar with their labels separately. How to add both vertical and horizontal scroll to my horizontal bar chart, so that I can scroll and see all the bars separately.</p>
  <p>Image:
  <a href="https://i.stack.imgur.com/k7z8i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k7z8i.png" alt="Output" /></a></p>
  <p>For more clarification please let me know, how I should describe.</p>
  <p>Here is the code I have tried so far:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;style&gt;
  .col4{
      position: relative;
    min-height: 1px;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
  
  }
  
  .col4 {
      width: 75%;
  }
  
  .chart_box {
      box-sizing: border-box;
    margin: 15px 0 15px 0;
    
  
  }
  
  #chart_01,#chart_02 {
    width: 500px;
    height: 265px;
  }
  
  
  
  &lt;/style&gt; 
  
  
  
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;!-- Import Chart.js via CDN --&gt;
    
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.js&quot;&gt;&lt;/script&gt;
      
      
  &lt;/head&gt;
  
  
  &lt;div class=&quot;col4&quot;&gt;
      &lt;div class=&quot;chart_box&quot;&gt;
          &lt;canvas id=&quot;chart_01&quot;&gt;&lt;/canvas&gt;
              
      &lt;/div&gt;
  &lt;/div&gt; &lt;!--Graph_01--&gt;
  
  &lt;/body&gt; 
  
  &lt;/html&gt;
  
  
  
  
  
  
  
  &lt;script src=&quot;color-generator.js&quot;&gt; &lt;/script&gt;
  
  &lt;script&gt; 
  
  //// chart 1
  
  //setup
  const labels = [];
  var mydata = [];
  for (let i=0; i&lt;1000; i++)
  {
      labels.push(&quot;item-&quot;+(i).toString());
      mydata.push((i-500)*(i-500));
  }
  
  const data = {
      labels: labels,
      datasets: [
          {
              label: &quot;Data&quot;,
              data: mydata,
              backgroundColor: 'rgb(255, 199, 132)',
          },
      ]
  };
  
  const config = {
      type: 'bar',
      data: data,
      options: {
          indexAxis: 'y',
          plugins: {
              title: {
                  display: true,
                  text: 'Chart.js Bar Chart - Stacked'
              },
          },
          responsive: true,
          scales: {
              x: {
                  stacked: true,
              },
              y: {
                  stacked: true
              }
          }
      }
  };
  
  
  //chart render
  var myChart = new Chart(
      document.getElementById('chart_01').getContext(&quot;2d&quot;),
      config
  );
  
  
  &lt;/script&gt;
  </code></pre>