Полярная диаграмма старших графиков, перемещайте метки индивидуально, чтобы соответствовать небольшому пространству

Question

У меня есть диаграмма полярной диаграммы, где я пытаюсь переместить две из четырех меток на оси х. Это узкая форма ромба, поэтому метки справа и слева обрезаются. Я пытаюсь их переместить, но не могу заставить их двигаться. Я пытаюсь переместить метки категорий 1 и 3 на 30 пикселей вниз и к центру на ~100 пикселей.

Код для этикеток

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

Скрипка https://jsfiddle.net/Adam300/kuvs0eah/8/

Я посмотрел на эту скрипку отсюда, но мне трудно понять это.

Answer 1

Поскольку существует только одна серия, единственное решение, которое я могу подумать, это использовать этот код CSS:

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

Это не идеально, но это работает

скрипка

Answer 2

Вы можете себе chart.marginLeft а также chart.marginRight свойства для определения боковых полей вашего контейнера диаграммы. Пожалуйста, посмотрите на код и пример ниже:

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

Пример из жизни: https://jsfiddle.net/fjhz4wx7/

Справочник по API:

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

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

С уважением!