Dc.js: Bar-chart, bars are overlapping

Question

I'm currently working on a dc.js barchart that is working perfectly, except on one thing:

the X Axis represents several dates, but in a same day if an event has a bigger associated value than the previous one, it overlaps it.

Here is an example:

For example: on the 22th of February , it is possible to see that an orange bar is hidden by a blue one. So, is there a method that fixes this automatically? I've been looking through the Dc documentation, but i haven't found anything.

EDIT:

I'm posting the piece of code for the chart, so you can see what scales and methods i am using.

chart
          .width(680)
          .height(380)
          .x(d3.scaleTime().domain([firstDate,lastDate]))
          .xUnits(function(){return Object.keys(data.data).length;})
          .brushOn(false)
          .xAxisLabel('Aulas')
          .yAxisLabel('presencas')
          .dimension(DimensionHoras)
          .barPadding(0.5)
          .outerPadding(1)
          .group(sumGroup)
          .centerBar(true)
          .legend(dc.legend().legendText(function(d, i) { return console.log(d);}))
          .on('pretransition', function(chart) {
            chart.selectAll("rect.bar").on("click", function (d) {
              console.log(d);
              var yy = data.data.filter(function(h){
                return h.data_hora_ini == d.x
              });

             jQuery.each(yy,  function(i, val){
                        graficoAssiduidade(val.data_hora_ini, val.cd_curso, val.uc_cod, "Data: " + val.dataSemFormato + ", " + val.hor_nome_turno);

              });

                chart.filter(null)
                .filter(d.data.key)
                .redrawGroup();
            });
        });

          chart.on("renderlet", function(chart){
              chart.selectAll("rect.bar").style("fill", function(d){

                var filtro = data.data.filter(function(h){return h.data_hora_ini == d.x});
               // console.log(d);
                if(filtro[0].hor_nome_turno == "PL1")   
                 return "#6BAED6";
            else if(filtro[0].hor_nome_turno == "PL2")
                 return "orange";
            else if(filtro[0].hor_nome_turno == "PL3")
                 return "yellow";
            else if(filtro[0].hor_nome_turno == "TP1")
                 return "lightgreen";

                });
          });

try padding() in d3 scaleBand() github.com/d3/d3scale/blob/master/README.md#band_padding — Praveenkumar Kalidass

Gordon Gordon · Accepted Answer · 2018-06-22T16:19:36

I don't think this has to do with the size of the values, but simply that the bars are wider than the x values they represent, which are days.

Right now, with the way you specified .xUnits:

.xUnits(function(){return Object.keys(data.data).length;})

your chart is calculating the bar width as if there were no empty space at all, and the bars are allowed to take up all of it.

But since you probably want the gaps where there is no data, the bars should only be a day wide. To be perfectly correct, you should use

.xUnits(d3.timeDays)

But of course, now all the bars are going to be very narrow. I'm not sure of a good way around that.

Dc.js: Bar-chart, bars are overlapping

1 Answers