title: With C3.js, how can I maintain bar width ratio when zooming in?
body: <p>I have a c3.js bar graph with a subgraph and zooming enabled. I would like for the graph to show more x-tick labels and make the bars a little wider when the user selects a smaller area.</p>
  
  <p>Here's what my graph looks like zoomed out (left) and zoomed in (right): </p>
  
  <p><img src="https://i.stack.imgur.com/q7Get.png" alt="Zoomed Out"><img src="https://i.stack.imgur.com/8Cafg.png" alt="Zoomed In"></p>
  
  <p><a href="http://jsfiddle.net/2g9sLxhp/" rel="nofollow noreferrer">Here's a fiddle.</a> </p>
  
  <pre><code>var chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
          ['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01', '2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01', '2015-12-01', '2016-01-01', '2016-02-01', '2016-03-01', '2016-04-01', '2016-05-01', '2016-06-01', '2016-07-01', '2016-08-01'],
          ['y', 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20, 100, 200, 300, 200, 100, 450, 800, 900, 12, 70, 500, 450, 20]
        ],
        type: 'bar',
        color: function(color, d) {
          var color = d3.rgb("#E47911");
          if (d.index % 2 == 0) {
            color = color.darker(1.2);
          }
          return color;
        }
      },
      bar: {
        width: { ratio: 1.0 }
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: "%b",
            fit: true
          }
        },
      },
      subchart: {
        show: true
      }, 
      zoom: {
        enabled: true
      }
  });
  </code></pre>
  
  <p>I'd like it to look more like this when zoomed in: </p>
  
  <p><img src="https://i.stack.imgur.com/HFzWW.png" alt="What I want">.</p>
  
  <p>Is there a way to make this happen using C3? </p>