CODEWITHSUNDEEP
dc.js
james
james

Reputation: 570

set row chart labels outside the bar like a barchart in Dc.js?

How can I have the labels outside the bar in a row chart with dc.js?

I'd like a graph like this:

enter image description here

however, the labels are inside the actual bars... is there any settings i need to change to have it like this?

Upvotes: 2

Views: 814

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 41

I finally got this working and here is the trick,

As mentioned by the Gordon it can be done on renderlet.

First I have gave the margin for my row chart ,

.margins({ top: 20, right: 20, bottom: 40, left: 110 })

Then took the label outside by giving x value in negative.

.labelOffsetX(-10)

This will perfectly move our label but its still need some style changes to look fine and that need to be done on renderlet,

.on('renderlet', function (chart) {
                            chart.selectAll("g.row  text")
                                .style("text-anchor", "end")
                                .call(function (t) {
                                    t.each(function (d) {
                                        var self = d3.select(this);
                                        var text = self.text();
                                        if (text.length > 14) {
                                            self.text('');
                                            text = text.substring(0, 14) + '..';
                                            self.text(text);
                                        }
                                    })
                                });
                        })

You can ignore .call() function as I place this just to make sure my label length does not cross certain limit.

Hope that work for you.!

Upvotes: 3

Related Questions