Серия HighCharts-XRange: как ограничить ширину меток данных, чтобы они оставались в пределах соответствующей ширины точки данных

Question

Я работаю с диаграммами XRange в High Charts, где у меня есть собственные метки данных для моих точек данных. Я сталкиваюсь с подобной проблемой в 2 сценариях:

1. Когда текст метки данных длиннее ширины соответствующего диапазона точек данных, он переполняется снаружи и на соседних точках данных и скрывает их метку, например:

2. При прокрутке по оси x метки данных скользят и переполняются, даже если диапазон точек данных недостаточно широк для отображения. Это выглядит довольно запутанным;

.

Вы заметили бы, что здесь это выглядит еще хуже;

.

Как это исправить, чтобы метки данных никогда не выходили за пределы точки данных?

Я попытался настроить параметр "inside", но он только гарантирует, что метка не попадет в соседний ряд. Точно так же я посмотрел на параметры обрезки и переполнения в API, но не смог заставить его работать для меня по мере необходимости.

Я понимаю, что опция ширины в стиле может позволить мне решить первую проблему, но у меня не может быть общего абсолютного значения в пикселях для всех меток, поскольку ширина каждой из них является динамической. Кроме того, вторая проблема все еще не решена.

Вы можете найти обе проблемы, воссозданные здесь: https://jsfiddle.net/td0bsxg1/4/. Мне нужно обращаться с ними обоими максимально изящно.

Нужно ли менять какой-либо параметр для меток данных?

dataLabels: {
            enabled: true,
            defer: false,
            inside: true,
            formatter: function () {
              return 'Too Long Data Label';
            }
        }

Answer 1

Вы можете динамически устанавливать индивидуальный стиль width для каждой метки данных и определять правила для них:

events: {
  render: function() {
    if (redrawEnabled) {
      var points = this.series[0].points,
        chart = this,
        dataLabelWidth,
        width;

      redrawEnabled = false;

      Highcharts.each(points, function(point) {
        width = point.shapeArgs.width;

        if (width < 20) {
          point.dataLabel.hide();
        } else {
          point.dataLabel.show();
        }

        point.dataLabel.css({
          width: width
        });
      });

      chart.series[0].isDirty = true;
      chart.redraw();

      redrawEnabled = true;
    }
  }
}

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