Индивидуальная форма и положение аннотаций в старших чартах

Question

Я выяснил, как установить размер для аннотации по отдельности :

          labels: [
            {
              point: {
                x: chart.xAxis[0].max - 0.1,
                y: 50,
                xAxis: 0,
                yAxis: 0
              },
              height: 100,
              shape: "rect",
              text: "test",
              verticalAlign: "bottom"
            }
          ]

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

И, кроме того, хотелось бы, чтобы текст был выровнен по центру поля?!

Answer 1

Вы можете рассчитать высоту, используя метод toPixels.Вы также должны принять во внимание padding.Для центрирования текста вы можете использовать асинхронную функцию, поскольку аннотации в событии загрузки еще не существуют.

  chart: {
    events: {
      load: function() {
        const chart = this;
        const height =
          chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);

        chart.addAnnotation({
          labels: [
            {
              point: {
                x: chart.xAxis[0].max - 0.1,
                y: 150,
                xAxis: 0,
                yAxis: 0
              },
              y: 0,
              padding: 0,
              height: height,
              shape: "rect",
              text: "test",
              verticalAlign: "top"
            }
          ]
        });
      }
    }
  }

Демонстрационная версия: https://codesandbox.io/s/qqqkx2zr49

API: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels