Data graph labels cut off on c3.js chart
<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>