CODEWITHSUNDEEP
javascriptd3.jsdc.js
Jenna Kwon
Jenna Kwon

Reputation: 1252

dcjs y axis on ordinal bar charts?

Using dc.js, I made an ordinal bar chart with numerical values. I chose ordinal chart because I wanted to add a x-tick for 'unknown'.

The problem is with y-axis. I cannot figure out to fix the axis labeling / scaling. As the picture shows, it alternates between [00, 20, 40, 60, 80]. I would like it to have a full range. I tried to manually insert y ticks, but there doesn't seem to be an accessor method for y-axis. Below is my code and the capture.

    ghg2Chart /* dc.barChart('#volume-month-chart', 'chartGroup') */
        .width(FULL_CHART_WIDTH)
        .height(FULL_CHART_HEIGHT)
        .margins({top: 10, right: 20, bottom: 40, left: 20})
        .dimension(GHG2)
        .group(GHG2Group)
        .elasticY(true)
        .centerBar(true)
        .gap(5)
        .round(dc.round.floor)
        .alwaysUseRounding(true)
        .x(d3.scale.ordinal().domain(GHG2bins))
        .xUnits(dc.units.ordinal)
        .renderHorizontalGridLines(true)
         //Customize the filter displayed in the control span
        .filterPrinter(function (filters) {
            var filter = filters[0], s = '';
            s += numberFormat(filter[0]) + ' -> ' + numberFormat(filter[1]);
            return s;
        })
        .filterHandler(function (dimension, filter) {
            var selectedRange = ghg2Chart.filter();
            dimension.filter(function (d) {
                var range;
                var match = false;
                // Iterate over each selected range and return if 'd' is within the range.
                for (var i = 0; i < filter.length; i++) {
                    range = filter[i];
                    if (d >= range - .1 && d <= range) {
                        match = true;
                        break;
                    }
                }
                return selectedRange != null ? match : true;
            });
            return filter;
        });

enter image description here

Upvotes: 1

Views: 692

Answers (1)

Gordon
Gordon

Reputation: 20120

The only problem with your chart is that there is not enough space for the ticks, so the labels are getting clipped.

The default left margin is 30 pixels:

https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#dc.marginMixin+margins

Try increasing the margin. The lazy way is:

chart.margins().left = 40;

But that's sort of confusing, so the more common way is 

chart.margins({top: 10, right: 50, bottom: 30, left: 40});

It would be awesome for dc.js to do this automatically:

https://github.com/dc-js/dc.js/issues/713

but doing layout based on text sizes is rather difficult, so for now all this stuff is still manual (affects legends, axis labels, etc.)

Upvotes: 1

Related Questions