After rotating axis, ticks and legend overlaps and height doesn't work in c3js
<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>