Folks, I am using highcahrt api in react js. I want the inside text should horizontally and vertically align with the circle. I Tried This Code But nothing happen.. heightchart show the circles as a svg.. is it possible its become div? then i can arrange the text..

text look very bad now see the result

  dataLabels: {
            enabled: true,
            inside: true,
            // format: '{point.name}',
            useHTML: true, // false,
            align: 'center',
            textAlign: "center",
            // verticalAlign: 'center',
            formatter: (item) => {
             
                 const name = title.replaceAll("/","/<br />");

                 return name;
                 
            },
            filter: {
                property: 'radius',
                operator: '>',
                value: 35, // 25,// 35
            },
            style: {
                color: 'white',
                align: 'center',
                textOutline: 'none',
                fontWeight: 'bold',
                fontSize: '10px', // '10px', 
                whiteSpace: 'wrap',
                width: "50px",
                height: "100px",
                padding: "2px",
                textAlign: "center",
                wordBreak: "break-word",
            },
            y: 20

        },