c3 chart title

<!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>

// Code goes here
(function(){
  
  var chart = c3.generate({ 
      title: {
        show: false,
        text: 'My Line Chart',
        position: 'top-center',   // top-left, top-center and top-right
        padding: {
          top: 20,
          right: 20,
          bottom: 40,
          left: 50
        }
      },
      size: {
        width: 400,
        height: 300
      },
      padding: {
        top: 20
      },
      data: {
          columns: [
              ['data', 30, 200, 100, 400, 150, 250]
          ]
      },
      legend: {
          position: 'inset',
            inset: {
            anchor: 'top-left',
            x: 20,
            y: 0,
            step: 1
          },
      }, 
      grid: {
        y: {
            show: true
        },
        x: {
          show: true
        }
      },
      axis: {
          rotated: true,
          y: {
              show: true,
              label: {
                  text: 'Y Axis',
                  position: 'inner-top'
              } 
          },
          x: {
            show: true,
            padding: 0
          }
      },
      point: {
        show: true,
        r: 2.5
      }
  });
  
  // d3.select("svg").append("text")
  //   .attr("x", 300 )
  //   .attr("y", 10)
  //   .style('font-size', '20px')
  //   .style("text-anchor", "middle")
  //   .text("Your chart title goes here");
  
  d3.select('#chart .c3-title')
    .style('font-size', '4em');
    
    // https://stackoverflow.com/questions/45142519/c3-js-chart-title-overlapped-if-i-change-the-size-of-title
    d3.select('#chart .c3-title')
    .style('font-size', '4em')
    .style("dominant-baseline", "central");


})();

/* Styles go here */

#chart {
  margin: 20px;
}