nvd3 Chart - xAxis label

Question

How we align the long xAxis labels in zig zag manner? (Don't use rotateLabels), Or Is there any possibility to text wrap for those long xAxis labels in nvd3 charts?

Please find attached images for reference...

Actual Image with - Issue

Expected Result - 1

Expected Result - 2

Thanks in advance...

Answer 1

For expected result 1: You can add the following option: .staggerLabels(true) as you can see here.

For expected result 2: You will have to do it manually on your data by replacing the space by a new line before using it in the chart. You can also have a look at d3 string formatting if you are dealing with numbers.