Geek Answers Handbook

SVG text disappears on a larger label

I use Morris.js to create charts. Morris.js uses SVG to draw graphs. I created JSbin here: JSbin example

Morris.js uses Raphael to draw svg graphs. The problem is with the labels on the X axis. They disappear when the size of the labels is too large. I worked hard on the size of the div element containing the graph and font size for the labels, but since labels are dynamically generated for different users, I cannot decide on a fixed value. An ideal solution would be for the text to be wrapped. What can be done to counter the situation? Morris.js uses the following snippet to create an textsvg element .

 this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);
+4
source share
3 answers

Raphael seems to support multi-line strings by putting "\ n" in the text. This may be a cheap solution for you, systematically replacing "" with "\ n" in your shortcuts.

Another (more complicated) solution would be to replace the "text" element in the SVG generated by raphael with an extraneous element that allows word wrap:

<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 reserve:

<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 do not know how best to perform this replacement of the “text” with a foreign object: either after rendering Morris, or by hacking Morris / Raphael.

+4
source

I think the definition of the problem needs more clarification,

, , , JSFIDDLE, .

, , , , 385 CSS 518px , , , , , . .

, . , .

, , :)

: GridTextSize: 16.

Fiddle2

'gridTextSize: 8', 8.

, :)

+3

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

133 |     xLabelAngle: 90,//original value 0

Now, if you really need to minimize this, you can compress the file using any js compression tool online.

+3
source

More articles:


All Articles