labels are cut off at top of barChart

[Robert James Liguori]

When enabling labels... the labels are cut off when the y value is at maximum of the barChart.

How may I fix this?

var timeBarChart = dc.barChart("#time-chart-id");

    timeBarChart

                            .width(700)

                            .height(200)

                            .margins({top: 10, right: 10, bottom: 20, left: 40})

                            .colors(d3.scale.category10())

                            .dimension(dateDimension)

                            .group(hoursGroupCount)

                            .x(d3.scale.ordinal().domain(data.map(function (d) {

                                return d.month;

                            })))

                            .xUnits(dc.units.ordinal)

                            .label(function(d) { return Math.round(d.data.value *100)/100 })  

                            .title(function(d) { return Math.round(d.value *100)/100 })

                            .brushOn(true)

                            .elasticY(true)

                            .yAxisLabel('Hours')

                            .yAxis().ticks(15);

[Gordon Woodhull]

Axes and labels are not fit automatically in dc.js - that gets pretty complicated because you have to calculate text sizes. 

Instead, set the top margin with .margins({...}) so that your text fits.

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/ffaa40bb-0ec7-489b-af6a-097a1db49900%40googlegroups.com.

[Robert James Liguori]

but the top margin controls what is outside of the y axis frame...

the cutoff appears at the top of the bar value.  So if the value is 10,000, the range ends at 10,000 so anything about 10,000 is missing.

Robert

[Gordon Woodhull]

Ah yes, by default there is a clip region around the chart body, so you also need to either set

              .clipPadding(20) // adjust as needed

Or disable the clip path entirely with CSS

      #test.dc-chart g.chart-body {

          clip-path: none;

      }

where test is your chart id. Messy stuff, it would be a beast to get dc.js to work automatically in all conditions.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/08ca7770-f0f6-4b1d-8623-d13dfc6b0ce7%40googlegroups.com.