title: C3 js grouped bar chart scolling and fixing y axis issue
body: <p>Here is my output image:</p>
  
  <p><a href="https://i.stack.imgur.com/pK28Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pK28Z.png" alt="enter image description here"></a></p>
  
  <p>I have a grouped bar chart in C3. I have scroll with x-axis with respect to data. While scrolling x-axis my y axis moves along with. How to fix position of y-axis fixed on screen?
  Since I have to represent large number of data so I want scroll on x-axis and Y-axis need to be fixed and bar width need to same as previous because as number of data increases bar width gets automatically decreases.</p>
  
  <p>Here is my code:</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>$(function() {
    var months = ['Jan 2016', 'Feb2016', 'Feb2016', 'Jan 2016', 'Feb2016', 'Feb2016'];
    var chart = c3.generate({
      data: {
        bindto: '#chart',
        columns: [
          ['data1', 30, 200, 100, 30, 200, 100],
          ['data2', 130, 100, 140, 30, 200, 100]
        ],
        type: 'bar'
      },
      bar: {
        width: {
          ratio: 0.6
        }
      },
      axis: {
        x: {
          type: 'category',
          categories: months,
          label: {
            text: 'open cases',
            position: 'outer-middle'
          }
        },
        y: {
          label: {
            text: 'open cases',
            position: 'outer-middle'
          }
        }
  
  
      },
  
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.3/c3.css" rel="stylesheet" /&gt;
  &lt;!-- Load d3.js and c3.js --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.3/c3.js"&gt;&lt;/script&gt;
  
  
  &lt;body&gt;
    &lt;div style="width:300px;overflow-x:auto"&gt;
      &lt;div id="chart"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>