Хай-чарты двигают xAxis вниз / от графика

Question

Я работаю над устаревшим кодом предыдущего разработчика, и они использовали highcharts.js (v3.0.1). XAxis приземляется в графе ( скриншот ), и я не могу разобраться, почему это так. Я пытался воссоздать это в jsfiddle, но я не могу заставить эту ось двигаться. Я подумал, что, возможно, это была ошибка в версии, но я не могу заставить ее реплицироваться, поэтому я думаю, что это должно быть что-то внутри собственного CSS сайта, который манипулирует им, однако он построен с помощью g, rect, и текстовые теги, которые я не вижу ни в одном из пользовательских файлов CSS.

Я просматривал другие сообщения Highchart.js здесь, но я еще не видел эту проблему опубликованной. Кто-нибудь знает, что мне не хватает?

РЕДАКТИРОВАТЬ: я забыл упомянуть об этом, но все имена пользователей по центру text-center

Answer 1

Проверьте, как именно выровнены метки xAxis. Как я вижу, они повернуты вертикально, поэтому важно установить соответствующее свойство выравнивания надписей:

  xAxis: {
    categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
    labels: {
      align: 'left',
      rotation: 90
    }
  }

Демо:
- метки выравнивают по центру: https://jsfiddle.net/wchmiel/29b4qejc/
- метки выровнены по левому краю: https://jsfiddle.net/wchmiel/56evyrxj/

Ссылка API:
https://api.highcharts.com/highcharts/xAxis.labels.align

Answer 2

вы используете заполнение надписей? https://api.highcharts.com/highcharts/xAxis.labels.padding

Убедитесь, что число больше 0.