title: How to Format X-axis tick values in C3.js
body: <p>Is it possible to change formatting of ticks in c3.js. For example Can I make <code>part of tick bold</code>? My chart has date and text at x-axis.. how Can I <code>make dates bolder</code> and change the ticks so that the text appears below the date?</p>
  
  <p><strong>change</strong> </p>
  
  <pre><code>Feb 01 Primaries and Caucuses 
  </code></pre>
  
  <p><strong>to</strong> </p>
  
  <pre><code>       Feb 01
  Primaries and Caucuses
  </code></pre>
  
  <p><a href="http://jsfiddle.net/yrzxj3x2/33/" rel="nofollow">js fiddle:</a>  </p>
  
  <pre><code>var chart = c3.generate({
           bindto: '#chart',
      data: {
        x: 'x',
          columns: [
          ["x", "2016-01-04", "2016-01-05", "2016-01-06", "2016-01-07", "2016-01-08", "2016-01-09", "2016-01-10", "2016-01-11", "2016-01-12", "2016-01-13", "2016-01-14", "2016-01-15", "2016-01-16", "2016-01-17", "2016-01-18", "2016-01-19", "2016-01-20", "2016-01-21", "2016-01-22", "2016-01-23", "2016-01-24", "2016-01-25", "2016-01-26", "2016-01-27", "2016-01-28", "2016-01-29", "2016-01-30", "2016-01-31", "2016-02-01", "2016-02-02", "2016-02-03"],
           ["Democrates", 49.85, 49.89, 49.82, 49.51, 49.42, 49.33, 49.24, 49.64, 49.57, 49.57, 49.01, 48.67, 48.7, 48.7, 48.7, 48.63, 48.63, 48.63, 48.63, 48.63, 48.61, 48.61, 48.68, 48.76, 48.84, 48.73, 48.76, 48.79, 48.81, 49.68, 49.63],
           ["Republicans", "50.15", "50.11", "50.18", "50.49", "50.58", "50.67", "50.76", "50.36", "50.43", "50.43", "50.99", "51.33", "51.30", "51.30", "51.30", "51.37", "51.37", "51.37", "51.37", "51.37", "51.39", "51.39", "51.32", "51.24", "51.16", "51.27", "51.24", "51.21", "51.19", "50.32", "50.37"]
          ],
           colors: {
              Democrates: '#4575b4',
              Republicans: '#d73027'
          },
      },
      axis: {
          x: {
              type: 'timeseries',
               max: '2016-11-08',
              tick: {
                 values: ["2016-02-01", "2016-06-14", "2016-11-08", "2016-09-26", "2016-10-19", "2016-07-18", "2016-07-28" ],
                  format: function (x) {
                    if (x == "Mon Feb 01 2016 00:00:00 GMT+0100 (CET)"){
                    return 'Feb 01' + 'Primaries and Caucuses '
                  } else if (x == "Tue Nov 08 2016 00:00:00 GMT+0100 (CET)") {
                     return 'Nov 08 Election Day'
  
                  } else if (x == "Mon Sep 26 2016 00:00:00 GMT+0200 (CEST)") {
                     return ' Sep 26 Start of Presidential Debates'
  
                  } else if (x == "Mon Jul 18 2016 00:00:00 GMT+0200 (CEST)") {
                     return 'Jul 25 Announcement of Nominees'
  
                  } else {
                    var format=  d3.time.format("%b %d");
                                  var date = format(x)
                                  return date
                  }},
                  fit: false
          }
          }
      },
      grid: {
       y: {
          lines: [
                  {value: 50},
  
              ]
       },
       x: {
      lines: [
        {value: "2016-01-08", text: "Want to rorate this text in 180 degrees",
        class: "xLineLable", position: "end"}
  
  
      ]
    }
    }
  });
  </code></pre>