How do I align text center in HighCharts spiderWeb xAxis Categories?

Question

This is my chart image

I tried to make the xAxis Category text align, so I used style text align: center in some ways, but none of them went well. For example, values like BBBBBB and 100 are not aligned in the center. So is there a way to make it the center?

the chartoption code is like this

{
        chart: {
            renderTo: 'container',
            polar: true,
            type: 'area',
            style: {
                fontFamily: 'SUIT'
            }
        },

        xAxis: {
            categories: [
                '<span style="text-align: center"><span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[0] +
                    '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                    radarData[0] +
                    '</span></span>',
                '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[1] +
                    '</span><br><span style="font-size:20px;color:#002d84; font-weight:700; text-align: center; width: 100%">' +
                    radarData[1] +
                    '</span>',
                '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[2] +
                    '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">&nbsp' +
                    radarData[2] +
                    '</span>',
                '<span style="opacity:0;">2</span><br><span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[3] +
                    '</span><br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                    radarData[3] +
                    '</span>',
                '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[4] +
                    '</span>&nbsp<br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                    radarData[4] +
                    '</span>',
                '<span style="color:#404040; font-size:16px; font-weight:500;">' +
                    radarDataTitle[5] +
                    '</span>&nbsp<br><span style="font-size:20px;color:#002d84; font-weight:700;">' +
                    radarData[5] +
                    '</span>'
            ],

            tickmarkPlacement: 'on',
            lineWidth: 0,
            labels: {
                distance: 30
            },
series: [
            {
                enableMouseTracking: false,
                data: radarData,
                pointPlacement: 'on',
                marker: {
                    radius: 1
                }
            }
        ],
        },
    };

Answer 1

As you can see from the docs and by inspecting the page source, html code is transformed to svg text elements, in particular span is transformed to tspan. A solution to align multiline text in svg with tspan can be found in this SO thread.

Highcharts is smart enough to use both span or tspan, but I'm more comfortable with setting the right attributes to the right element, so I'd use tspan:

   '<tspan style="color:#404040; font-size:16px; font-weight:500;">' +
      radarDataTitle[1] +
   '</tspan><tspan x="0" dy="21" style="font-size:20px;color:#002d84; font-weight:700; text-align: center; width: 100%">' +
      radarData[1] +
   '</tspan>',

Note the missing <br> and the missing outer span that you have in the first label only.

There should be no space between the closing first tspan and the opening second tspan.

If you want to move to left or right the tspans, you should use dx attribute (see the CCCCCC case in my example), don't change the x attribute since highcharts is changing 0 or missing x to the actual absolute position, but is not able to perform calculations using other values.

Here's a jsFiddle example.

Answer 2

Can you please try this?

Here's an updated code.

chart: {
 type: 'area',
 margin: [50, 50, 50, 50], // Adjust the margins as needed
 spacingTop: 50, // Adjust the top spacing as needed
 spacingBottom: 50, // Adjust the bottom spacing as needed
 spacingLeft: 50, // Adjust the left spacing as needed
 spacingRight: 50 // Adjust the right spacing as needed
},

This is alternative ways,

I don't know if this will work, but you can try adjusting the chart's positioning using the chart.margin and chart.spacing properties.