4

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.

Adam
  • 99
  • 7
  • The fiddle you looked at with the pie chart works because every slice of the pie is in its own series, which can be customised. Since you have all points in the same series, Core972's answer is a good workaround. – ewolden Aug 09 '18 at 20:00

2 Answers2

2

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

Core972
  • 4,065
  • 3
  • 31
  • 45
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!

daniel_s
  • 3,635
  • 1
  • 8
  • 24
  • Thank you, but that makes the chart smaller as well, which I can't do. I learned something new, though. – Adam Aug 10 '18 at 08:07