How to: line breaks in label

[meliborn]

I have the next issue:

How to make labels more responsive?

[jakezatecky]

Admittedly, there is unfortunately no current way to move the labels anywhere (#10), wrap them, or add line breaks. It is rather non-trivial to add these elements, but certainly desirable.

[jakezatecky]

Upon further inspection, it appears like it would be relatively easy to support manually-defined line breaks. Would just need to add appropriate <tspan> elements. Just need to make sure that the first element has a dy of (-1 * textHeight * (length - 1)) / 2 while the rest of the <tspan> elements have a dy of textHeight.

<text x="160" y="280" fill="#fff" text-anchor="middle" dominant-baseline="middle" pointer-events="none" style="font-size: 14px;">
  <tspan dy="-10" x="160" text-anchor="middle" dominant-baseline="middle">Applicants</tspan>
  <tspan dy="20" x="160" text-anchor="middle" dominant-baseline="middle">12,000</tspan>
</text>

I'll target this for a release soon.

[jakezatecky]

Line breaks are now supported in the label.format. It is important to note that this is not done responsively: the chart will not automatically break lines when it the text will exceed the container.

Since this is a change from previous treatment of newline characters, this will be released in a new major version.