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.
#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 text on 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>