DC.js bar chart x-axis labels not aligned with bars

Question

Used DC.js to create stacked bar chart with ordinal x-axis.

Versions used: DC.js version 1.7.5 crossfilter.js version 1.3.12 D3.js version 3.5.17

The problem is that the chart's x-axis labels are not aligned with bars. They are actually shifted two ticks to right so last two labels have no bars above them.

Edit to remove - ~~Also can't select the right most bar to filter data eg hover over bar doesn't show selector to click and activate cross filter.~~ - it was just two chart margins overlapping blocking cursor.

Here is screenshot of chart indicating problems.

The x-axis is ordinal set using .xUnits(dc.units.ordinal)

I used a renderlet to change x-axis label orientation so they are vertical. If I remove renderlet it doesn't change the problems above.

Here is my chart div and javascript code.

<div id="month-chart"></div>

<script type="text/javascript">
    d3.csv("merged_hostname.csv", function(data) {

        var parseDate = d3.time.format("%Y-%m-%d").parse;

        data.forEach(function(d) {
            d.date = parseDate(d.date);
            d.sessions = +d.sessions;
            d.ad_requests = +d.ad_requests;
            d.bounceRate = +d.bounceRate;
            d.clicks = +d.clicks;
            d.earnings = +d.earnings;
            d.newUsers = +d.newUsers;
            d.sessionDuration = +d.sessionDuration;
            d.sessionsPerUser = +d.sessionsPerUser;
            d.twitterSessions = +d.twitterSessions;
            d.users = +d.users;
        });

        var ndx  = crossfilter(data);

        var yyyymmDim = ndx.dimension(function(d) { return d["yyyymm"]; });

        var PPCCByYYYYMM = yyyymmDim.group().reduceSum(function(d) {   
            if (d.PPCC === "PPCC") { 
                return +d.sessions; 
            }else{
                return 0;
            }
            });

        var otherByYYYYMM = yyyymmDim.group().reduceSum(function(d) {   
            if (d.PPCC === "Other") { 
                return +d.sessions; 
            }else{
                return 0;
            }
            });

        monthChart = dc.barChart("#month-chart");

        monthChart
            .height(200)
            .width(500)
            .margins({top: 10, right: 10, bottom: 50, left: 40})
            .dimension(yyyymmDim)
            .group(PPCCByYYYYMM)
            .stack(otherByYYYYMM)
            .transitionDuration(500)
            .brushOn(true)
            .elasticY(true)
            .yAxisLabel('sessions')
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .renderlet(function (chart) {
                chart.selectAll("g.x text")
                .attr('dx', '-30')
                .attr('transform', "rotate(-90)");
            });

        dc.renderAll();

    });
</script>

Any ideas what can causes these issues and how to resolve?

Are you sure it doesn't have to do with the renderlet rotation? That dx on its own might knock the labels out of alignment and the canonical axis label rotation example doesn't use that. — Gordon
Renderlet rotation was only solution I found. The .attr('dx', '-30') just moves label down so doesn't overlap chart. But thanks, the canonical example gave me some more things to play with, and my problem is fixed by just adding .attr("y", 0) — curtisp

David Jiménez David Jiménez · Accepted Answer · 2016-08-31T19:50:08

You can move the left position with this:

.attr('transform', "translate(-20,0) rotate(-90)");

Change 20 if its necessary

DC.js bar chart x-axis labels not aligned with bars

1 Answers