score:3

Accepted answer

Unlike what you said, you can customize it with D3. Just select the label (by class) and set the transform:

d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")

here is the demo:

// 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',
          position: 'outer-top'
        }
      }
    }
  });

  d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")


})();
<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>


Related Query

More Query from same tag