Highcharts - изменение цвета текста, если на гистограмме недостаточно места

Question

В настоящее время я использую гистограмму для отображения моих данных. В этом div моя гистограмма имеет ширину 50%. Если процентная доля полосы слишком велика для ширины, текст рядом с полосой, которая отображает процент, например 10%, отображается на самой гистограмме. Это нормально, но с использованием того же цвета css, что и гистограмма. В этой ситуации трудно прочитать процент.

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

Вот пример фотографии:

Here is a code snippet of what i'm using to change the color of the text using plotOptions

  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
        formatter: function() {
          return `  $ {this.y}%  `; }}}}, 

Вот ссылка на мой jsfiddle, где проблема создается повторно: https://jsfiddle.net/8g4uL0jm/22/

Answer 1

Я думаю, что лучше будет изменить цвет dataLabels после их инициализации, что даст нам информацию об их позициях.

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

events: {
    load() {
        let chart = this;
        
        chart.series[0].points.forEach(p => {
            if (p.dataLabel.alignOptions.align !== "right") {
                p.dataLabel.css({
                    color: p.color
                })
            }
        })
    }
}

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