title: How to change color of text in c3.js charts?
body: <p>I am using c3.js to create line and bar charts.I want to change the color of x axis and y axis values. As I want black background for the chart so the text/values color on x-axis and y-axis must be white to be visible.
  I have tried using the css below but it doesnt work.</p>
  
  <pre><code>#chart .c3-text
          {
  
          color: white;
          }
  
   #chart c3-axis-axis
          {
          color:white;
  
          }
  #chart c3-text
          {
          color:white;
          }
  </code></pre>
  
  <p>is there a way to change the color of text on chart?</p>
  
  <p><strong>EDIT</strong>
  html code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;center&gt;
          &lt;div id="chart" style="width: 1000px; height: 500px;"&gt;&lt;/div&gt;
      &lt;/center&gt;
  
      &lt;script src="../../css/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="../../css/c3.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
       $(document).ready(function() {
  //       alert("in ajax");
  
            $.ajax({
  
                  type : "post", 
                  url : "../../GetMonthlyTickets",
  
                  success : function(result) {
                  var critical = result.critical;
                  var warning = result.warning;
                  var notif = result.notification;
  
                  critical.unshift("Critical");
                  warning.unshift("Warning");
                  notif.unshift("Notification");
  
  
  
                  var chart = c3.generate({
                      data: {
                           x: 'x',
  
                          columns: [
                               ['x', '2015-01-01', '2015-02-01', '2015-03-01', '2015-04-01', '2015-05-01', '2015-06-01','2015-07-01', '2015-08-01'],
                               critical,
                               warning,
                               notif
                          ],
                          onclick: function (d, element) { console.log("onclick", d, element); },
                          onmouseover: function (d) { console.log("onmouseover", d); },
                          onmouseout: function (d) { console.log("onmouseout", d); },
                      },
  
                      color: {
                          pattern: ['#FF0000', '#FFCC00', '#33CC33']
                      },
  
                      axis: {
                          x: {
                              label: 'Tickets',
                              type: 'timeseries',
                              height: 20,
                                  tick: {
                                      fit: true,
                                      format: "%b"                   //format: "%e %b %y"
  
                                  }
  
                          },
                          y: {
                              label: 'Score'
                          }
                      },
  
                      grid: {
                          x: {
                              show: true
                          },
                          y: {
                              show: true
                          }
                      },
  
                      size: {
                          height: 400,
                            width:  1000
                          },
  
                          zoom:
                          {
                           enabled: true
                          }   
  
              });             
          }
        });
     });
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>