CODEWITHSUNDEEP
javascriptd3.jsdc.js
Simon
Simon

Reputation: 205

dc.js x axis overlapping with Dates

I have a composite chart with time on the x-axis. The dates are overlapping mainly because when a new month occurs, it shows the month and there is no space. See screeshot.enter image description here

Code for composite 

var parseDate = d3.time.format("%d/%m/%Y").parse;
    data.forEach(function (d) {
        d.Date = parseDate(d.Date);
        d.total = d.Alertness + d.Accuracy + d.Concentration + d.ErrorAwareness + d.SelfControl;
        d.Year = d.Date.getFullYear();
    });

    var dateDim = ndx.dimension(function (d) { return d.Date; });
    var minDate = dateDim.bottom(1)[0].Date;
    var maxDate = dateDim.top(1)[0].Date;
   composite
        .width(600)
        .height(400)
        .x(d3.time.scale().domain([minDate, maxDate]))
        .yAxisLabel("Percent %")
        .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
        .renderHorizontalGridLines(true)
        .compose([
            dc.lineChart(composite)
                .dimension(dateDim)
                .colors('red')
                .group(accuracy, "Accuracy")
                .valueAccessor(function (p) {
                    if (p.value.count > 0) {
                        var totalC = p.value.total / p.value.count;

                        return totalC;
                    }
                    else {
                        return 0;
                    }


                })])
  .elasticY(true)
        .brushOn(true)

        .render();

I just need a clean solution that will look ok visually. Many Thanks

Upvotes: 1

Views: 399

Answers (1)

Cleared
Cleared

Reputation: 2590

One solution would be to rotate the ticks on the x-axis, see https://github.com/dc-js/dc.js/issues/731

If you have a bar-chart you can simply fix it by css:

#my-bar-chart .x.axis text {
    text-anchor: end !important;
    transform: rotate(-45deg);
}

Upvotes: 2

Related Questions