SVG text disappears on larger label

Question

I am using Morris.js for making charts. Morris.js uses SVG to draw the graphs. I have set up a JSbin here: JSbin example

Morris.js uses Raphael to draw the svg graphs. The issue is with the labels on the X-Axis. They disappear when the size of labels is too large. I tinkered around with the size of the div element holding the graph and font size of the labels but since the labels are dynamically generated for various users I cannot decide on a fixed value. An ideal solution would be to have the text wrapped up. What can be done to counter the situation? Morris.js uses the following snippet to make the text svg element.

 this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);

Answer 1

It seems raphael supports multiline strings by putting "\n" in the text. This could be a cheap solution for you, systematically replacing " " by "\n" in your labels.

The other (more tricky) solution would be to replace the "text" element in the SVG generated by raphael by a foreign element that allows word wrapping:

<foreignObject x="20" y="10" width="150" height="200">
   <p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p>
</foreignObject>

or if you need a fallback:

<switch>
  <foreignObject x="160" y="10" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Wrapping text using some foreignObject in SVG!</p></foreignObject>
  <text x="20" y="20">Your SVG viewer cannot display html.</text>
</switch>

I don't know the best way to do this replacement of "text" by a foreign object: either after the Morris rendering or by hacking Morris/Raphael.

Answer 2

I think the problem definition need more clarification,

at my end the code you have sent works fine, also I have replicated the same in JSFIDDLE that is also working fine..

I think the label problem is done automatically as I have tested the default size you have kept was carrying width 385px when looking in to CSS and 518px when looking the same, in both case the rendered labels were different, in-fact the label exceeding certain width were not rendered. SO there is no meaning to set style and override.

I think the things are built in library. So its a long way to go, or change the library.

let me know which will be convenient way, I will help you accordingly :)

Edit: However, you can change property of GridTextSize: that is 16 by default

Fiddle2 here I have updated

'gridTextSize:8' that displays all text in size 8.

Not perfect but will do :)

Answer 3

Download not minimized morris.js from there. In zip-archive you can find a file morris.js. Open it in edit mode and change value of default label angle parameter (line 133):

133 |     xLabelAngle: 90,//original value 0 

Now, if you really need it minimized, you can compress file by any online js compress tool.