CODEWITHSUNDEEP
d3.js
callmekatootie
callmekatootie

Reputation: 11228

How to word wrap the legend text for a donut chart

I have a donut chart with a legend.

Problem is that the text of the legend is too long and overflows the size of the container.

How do I carry out a word wrap so that the text continues on the next line?

I tried setting the word-wrap: break-word property but it did not work.

Upvotes: 3

Views: 1431

Answers (1)

th3n3wguy
th3n3wguy

Reputation: 3737

As @cuckovic stated, you can use the <foreignObject> to word wrap. An example of this would be:

<svg width="400px" height="300px">
.
.
    <foreignObject width="100" height="50">
        <p>Here is a paragraph that requires word wrap.</p>
    </foreignObject>
.
.
</svg>

The example given was taken from the Mozilla Developer's site at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Upvotes: 1

Related Questions