CODEWITHSUNDEEP
cssd3.jsdc.js
lambda
lambda

Reputation: 25

dc.bar-chart margin and axis label size adjustment

I found my yAxis label too big to be shown--it was truncated by the left border.

I tried increasing the left margin, with no success. It seems that the label text is left-aligned. So increasing the margin only gets the label further away from the ticks text.

Please see the attached screenshots. The one with wider gap is margin.left=70. The other one is with margin.left=40. No matter which case, the 'Expenditures' seems to be truncated on the left side.

Is there anywhere in the dc.css that I can change this configuration? Thank you!!

Upvotes: 1

Views: 3352

Answers (1)

Gordon
Gordon

Reputation: 20120

You can adjust where the axis labels are placed relative to the edge by using the second parameter when you call the .xAxisLabel() and .yAxisLabel() methods. This sets the "padding" (actually the offset from the left/bottom).

coordinateGridMixin.xAxisLabel docs

coordinateGridMixin.yAxisLabel docs

It's confusing that the text size gets set through the stylesheet but the positioning can't be. I'm not sure if there's any way around this, though

Upvotes: 5

Related Questions