JEECoder JEECoder - 2 months ago 30
CSS Question

How to change color of text in c3.js charts?

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>

Answer

You can change text color by applying the below CSS lines, including managing font size as well:

.c3-axis-y text {
   fill: red;
   font-size:12px;
}
.c3-axis-x text {
    font-size:12px;
    fill:purple;
}

and here is the working demo code for that you can check it out.

Running DEMO

Comments