Move x-axis label on DC.js chart

Question

Wondering how I get the x-axis label to not overlap with the tick marks (see below)

Any help much appreciated

EDIT:

As per Gordon's solution below:

Answer 1

It's counterintuitive, but you need to set the margins to allow space for the tick labels and Y axis label.

dc.js does not automatically lay out elements that rely on text size, because it is complicated and expensive to do so.

Instead it requires the user to set margins that leave room. The margins are used to shrink and offset the chart area.

The default margins are {top: 10, right: 50, bottom: 30, left: 30}; these settings are just a guess. You might try

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

and then continue to tweak until it looks right.

Also notice that when you set the xAxisLabel (docs) and yAxisLabel (docs), there is an optional second padding argument. You might want to increase either/both from the default of 12.