highcharts polar chart, move labels individually to fit small space

Question

I have a polar chart diagram where I am trying to move two out of four labels on the x axis. It is a diamond shape in a narrow space, so the labels at the right and left are cut off. I'm trying to move them, but I can't get them to move. I'm trying to move labels Category 1 and Category 3 down 30px and towards the centre by ~100px.

Code for labels

  xAxis: {
   categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
   tickmarkPlacement: 'on',
   lineWidth: 0,
   labels: {
   style: { fontSize: '150%',
},
},
},

Fiddle https://jsfiddle.net/Adam300/kuvs0eah/8/

I looked at this fiddle from here but I'm having trouble understanding it.

Answer 1

Since there is only one serie the only solution I can think is to use this CSS code :

.highcharts-xaxis-labels text:nth-child(1), .highcharts-xaxis-labels text:nth-child(3){
   transform: translate(0,47px); !important;
}

It's not perfect but it's works

Fiddle

Answer 2

You can se your chart.marginLeft and chart.marginRight properties to define the side margins of your chart container. Please take a look at code and example below:

chart: {
   polar: true,
   type: 'line',
   marginLeft: 100,
   marginRight: 100,
   style: {
    fontFamily: 'Georgia',
   }
}

Live example: https://jsfiddle.net/fjhz4wx7/

API Reference:

https://api.highcharts.com/highcharts/chart.marginLeft

https://api.highcharts.com/highcharts/chart.marginRight

Kind regards!