3

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

enter image description here

Expected Result - 1

enter image description here

Expected Result - 2

enter image description here

Thanks in advance...

Yesvinkumar
  • 559
  • 10
  • 28

1 Answers1

5

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.

wordsforthewise
  • 13,746
  • 5
  • 87
  • 117
Christopher Chiche
  • 15,075
  • 9
  • 59
  • 98
  • Thanks Christopher, How do we done the same thing for multibar grouped and stacked chart. staggerLabels(true) is not working? and also how can i arrange everything in fixed width and height (Even particular width for bars. Now it is rendering based on available width).... – Yesvinkumar Apr 29 '13 at 13:03
  • Hi, it is often necessary to browse the source code of nvd3 to see what is possible. If you don't find what you want, ask new questions :-) – Christopher Chiche Apr 29 '13 at 16:43
  • You can always add a tickValues method to the nvd3 axis component and then use it to pass just the values you want to display as labels. The nvd3 code is quite flexible if you know what you want to do and act accordingly... – paxRoman Apr 30 '13 at 07:35
  • @paxRoman - I tried this by using tickValues. But I need to show the full name of that label as tooltip... How can I do that? – Nithin Viswanathan Jan 27 '15 at 13:51
  • @ChristopherChiche - I tried this by using tickValues. But I need to show the full name of that label as tooltip... How can I do that? – Nithin Viswanathan Jan 27 '15 at 13:53
  • @ChristopherChiche how can we replace space by new line? I tried using
    and \n instead of space but i dont get a new line in the label     – Dinesh Oct 27 '16 at 18:38