Higcharts - marginBottom не допускает рендеринга многоточия серии xAxis

Question

Пространство для xAxis обычно визуализируется динамически библиотекой Highcharts и добавляет многоточие в правильное место, делая его отображаемым с самого начала и обрезая его, когда оно перестает отображать его на графике с помощью некоторого многоточия.

Когда я пытаюсь изменить это пространство, чтобы оно не отображалось динамически, это делает свойство marginBottom, но оно перестает восприниматься, когда текст должен начать отображаться, и начало текста обрезается снизу графика. Есть ли способ правильно отрисовать текст внизу от верхних графиков? Мне нужно, чтобы он поворачивался на 270 градусов, чтобы не работал автоповорот, и я не хочу сворачивать большую часть графика только для отображения текста.

Вот пример, когда это радует:

Highcharts.chart('container', {
    chart: {
    height: 350,
    spacingBottom: 0,
    marginBottom: 50,
        type: "column"
   },

  series: [{
      name: 'Total', 
      data: [1,2,3,4,5]
    }],

  xAxis: {
    categories: ["very long name to test if the characters are rigth and cropped", 
                            "Not so long but long enough", "I still am long and out of the screen", 
                "lets see how is cropped", "cropped", "crop"],
    labels: {
        rotation: 270
    }
    }
});

Образец скрипта с полемBottom : https://jsfiddle.net/ragmar/6ru4hze3/

Если вы удалите marginBottom, даже легенда немного опустится.

Можно сделать это поведение? даже включая некоторые CSS?

Заранее спасибо

Answer 1

Чтобы все заработало так, как вы хотите, вам нужно внести некоторые изменения в ядро ​​Highcharts.Например, вы не можете использовать опцию marginBottom, но установить фиксированное значение в качестве переменной commonWidth в методе renderUnsquish:

if (attr.rotation) {
  commonWidth = (
    maxLabelLength > chart.chartHeight * 0.5 ?
    40 :  // changed from 'chart.chartHeight * 0.33'
    maxLabelLength
  );
  if (!textOverflowOption) {
    commonTextOverflow = 'ellipsis';
  }
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/moL1tw6c/