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?

Answer 1

You can move the left position with this:

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

Change 20 if its necessary