Как скрыть панель, но сохранить метки данных HighCharts

Question

Как скрыть бар, но сохранить метки данных HighCharts, у меня есть 3 бара,

1. Цель
2. Реализация
3. Процент

Я должен был показывать только первый и второй столбец, только с 1 меткой данных, что в процентах.поэтому я сделал несколько хитростей с моим кодом
Вот пример:

var target = [50,100];
var realization = [10,40];
var percentage = [];

for(i = 0;i < target.length; i++) {
  var divide = (realization[i] / target[i]) * 100;
  if (divide == Number.POSITIVE_INFINITY || divide == Number.NEGATIVE_INFINITY || isNaN(divide)) {
    percentage.push(0);
  } else {
    percentage.push(divide);
  }
}
series: [
    {
      name: 'Target )',
      color :' #009933',
      data: target,

    },
    // i put the trick on the second series where i tricked it
    {
      name: 'Percentage',
      data: percentage,
      color :'rgba(255, 255, 255, .4)',
      showInLegend: false,
      pointWidth :1, 
      lineColor: 'transparent',
      marker: { 
        fillColor: 'transparent',
        states: {
          hover: {
              enabled: false
          }
        }    
      }
    },
    {
      name: 'Realization',
      color : '#00ff00',
      data: percentage,
    }]

это будет выглядеть так Уловка, которую я использовал, это сделатьв процентах по центру и измените цвет полосы на прозрачный.
Это результат, который я ожидал
Это мой полный код:
https://jsfiddle.net/xanrdswq/
Это только временное решение, которое у меня есть.

Answer 1

Это может быть просто достигнуто с помощью метода Highchart.SVGRenderer.text, который позволяет рисовать пользовательский текст.Метки могут быть добавлены в обратный вызов события рендеринга или обратный вызов диаграммы (если ширина диаграммы фиксирована).

Проверьте код и демоверсию, размещенную ниже, и дайте мне знать, если что-то не понятно для вас.

Код:

chart: {
  type: 'bar',
  events: {
    render: function() {
      const chart = this,
        xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        offsetX = 5;

      let customElems = chart.customElems || [],
        y,
        x,
        element;

      if (customElems.length) {
        customElems.forEach(elem => {
          elem.destroy();
        });

        customElems.length = 0;
      }

      chart.series[0].points.forEach((point, i) => {
        x = yAxis.toPixels(point.y) + offsetX;
        y = xAxis.toPixels(point.x);

        element = chart.renderer.text(`${percentage[i]} %`, x, y).css({
          fill: '#000'
        }).add().toFront();

        customElems.push(element);
      });

      chart.customElems = customElems;
    }
  }
}

Демонстрация:

• https://jsfiddle.net/BlackLabel/4pyoc2td/1/

Ссылка API:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

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

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#destroy

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