title: Data graph labels cut off on c3.js chart
body: <p>I'm graphing some lines on a c3.js line chart, but the data label of the leftmost point is being cut off:</p>
  
  <p><a href="https://i.stack.imgur.com/nGBP1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nGBP1.png" alt="enter image description here"></a></p>
  
  <p>I've tried adding padding to the chart, but this just adds padding to the overall chart.  What I need is some way to add some sort of padding to just the bar graph ticks.</p>
  
  <p>Something that I've considered:</p>
  
  <p>I've considered using the "transform" property:</p>
  
  <pre><code>.c3-texts .c3-text text {
    transform: translate(10px, 0);
  }
  </code></pre>
  
  <p>But moving the position of all the data labels to the right would end up causing the data labels on the right-hand side of the graph to get  cut off.</p>
  
  <p>Here's a simple example of labels getting cut off:</p>
  
  <p><a href="https://jsfiddle.net/x4dzmg0y/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>var chart = c3.generate({
      data: {
          columns: [
              ['data1', 30, 200, 100, 400, 150, 250]
          ],
  
          labels: {
           format: function(x){
               return "Test Label"
           }
          }
      }
  });
  </code></pre>
  
  <p>Any help would be appreciated. Thanks!</p>