Как автоматически изменить цвет в столбчатой ​​диаграмме на основе процента в верхних диаграммах

Question

Я хочу изменить цвет автоматически в столбце в процентах. Предположим, есть 4 столбца, которые должны быть представлены в графе столбцов, причем 2 столбца расположены рядом, еще 2 столбца расположены рядом. Процент с цветом делится на 3 категории, которые 30%, 60% и 90%. Столбцы ниже 30% должны перейти в зеленый цвет, 60% - в желтый, а выше 90% - в красный. Данные должны динамически получать из другого места . Пожалуйста, помогите мне ..

Пожалуйста, помните, что результат находится не в столбце стека, но он необходим рядом друг с другом, точно так же, как это, в 2013 году было 2 столбца с именами 4 и 5 над столбцом и т. Д.

Ниже приведен код, который я пробовал.

HTML-код

<div class="row">
  <div class="col-lg-4 col-md-12 col-sm-12 mb-30">
    <div class="bg-white pd-30 box-shadow border-radius-5 xs-pd-20-10 height-100-p">
      <h4 class="mb-30">Nationwide Traffic Utilization</h4>
      <div id="BAU"></div>
    </div>
  </div>
</div>

Код старшей диаграммы

Highcharts.chart('BAU', {
            chart: {
                type: 'column'
            },
            colors: ['#11E117', '#FFC300', '#C00'],     //#209688 Green, #f9d47a Yellow, #f9d47a Red
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['A', 'B', 'C', 'D', 'E', 'F'],
                crosshair: true,
                lineWidth:1,
                lineColor: '#979797',
                title: {
                    text: 'Natiowide Regional Area'
                },
                labels: {
                    style: {
                        fontSize: '12px',
                        color: '#5a5a5a'
                    }
                },
            },
            yAxis: {
                min: 0,
                max: 100,
                gridLineWidth: 0,
                lineWidth:1,
                lineColor: '#979797',
                title: {
                    text: 'Traffic Utilization Percentage'
                },
                stackLabels: {
                    enabled: false,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                enabled: true
            },
            tooltip: {
                headerFormat: '<b>{point.x}</b><br/>',
                pointFormat: '{series.name}: {point.y}'
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    },
                    borderWidth: 0
                }
            },

            series: [{
                name: '&lt; 39% Utilize',
                maxPointWidth: 50,
                data: [50, 30, 40, 70, 20, 50,]
            }, {
                name: '&lt; 69% Utilize',
                maxPointWidth: 50,
                data: [0, 20, 30, 20, 10, 50,]
            }, {
                name: '&gt; 70% Utilize',
                maxPointWidth: 50,
                data: [50, 50, 30, 10, 70, 0,]
            }]
        });

Текущий результат, который я получаю