I use c3.js to create lines and charts. I want to change the color of the x-axis and y-axis values. Since I want a black background for the chart, so the color of the text / values on the x axis and y axis must be white in order to be visible. I tried using css below, but it does not work.
#chart .c3-text { color: white; } #chart c3-axis-axis { color:white; } #chart c3-text { color:white; }
Is there a way to change the color of the text on the chart?
EDIT html code:
<body> <center> <div id="chart" style="width: 1000px; height: 500px;"></div> </center> <script src="../../css/d3.v3.min.js" charset="utf-8"></script> <script src="../../css/c3.js"></script> <script> $(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 } }); } }); }); </script> </body>