How to customise the width & height of a Victory tooltip text

Question

I'm using Victory Tooltips inside a Victory PieChart. The tooltip text (actually label) is quite huge. I'm unable to break the text in an automatic manner and so the width of the tooltip overflows the container and I can't see the whole text. How do I add a max-width to the tooltip? Is it possible to break the text to multiple lines?

            <VictoryPie
                colorScale     = { colors } // Some colors
                responsive     = { true }
                data           = { data } // Some data
                innerRadius    = { 100 }
                labelRadius    = { 100 }
                labelComponent = { 
                    <VictoryTooltip
                        orientation        = "top"
                        cornerRadius       = { 8 }
                        flyoutStyle        = {{ fill: "#151515", stroke : '#313131' }}
                        pointerOrientation = "bottom"
                        flyoutPadding      = { 20 }
                        text               = { (data) => `top \n ${data.datum?.label}` }
                        style              = { [
                            {fill : 'orange', stroke : 'blue', strokeWidth : '0.1%', fontSize : '20px'},
                            {fill : 'green', stroke : 'red', fontSize : '14px', dy : '20'}
                        ] }
                    />
                }
            />

It shows up like so

How do I show the text in a smaller container?

Answer 1

The only way I found was to add a line break ${'\n'} or creating a CustomFlyout using svg (its on the Victory page docs) https://formidable.com/open-source/victory/guides/tooltips/#tooltips-with-victoryvoronoicontainer