Menu
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>
248
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
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
