Word Wrap for Labels

[hisenberg1]

Is there a way to have the labels automatically word wrap when the funnel is either large (wider) or smaller (narrower) so that the labels stay within the funnel?

[jakezatecky]

This is not supported, yet. It's a bit non-trivial because SVG text elements require very specific calculations and word-wrapping is not natively supported. The library would have to manually force newlines if the width would necessitate it.

As shown in the examples, you can override label.format to inject newline characters to force manual wrapping between the label and value yourself. You can also add newlines to the individual labels if necessary:

const data = [
    { label: 'Inquiries', value: 5000 },
    { label: 'Applicants', value: 2500 },
    { label: 'Admits', value: 500 },
    { label: 'My Long\nDeposits Label', value: 200 },
];
const options = {
    label: {
        format: '{l}\n{f}',
    },
};

const chart = new D3Funnel('#funnel');
chart.draw(data, options);

As far as the D3Funnel library handling this, it is not on the immediate horizon.