CODEWITHSUNDEEP
javascriptcssd3.jsdc.js
Koba
Koba

Reputation: 1544

Enlarge text labels in dc.js

I have a bunch of bars plotted using dc.js for which I want to increase the font size of labels. I think there is an easy solution using the renderLet function, however, I would have to do the renderLet function for each graph and I have a bunch. I am wondering if there is a way to increase the label text size using CSS. I provide a jsfiddle with three types of charts. Here is code for it. Let me know if you have any ideas. Thanks.

HTML

<body> 
    <div id='pie'><div><h3>Pie</h3></div></div>
    <div id='row'><div><h3>Row</h3></div></div>
    <div id='bar'><div><h3>Bar</h3></div></div>
</body>

JS

    var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "5"
}];

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group();

dc.pieChart("#pie")
    .width(200).height(200)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {
    return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});

dc.rowChart("#row")
    .width(400).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .label(function (d) {return d.key + " " + d.value;})

dc.barChart("#bar")
    .width(400).height(150)
    .dimension(XDimension)
    .group(YDimension)
    .x(d3.scale.ordinal().domain(["A","B","C"]))
    .xUnits(dc.units.ordinal)

dc.renderAll();

Upvotes: 1

Views: 2374

Answers (1)

Gordon
Gordon

Reputation: 20120

Yes! You can customize the text size and font by overriding styles in the cascading style sheets.

Take a look at the styles in

https://github.com/dc-js/dc.js/blob/master/dc.css

for an idea of what can be customized.

Upvotes: 2

Related Questions