Высокие диаграммы динамически перемещают dataLabel, если он не подходит

Question

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

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

Вот код моей диаграммы -

var chart_1_Options = {
    chart: {
        renderTo: 'container_chart_1',
        backgroundColor: '#FFFFFF'
    },
    credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: {
        title: {
            text: null
        }
    },
    plotOptions: {
        column: {
            animation: false,
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return '<p style="font-size: 8px;">' + this.y + '% </p>';
                }
            }
        }
    },
    legend: {
        enabled: true
    }
};

Вот изображение того, как выглядит диаграмма, я обвел области, где значение отсутствует

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

Спасибо за любую помощь!

Answer 1

Я думаю, что вы можете попытаться найти эти метки и показать их, выполнив что-то вроде кода ниже:

events: {
  load() {
    let chart = this;

    chart.series[0].points.forEach(p => {
      setTimeout(function() {
        if (p.dataLabel.translateY === -9999) {
          p.dataLabel.translate(p.dataLabel.alignAttr.x, p.dataLabel.alignAttr.y + 20)
          p.dataLabel.css({
            opacity: 1
          })
        }
      }, 50)
    })
  }
}

Демо: https://jsfiddle.net/BlackLabel/unzgsmfr/

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