How to move label text of pie chart to newline in chartjs

Question

import React from 'react';
import { Chart as ChartJS,ChartOptions, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
import { Box } from '@mui/material';

ChartJS.register(ArcElement, Tooltip, Legend);


export function PieChart
    (props:any): JSX.Element {

const data = {
    labels: ['hello', 'debt', 'liquid funds'],
    datasets: [
        {
            label: `${3.5*10}%`,    
            data: [3.5, 3.5, 3.6],
            backgroundColor: [
             '#F49FAA',
            '#84C7ED',
            '#7BE9E5',
        ],
        borderWidth: 0,
       },
      ],
     }
   const  options:any ={
        plugins: {
           legend: {
                position: "bottom",
                labels: {
                    // This more specific font property overrides the global property
                    usePointStyle: true,
                    pointStyle: "circle",
                    textAlign: 'right',
                    font: {
                        size: 14,
                    }
                }
            }
        }
    }
 return (
    <Box sx={{width:"317px",height:"317px",paddingTop:"34.56px",paddingLeft:"33.19px"}}>
        <Pie options={options} data={data} />
    </Box>
 )
}

enter image description here

enter image description here

want to move the label to next line as in the images above i have tried applying display:block in the css of label cannot see any solution for this