Target in barchart in dc.js

Question

I'm using dc.js for charting, and it is great.

I'm currently trying to create barchart with target-lines for each bar, similar to bullet-charts, see http://bl.ocks.org/mbostock/4061961. I only need the target-line (+value); I can create the stacked bars perfectly.

I currently use a composite chart, where the target is a lineChart with interpolation set to step-before.

 composite
        .width(768)
        .height(480)
        .x(d3.scale.linear().domain([0,20]))
        .yAxisLabel("The Y Axis")
        .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .compose([
            dc.barChart(composite)
                .dimension(dim)
                .colors('red')
                .group(grp1, "Top Line"),
            dc.lineChart(composite)
                .dimension(dim)
                .colors('blue')
                .group(grp2, "Bottom Line")
                .interpolate("step-before")
            ])
        .brushOn(false)
        .render();

However, this creates ugly vertical lines. Is there a better approach?

Answer 1

Sorry for answering my own question :) I currently have this (with some modificatios to dc.js's barchart, as it is really buggy calculating barwidth etc.:)

    composite
        .width(300)
        .height(480)
        .x(d3.scale.ordinal().domain(['01M','03M','06M','12M'] ))
        .xUnits(dc.units.ordinal)
        .compose([
            dc.barChart(composite)
            .dimension(dim)
            .group(perf , "CatA")
            .stack(local, "CatB")
            .stack(akzo , "CatC")
            .colors(d2acolors)  
            .gap(0)
            ,
            dc.barChart(composite)
            .dimension(dim)
            .padding(16)
            .group(perf , "Perf")
            .colors("black")
            .gap(0)
            ,
            dc.barChart(composite)
            .dimension(dim)
            .colors("black")
            .padding(8)
            .target(true)
            .gap(0)
            .group(dateGroup, "Target")
            .valueAccessor(function(p) {
                return targets[p.key];
            })


         ])

        .yAxisLabel("Number of vendors")
        .xAxisLabel("Inactive for")
        .legend(dc.legend().x(540).y(10))
        .colors(d2acolors)
        .render();

The targets are basically also barcharts, but the bottom of the bar is rendered 5 px below the top, so it becomes a line. The 'padding' setting reduces the width of the bars on either side by the number of pixels that is entered.

I will try to publisch the changes I made in the dc.js's barchart somewhere.