title: C3.js Legends are overlapping
body: <p>I'm trying to create a line chart, like <a href="http://jsfiddle.net/nzw7449m/3/" rel="nofollow noreferrer">here</a>, but the legend are overlapping.</p>
  
  <p><a href="https://i.stack.imgur.com/mOEsE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mOEsE.png" alt="enter image description here"></a></p>
  
  <p>JavaScript code I used :</p>
  
  <pre><code>var chart = c3.generate({
      data: {
          columns: [
              ['Country 1', 6, 5.95, 6.69, 7.47, 3.53, 0.92, 7.21, 4.02, 3.97, 4.18, 4.27],
              ['Country 2', 7.45, 7.31, 8.69, 8.74, 5.7, -6.15, 4.4, 4.67, 3.8, 2.02, 3.04],
              ['Country 3', 3.82, 3.06, 2.56, 4.43, 2.2, 1.23, 2.53, 2.4, 3.53, 2.62, 2.58],
              ['Country 4', 7.58, 8.57, 8.24, 7.54, 4.69, 3.68, 7.62, 6.55, 3.64, 4.02, 4.63],
              ['Country 5', 6.48, 5.78, 6.1, 6.51, 4.27, 1.15, 8.04, 4.57, 5.51, 4.99, 5.1]
          ],
      },
      legend: {
          show: true
      }
  });
  d3.selectAll("#chart .c3-legend-item").style("font-size","20px"); 
  </code></pre>