[SOLVED] highcharts polar chart, move labels individually to fit small space

highcharts polar chart, move labels individually to fit small space

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.

Solution

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