score:1

Accepted answer

First, remove the clip-path in that axis:

d3.select(".c3-axis-y").attr("clip-path", null)

Then, set the text-anchor to start:

d3.select(".c3-axis-y-label")
    .style("text-anchor", "start")
    .attr("transform", "translate(0,-16)");

Here is your code with the changes:

// Code goes here
(function(){
  
  var chart = c3.generate({ 
      padding: {
        top: 10
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      axis: {
          y: {
              label: {
                  text: 'Y Axis Label Something Else Blah! Blah! Blah!',
                  position: 'inner-top'
              } 
          }
      }
  });
  
  d3.select(".c3-axis-y").attr("clip-path", null)
  
  d3.select(".c3-axis-y-label")
  .style("text-anchor", "start")
  .attr("transform", "translate(0,-16)");
  
})();
/* Styles go here */

#chart {
  margin: 40px;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/c3@0.4.14/c3.css">
    <link rel="stylesheet" href="style.css">
    
    <script src="https://unpkg.com/d3@3.5.6/d3.js"></script>
    <script src="https://unpkg.com/c3@0.4.14/c3.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script src="script.js"></script>
  </body>
</html>


Related Query

More Query from same tag