Reputation: 5767
Can any one suggest me the way of adding style to the title of the C3.js donut chart ?
For any donut c3 chart is there any option to set the title style ?
I am using this code for my Donut chart.
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "Usage " // How to do? style("color", "#59C2E6")
}
});
Upvotes: 4
Views: 4328
Reputation: 1256
just override the fill property of .c3-chart-arcs-title style class ,like this :
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.5/c3.min.css" />
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://c3js.org/js/c3.min-12912fb6.js"></script>
<style>
.c3-chart-arcs-title {
fill: #59C2E6;
}
</style>
<script>
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "Usage " // How to do? style("color", "#59C2E6")
}
});
setTimeout(function () {
chart.axis.labels({
x: 'New X Axis Label',
y: 'New Y Axis Label',
y2: 'New Y2 Axis Label',
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 300, 600, 200, 400, 500]
]
});
chart.axis.labels({y: 'New Y Axis Label Again'});
}, 2000);
</script>
</body>
</html>
Upvotes: 0
Reputation: 214345
Donut title
use class c3-chart-arcs-title
by render.
You can just override c3-chart-arcs-title
style. Your code should be like:
.c3-chart-arcs-title {
fill: red;
font-size: 16px;
}
Upvotes: 6