title: After rotating axis, ticks and legend overlaps and height doesn't work in c3js
body: <p>For my business purpose, graph should be rotated. There is a property <code>axis.rotated</code> and I made it <code>true</code>. It beautifully rotated but now <code>y-axis</code> values and <code>legends</code> being overlapped. </p>
  
  <p><a href="https://jsfiddle.net/DreamRunner/x9r4zk0j/4/" rel="nofollow">src in jsfiddle of my problem</a> </p>
  
  <p>I tried <code>axis.y.height</code> to 100 or more greater but it doesn't work.</p>
  
  <p>Code:</p>
  
  <pre><code>var chart = c3.generate({
  bindto: '#my-chart',
  data: {
      columns: [
          ['data1', 3000, 20000, 10000, 40000, 15000, 25000],
          ['data2', 130, 100, 140, 200, 150, 50]
      ],
      type: 'bar'
  },
  axis: {
           rotated: true,
           x: {
                type: "categorized",
                categories:['abc','abcabc','abcabcabc','abcabcabc','abcabcabcabcabc','abcd'],
                tick: {
                          rotate: -60,
                          multiline: false
                    },
                    height:100
                },
           y: {
                tick: {
                     rotate : -60
                 },
                 height:50
             }
      }
  });
  </code></pre>
  
  <p>But if I put <code>axis.y.tick.rotate:60</code>, It works fine. </p>