Обновление позиции отдельных этикеток xAxis для печати Highcharts

Question

Есть ли способ обновить указанную c метку xAxis, когда пользователь хочет напечатать диаграмму?

Это исходная диаграмма (перевернутый столбец с пользовательскими стилями). Я создал ярлыки xAxis с функцией форматирования

 xAxis: {
        arrowOnEnd: true,
        labels: {
          x: 40,
          formatter: function() {
            if (this.isLast) { return 'Less Likely' }
            if (this.isFirst) { return 'More Likely' }
          }
        },

и смог расположить их так, чтобы это выглядело так, как будто инвертированный xAxis имеет значения от Менее вероятно до Более вероятно следующим образом

 events: {
          load: function() {
            // https://stackoverflow.com/questions/51656849/xaxis-point-specific-label-positions
            const chart = this;
            Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
              if (!tick.isNewLabel && tick.isFirst) { tick.label.attr({ y: 25 })}
              if (!tick.isNewLabel && tick.isLast)  { tick.label.attr({ y: 590 })}
            });
          },

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

Я пытался реплицировать events: { load: ... } logi c в beforePrint или переносить событие print в объект highcharts, но это, похоже, не дает никакого эффекта

 beforePrint: function() {
   const chart = this;
   Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
     if (tick.isFirst) { tick.label.attr({ y: 125 })}
     if (tick.isLast) { tick.label.attr({ y: 590 })}
   });
}

Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
      const chart = this;
      Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
        if (tick.isFirst) { tick.label.attr({ y: 25 })}
        if (tick.isLast)  { tick.label.attr({ y: 590 })}
      });
      proceed.call(this)
  });

Я пытался tickPositionier, но на самом деле не мог понять, как заставить это работать.

Стоит упомянуть. событие afterPrint с тем же логом c сбрасывает график, поэтому я не понимаю, почему одно событие работает (afterPrint), а другое - нет (печать)

 afterPrint: function() {
            const chart = this;
            Highcharts.objectEach(chart.xAxis[0].ticks, function(tick: any) {
              if (tick.isFirst) { tick.label.attr({ y: 25 })}
              if (tick.isLast)  { tick.label.attr({ y: 590 })}
            });
          },

здесь чего-то не хватает? Почему я не могу обновить позицию галочки для печати?

Sidenote - jsfiddle дает мне 502 Bad Gateway, поэтому я не могу ее там продемонстрировать

Answer 1

Изменение события загрузки для рендеринга должно устранить проблему, когда диаграмма будет снова инициализирована перед печатью.

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

  chart: {
    type: 'bar',
    events: {
      render: function() {
        // https://stackoverflow.com/questions/51656849/xaxis-point-specific-label-positions
        const chart = this;
        Highcharts.objectEach(chart.xAxis[0].ticks, function(tick) {
          if (!tick.isNewLabel && tick.isFirst) {
            tick.label.attr({
              y: 20
            })
          }
          if (!tick.isNewLabel && tick.isLast) {
            tick.label.attr({
              y: 350
            })
          }
        });
      },
    }
  },

API: https://api.highcharts.com/highcharts/chart.events.render