在 DC.js 图表上移动 x 轴标签

Question

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

Any help much appreciated!

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.