DC.JS Composite Chart Not Displaying Last Value

Question

I have a composite bar/line chart, all of which is displaying correctly with the exception of the final bar. The data contains a dimension of 8 dates and two groups of values, one for teh bar and one for the line chart. I have examined the contents of the dimesnions and groups and all correct.

The 8th svg on the chart is present but the bar does not display, see attached image. SVG Inspector shows a rect is defined with height and width though a corresponding bar is not displayed on the chart.

I have played with .centerBar and .elasticX, .xAxisPadding and had no success. I have also tried changing chart dimensions and margins.

Code used to display the chart:

var firstWeek = d3.min(data, function (d) { return d.Week; });
var lastWeek = d3.max(data, function (d) { return d.Week; });

        var compositeKPIChart = dc.compositeChart("#W-chart");

        var KPIbChart = dc.barChart(compositeKPIChart);

        var KPIlChart = dc.lineChart(compositeKPIChart);

        compositeKPIChart.width(width)
                .height(0.9*width/2)
                .margins({ top: 10, right: 50, bottom: 30, left: 30 })
                .dimension(weekDim)
                .x(d3.time.scale().domain([firstWeek, lastWeek]))
                .xUnits(d3.time.mondays)
                .y(d3.scale.linear().domain([0, 100]))
                .compose([
                    dc.barChart(compositeKPIChart).group(barGroup, "%"),
                    dc.lineChart(compositeKPIChart).group(lineGroup, "Standard")
                ])
                .brushOn(false)
                .xAxis().ticks(d3.time.mondays).tickFormat(d3.time.format("%d %b"));

Gordon Gordon · Accepted Answer · 2016-03-23T02:47:06

If the element exists but isn't displayed, the first thing I'd check is the clipping rectangle. You can delete it in the debugger (or rename the link so that the reference is broken) to see your missing bar.

But that doesn't explain why it's missing in the first place. Probably what is going on its that your X domain is too small. Note that bars are left - aligned with the corresponding ticks (whereas the points on lines obviously have no width) so you might need to add a week to the top of your domain for the bar to show.

dc.js tends to take domains pretty literally, except in a few cases.

I'm surprised centerBar didn't help, if this is the case.

DC.JS Composite Chart Not Displaying Last Value

1 Answers